Fix duplicate CSS in dev mode

[natemoo-re]

Changes

• Closes 🐛 BUG: CSS is duplicated in dev server. #4102
• During dev, Vite treats all .css files as JS modules that inject themselves into the page.
• This is great for HMR, but it leads to flashes of unstyled content during astro dev.
• To avoid this, Astro started injecting the static CSS while server-side rendering the file. This avoids any flashes of unstyled content, but when the CSS is injected for HMR, it leads to duplicate styles.
• This PR adds a tiny MutationObserver to our client/hmr logic that removes any SSR'd styles as soon as the HMR styles are present on the client. No more duplicates!
• Also removed the data-astro-injected attribute because it's no longer needed!

Testing

Tests using data-astro-injected updated. HMR already covered by existing tests.

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: 29baf0c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
astro	Patch
@e2e/astro-component	Patch
@e2e/error-react-spectrum	Patch
@e2e/error-sass	Patch
@e2e/errors	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚖️ Bundle Size Check

Latest commit: 29baf0c

File	Old Size	New Size	Change
hmr	479 B	712 B	+ 233 B

[FredKSchott]

LGTM. I'd love to see a simpler solution if you think one exists, but only if it's a light lift. Otherwise, this is more than enough heading into a great v1.0 release!

[ChrisSki]

@natemoo-re Any chance this made it's way back into dev mode? I'm experiencing duplicate css when using the following in an astro file:

<style lang="scss">
  @import "./BlogPost.scss";
</style>

[benmardana]

I'm also seeing this when importing scss modules into React components. E.g.

import styles from './navigation.module.scss';

They appear to be duplicated between inline and the original file