In dev mode styles are duplicate when using @import

[RogierdeRuijter]

Astro Info

Astro                    v3.5.3
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap

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

No response

Describe the Bug

When adding the following code to an astro page

<style>
  @import "/styles.css";
</style>

The styles in the styles.css are applied twice in dev mode. This can be seen by checking the styles on the html tag, there you can see that red is displayed twice.

What's the expected result?

That the styles are added once

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-hgkbnw?file=src%2Fpages%2Findex.astro

Participation

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

[matthewp]

Can you trim down the reproduction. I think only a single page, no components, just the @import is really needed to show the problem here. Thanks!

[RogierdeRuijter]

@matthewp cleaned it up!

[lilnasy]

• Related: https://github.com/withastro/astro/issues/5857

That one was deemed an architectural limitation but this may be different as there is an explicit import.

[bluwy]

I made an initial fix at https://github.com/withastro/astro/tree/fix-css-tracking, however it's not easy due to the way we handle HMR.

Currently, the modules of @import while belonging to the Astro style tag, they also belong to the main Astro file internally. That means when we try to crawl the Astro file for CSS to be added to the rendered HTML, we will see the @import modules as part of the Astro file and add them to the rendered HTML too.

We need to refactor how we handle HMR a bit before we can fix this nicely, particularly:

https://github.com/withastro/astro/blob/ae29fad70b8f5d32baca00625e1e8ed94fee47f6/packages/astro/src/vite-plugin-astro/hmr.ts#L70-L75

(Note: the code above only handles direct imports and not recursively, means it only tracks A.astro -> B.css but not A.astro -> A.astro?style.css -> B.css)

I can try to re-do the HMR handling a bit for Astro 4.0 and see how it goes.

Related: https://github.com/withastro/astro/issues/9370#issuecomment-1850160421

[mayank99]

something else i noticed is the styles are getting scoped in prod version, which i don't think is intended.

in dev mode, both unscoped and scoped styles are present.

repro: https://stackblitz.com/edit/withastro-astro-dtgcxj?file=src%2Fstyles.css,src%2Fpages%2Findex.astro

[ascorbic]

I'm closing this. I just tested both @RogierdeRuijter and @mayank99's repros (thanks!) with astro@4.15.10 and can no longer reproduce the issue.