Styles aren't always included in dev mode

[jurajkapsz]

Astro Info

Astro                    v6.1.2
Vite                     v7.3.1
Node                     v24.6.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  @astrojs/node (v10.0.4)
Integrations             @astrojs/mdx (v5.0.3)
                         build/info
                         build/images
                         build/cleanup
                         @astrojs/sitemap (v3.7.2)
                         gab-astro-compress (v0.1.2)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

After upgrading an Astro v5 project to Astro v6, it happens that the .astro component styles aren't included in the dev mode output.

Use case:

• I have .astro components, that contains some markup, script and style tag:

<h1>My Component</h1>

<script> // component script </script>

<style type="scss" is:global> /* component styles */</style>

• The components are included in multiple pages (as part of mdx content), for example:

---
frontmatter...
---

import Photo from "@components/content/photo.astro";

Some paragraph...

<Photo ... />

Some paragraph...

• When browsing the website in dev mode, the style of some components is most of the time missing, but not always; ie on certain pages the component has its styles included, on others it does not and the presentation is broken.
• After running build, the styles are again present as they should, even in places, where they were missing in dev mode.

I was not able to reproduce this on a brand new Astro v6 install yet.

This issue appeared alongside #16179 issue (after upgrade to Astro v6).

What's the expected result?

All styles should be present in dev mode view the same way as later in the built version (or like in Astro v5).

Link to Minimal Reproducible Example

Participation

• I am willing to submit a pull request for this issue.

[astrobot-houston]

I was unable to reproduce this issue. I created a triage project matching the reported setup — .astro components with <style type="scss" is:global> tags imported across multiple MDX pages, the @astrojs/node adapter, and output: 'static'. After extensive testing (sequential requests, concurrent stress tests, browser-based verification, and pages with 10+ styled components), all styles were consistently present in dev mode across all pages. This aligns with your own observation that you were unable to reproduce on a fresh Astro v6 install.

I was unable to find a fix for this issue. Since the bug could not be reproduced in a clean environment, the root cause is likely tied to your specific project configuration. Some things to try: (1) delete node_modules/.vite/, .astro/, and node_modules/.cache/ to clear stale caches from the v5-to-v6 upgrade, (2) temporarily disable custom integrations (build/info, build/images, build/cleanup, gab-astro-compress) to see if one of them interferes with style collection, and (3) verify your SCSS preprocessor setup is compatible with Vite 7 / Astro v6. A minimal reproducible example would be essential for further investigation.

P3: minor bug. This appears to be an edge case specific to a particular project configuration — likely related to the v5-to-v6 upgrade path combined with custom integrations and SCSS preprocessing. The reporter and automated triage both failed to reproduce on fresh installs, suggesting most users upgrading to Astro v6 will not encounter this issue.

Full Triage Report

Triage Report: Issue #16181 — Styles aren't always included in dev mode

Issue Details

• Title: Styles aren't always included in dev mode
• Author: jurajkapsz
• URL: Styles aren't always included in dev mode #16181
• Labels: needs triage
• Created: 2026-04-01

Description

After upgrading an Astro v5 project to Astro v6, the reporter observes that .astro component styles aren't consistently included in dev mode output. The issue is intermittent — on certain pages the component has its styles included, on others it does not.

The components use the following pattern:

<h1>My Component</h1>
<script> // component script </script>
<style type="scss" is:global> /* component styles */</style>

These components are imported in multiple MDX pages. When browsing in dev mode, styles are sometimes missing, but after running build, styles are always present correctly.

The reporter explicitly noted: "I was not able to reproduce this on a brand new Astro v6 install yet."

Reporter's Environment

• Astro v6.1.2
• Vite v7.3.1
• Node v24.6.0
• Linux (x64)
• pnpm
• Output: static
• Adapter: @astrojs/node (v10.0.4)
• Integrations: @astrojs/mdx (v5.0.3), @astrojs/sitemap, plus custom integrations (build/info, build/images, build/cleanup, gab-astro-compress)

