Skip to content

AceCodePt/astro-partial-css-bug

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Astro Partial CSS Bug Reproduction

Minimal reproduction for CSS missing in production builds when using export const partial = true (Astro 6.1.0+).

The Bug

When a page imports a partial (with export const partial = true), and that partial imports a styled component, the component's CSS is completely missing in production builds.

  • Dev mode: Works correctly ✅
  • Production build (6.0.8): CSS is inlined ✅
  • Production build (6.1.0+): CSS is missing ❌

File Structure

src/pages/index.astro                          (Page)
  └─ imports SearchResults
src/pages/partials/search-results/index.astro  (Partial with `export const partial = true`)
  └─ imports ResultsTable
src/pages/_components/ResultsTable/index.astro (Styled Component with scoped CSS)

Reproduction Steps

1. Install dependencies (Astro 6.1.5 - broken)

pnpm install

2. Build for production

pnpm build

3. Check the output

cat dist/index.html

Result: The HTML has the scoped class data-astro-cid-b5yldnly but no CSS (no <style> tag, no CSS files).

4. Downgrade to Astro 6.0.8 (working)

pnpm add astro@6.0.8 --save-exact
rm -rf dist
pnpm build
cat dist/index.html

Result: The CSS is inlined in a <style> tag ✅

Expected Behavior

The CSS from ResultsTable should be included in the production build, either:

  • Inlined in a <style> tag (like 6.0.8), or
  • In a separate CSS file linked in <head>

Actual Behavior (6.1.0+)

The CSS is completely missing. The HTML has the scoped attributes but no corresponding styles.

Workarounds

Option 1: Remove export const partial = true

- export const partial = true;

Option 2: Force CSS bundling with anonymous import

---
import SearchResults from './partials/search-results/index.astro';
import './pages/_components/ResultsTable/index.astro'; // Force CSS bundling
---

Option 3: Downgrade to Astro 6.0.8

pnpm add astro@6.0.8 --save-exact

About

Minimal reproduction: CSS missing in production when using 'export const partial = true' (Astro 6.1.0+)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors