Duplicate css and js bundle tags when mdx is rendered in sub-layout

[fflaten]

What version of astro are you using?

1.8.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

When MDX imports a component and is rendered using a sub-layout/nested layout (ex. BlogPostLayout which again uses BaseLayout), link tags for bundled stylesheets and bundled JS module may be injected twice in astro build. The duplicates are placed in the body before the component.

Run astro build in repro and inspect generated HTML.

Repro includes three layouts:

• One (base). This always works as expected - no duplicates
  • Two (inherits One).
    • Three (inherits Two)

Pages:

• index*.astro imports <Content /> from MDX. render() with content collections behaves the same.
• test*.mdx uses layout-frontmatter. This only fails using layout Three for some unknown reason.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ske6w4

Participation

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

[thejediknight]

Facing same issue, I am using astro 1.9.

[nicholasray]

Also seeing this issue on my website which uses Astro 1.9.1

[sarajw]

Another one here - not just in dev but in the built static site too. Makes editing CSS in devtools a little annoying!

Just a thank you in advance, at least I hope this is the root of the issue I'm having :)

[matthewp]

Sorry about this one. There's a couple of CSS ordering / duplication bugs floating around and I'm tackling all of those now.

[matthewp]

I think this is likely fixed by #6034 but keeping open to test.

[fflaten]

No more duplicates (🎉) but it injects link+style in body now. Is that intentional?
Updated repro with 2.0.4: https://stackblitz.com/edit/github-ske6w4-cjs3nj