Expected Behavior

All styles should be present in dev mode, same as in the built version and same as in Astro v5.

Reproduction Link

No minimal reproducible example was provided. The reproduction link was # (empty).

Reproduction Attempt

Environment Used

• Astro v6.1.2 (workspace version)
• Node v24.14.0
• Linux (x64)
• pnpm
• @astrojs/mdx (workspace version)
• @astrojs/node (workspace version)

Setup

Created a triage project (triage/gh-16181) based on the with-mdx example, configured with:

• @astrojs/mdx integration
• @astrojs/node adapter (matching reporter's config)
• output: 'static' (matching reporter's config)

Created multiple .astro components (Photo.astro, Alert.astro, Heading.astro, plus 10 Widget*.astro components) that match the pattern described in the issue:

• HTML markup
• <script> tags
• <style type="scss" is:global> tags (matching the exact attribute combination the reporter uses)

Created multiple MDX pages (index, page2-5, many-widgets) that import these components, matching the pattern described.

Also tested with a shared layout (BaseLayout.astro) wrapping all pages with its own <style is:global> tag.

Tests Performed

1. Basic dev server test (without type="scss"): All pages served correctly with all expected style tags present. Tested 5 sequential requests per page.

2. Dev server test with type="scss" is:global: Same result — all styles consistently present on all pages.

3. Dev server with @astrojs/node adapter: Same result — all styles present.

4. Dev server with layout wrapping: All pages showed expected style count (component styles + layout style).

5. Concurrent request stress test: 10 concurrent requests per page, repeated 5 times. No style tags ever missing.

6. Many components test: Created a page importing 10 widget components. All 11 style tags (10 widgets + 1 layout) consistently present across 20 concurrent requests.

7. Browser-based test (agent-browser): Verified styles are present in a real browser environment, not just via curl. Navigated through multiple pages. All styles present.

8. Build verification: Build completed successfully with all styles inlined in the HTML output of all pages, confirming the build side works as expected.

Result

NOT REPRODUCED. The bug could not be reproduced in a clean Astro v6.1.2 setup, even with:

• The same component pattern (<style type="scss" is:global>)
• Multiple MDX pages importing the same components
• The @astrojs/node adapter
• Layouts wrapping MDX content
• Concurrent requests
• Large numbers of styled components

This aligns with the reporter's own statement that they were unable to reproduce on a fresh install.

Theories

The issue may be related to:

1. Project-specific caching or Vite state: The reporter's project upgraded from v5 to v6, which may have left stale cached artifacts (e.g., in node_modules/.vite/ or .astro/) that cause intermittent style resolution failures.
2. Custom integrations: The reporter uses custom integrations (build/info, build/images, build/cleanup, gab-astro-compress) that may interfere with style collection or rendering.
3. SCSS processing: The type="scss" attribute in the style tag typically requires an SCSS preprocessor. If the project has SCSS configured in a specific way, it might interact poorly with Vite's style handling in dev mode.
4. Related issue Styles from standalone page templates leaking into other templates #16179: The reporter mentions this appeared alongside Styles from standalone page templates leaking into other templates #16179. That issue may provide additional context about what changed during the upgrade.
5. Race condition specific to larger projects: The reporter's project is likely much larger than our minimal reproduction, and race conditions might only manifest under specific module graph conditions.

Recommendation

This issue lacks a minimal reproducible example, and the reporter themselves confirmed they couldn't reproduce on a fresh install. The bug may be specific to the reporter's project configuration (custom integrations, SCSS setup, or stale cache from v5→v6 upgrade). A minimal reproduction from the reporter would be needed to investigate further.

This report was made by an LLM. Mistakes happen, check important info.

[matthewp]

Can you try again with astro@6.1.3? We did have some styling fixes in that.

[astrobot-houston]

I was unable to reproduce this issue. I created a reproduction project on astro@6.1.3 matching the reported setup — multiple .astro components with <style type="scss" is:global> tags imported across 5 MDX pages, using the @astrojs/node adapter with output: 'static'. After extensive testing (sequential requests, concurrent burst tests with 5 parallel requests per page, and verifying all component-specific styles on every page), all styles were consistently present in dev mode. This aligns with the reporter's own observation that the issue could not be reproduced on a fresh Astro v6 install.

I was unable to find a fix for this issue. Since the reporter is on astro@6.1.2, it's worth noting that astro@6.1.3 includes fix: stop CSS traversal at page boundaries (#16116) — a CSS-related fix that could be relevant. As @matthewp suggested, upgrading to astro@6.1.3 is the recommended first step. If the issue persists after upgrading, clearing stale caches (node_modules/.vite/, .astro/) from the v5→v6 migration and temporarily disabling custom integrations (build/info, build/images, build/cleanup, gab-astro-compress) would help narrow down the cause. A minimal reproducible example is essential for further investigation.

P3: minor bug. This appears to be an edge case specific to a particular project configuration — likely related to the v5→v6 upgrade path combined with custom integrations and SCSS preprocessing. Neither the reporter nor automated triage could reproduce the issue on fresh installs, and a CSS fix was already shipped in v6.1.3 that may address it.

Full Triage Report

Triage Report: Issue #16181 — Styles aren't always included in dev mode

Issue Details

• Title: Styles aren't always included in dev mode
• Author: jurajkapsz
• URL: Styles aren't always included in dev mode #16181
• Labels: needs triage, needs response
• Created: 2026-04-01

Description

After upgrading an Astro v5 project to Astro v6, .astro component styles aren't consistently included in dev mode output. The issue is intermittent — styles appear on some pages but not others. After astro build, styles are always present correctly. The reporter noted they were unable to reproduce on a fresh Astro v6 install.

Reporter's Environment

• Astro v6.1.2, Vite v7.3.1, Node v24.6.0
• Linux (x64), pnpm
• Output: static, Adapter: @astrojs/node (v10.0.4)
• Integrations: @astrojs/mdx (v5.0.3), @astrojs/sitemap, plus custom integrations (build/info, build/images, build/cleanup, gab-astro-compress)

Reproduction Link

No minimal reproducible example was provided.

Reproduction Attempt

Environment Used

• Astro v6.1.3 (workspace version)
• @astrojs/mdx (workspace version)
• @astrojs/node (workspace version)
• Linux (x64), pnpm

Setup

Created a triage project with:

• @astrojs/mdx integration, @astrojs/node adapter, output: 'static'
• 5 .astro components (Photo, Alert, Heading, Card, CodeBlock) each with <script> tags and <style type="scss" is:global> tags
• 5 MDX pages importing various combinations of these components
• A shared BaseLayout.astro layout with its own <style is:global>

Tests Performed

1. Sequential requests: All 5 pages tested with 10 sequential requests each. All style tags present on every request.
2. Concurrent burst test: 5 parallel curl requests per page, all 5 pages. Style tag counts were identical across all requests (4-6 style tags per page depending on component count).
3. Component-specific verification: Checked for component-specific CSS class names (.photo-component, .alert-component, etc.) in HTML output. All components had their styles present on every page where they were used.
4. Build verification: Production build completed successfully with all styles present.

Result

NOT REPRODUCED. Styles were consistently present in dev mode across all test scenarios on astro@6.1.3.

Relevant Changes in v6.1.3

The following CSS-related fix was included in astro@6.1.3 (which the reporter hasn't tried yet):

• fix: stop CSS traversal at page boundaries (#16116) — prevents CSS graph traversal from crossing page boundaries

Recommendations

1. The reporter should upgrade to astro@6.1.3 as suggested by @matthewp
2. Clear stale caches from the v5→v6 migration (node_modules/.vite/, .astro/, node_modules/.cache/)
3. Temporarily disable custom integrations to isolate whether one interferes with style collection
4. If the issue persists, provide a minimal reproducible example for further investigation

This report was made by an LLM. Mistakes happen, check important info.