Missing styles due to head propagation issue

[HiDeoo]

Astro Info

Astro                    v5.7.8
Node                     v22.14.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx

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

No response

Describe the Bug

When an integration or Starlight plugin inject dynamic routes, we are noticing in Starlight that some styles can end up missing from the head for content collection content rendered by Starlight in development mode only.

It looks like the issue is quite related to some architecture choices used in Starlight and how the astro:content import seems to be key in handling head propagation correctly.

The reproduction I shared (also available in https://github.com/HiDeoo/astro-cc-head-propagation-repro) can seem a bit weird at first but is meant to reproduce a similar setup to what we have in Starlight and reproduce the issue without the need to add Starlight in the mix.

I'm sharing below my investigation notes if it can help but head propagation is not something I worked a lot with in the past and only had a basic understanding of it before looking into this issue. I might be missing some details or not fully understanding how it works.

Click to see my notes

• Starlight dynamic route is basically /[...slug]
• The astro:content import automatically gets a propagation metadata attached to it and flagged as in-tree (aka. another component within this component's dependency tree appends head content.)
• When the vite-plugin-head resolves an ID for a module which contains the propagation metadata sets to in-tree, it will propagate that metadata up to all importers/parents

Here is a simplified version of the Starlight architecture:

• routes/static/index.astro (entry route)
  • Renders <CommonPage> from routes/common.astro
    • Renders <Page> from components/Page.astro
    • Computes route data using helpers from utils/routing/data (this imports and use astro:content to render() a CC entry)
• components/StarlightPage.astro (custom page component)
  • Renders <Page> from components/Page.astro
  • Computes route data from utils/starlight-page
    • Computes route data using helpers from utils/routing/data

When multiple dynamic routes are present (e.g. injected by a plugin that also render <StarlightPage>), the first route that gets resolved will properly detect the deeply nested and shared astro:content import and propagate the metadata up. Altho, due to the shared and nested astro:content import, the second one will never trigger the CC in-tree propagation for that component tree (astro:content imported from utils/routing/data is already resolved and it's skipped?), and can lead to missing styles.

For example, with Starlight [...slug] route, if a plugin inject the [...skug] route, propagation for CC content handled by Starlight will not happen (as skug will end up before slug). Renaming that plugin route to [...smug] will fix the issue.

It looks like a workaround for Starlight would be to move our astro:content call to render() to something like routes/common.astro which would end up adding a different astro:content import which would workaround that issue.

What's the expected result?

No missing styles.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qpue1z55?file=src%2Fpages%2F%5B...slug%5D.astro

Participation

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