Imported CSS getting duplicated in dev server

[mayank99]

What version of astro are you using?

1.9.2

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

None

What package manager are you using?

npm

What operating system are you using?

Windows / Stackblitz

Describe the Bug

Original description

When importing a css file (local or npm. @import or import. doesn't matter), the styles get duplicated anywhere from 2-4 times.

Doesn't seem to affect prod build, and doesn't seem to affect styles defined in the same file.

Possibly related issues: #5817, #5834, #5715

When importing a stylesheet into a cascade layer, the styles get incorrectly duplicated outside the layer. See comment below: #5857 (comment)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fkhp2c-kkhdqq

Participation

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

[natemoo-re]

The original issue here is fixed by #5917.

The @layer bug seems like an upstream Vite issue.

[mayank99]

just for clarity, i did not touch the devSourcemaps option. maybe another e2e fixture without that option would help?

i can open an issue in vite for the layer issue, but i can't seem to reproduce it in vanilla vite

[gvkhna]

just for clarity, i did not touch the devSourcemaps option. maybe another e2e fixture without that option would help?

i can open an issue in vite for the layer issue, but i can't seem to reproduce it in vanilla vite

I believe the issue here is that with devSourcemaps it was creating double styles, as in the style tag inline and also the style src referenced. Which caused an issue with layer directive because styles were duplicated in the page. Considering that, I don’t think it would be repro without devSourcemaps.

[mayank99]

but it is reproducible in my two stackblitz links above

[gvkhna]

O yes, that makes sense. Astro is doing the same thing irrespective of devSourcemaps I believe. But the issue would be fixed without double styles. That makes sense why you can’t reproduce in vanilla vite. I’m pretty sure it’s the same issue but I would have to take a closer look when this PR is merged, can you try with the PR?

[natemoo-re]

just for clarity, i did not touch the devSourcemaps option. maybe another e2e fixture without that option would help?

Yep, I will add another test to confirm that your first repro doesn't regress.

i can open an issue in vite for the layer issue, but i can't seem to reproduce it in vanilla vite

For this one, I'm seeing some strange output that leads me to believe this is an upstream issue... But I suppose it's possible there's something happening on our end? I'll have to look into this more if you can't repro in plain Vite.

@layer A, B;
@media (A){
  @layer vite--anon-layer-4076b8fe-0{
    body {
      font-family: system-ui;
      display: grid;
      place-items: center;
      background-color: tomato;
    }
  }
}
@layer B {
  :where(body) {
    background-color: hotpink;
  }
}

[natemoo-re]

OK, just looked into this again as I was getting #5917 ready to merge. It looks like this is a separate issue that has to do with how Astro inlines imports from styles, but the import remains in the module graph. Probably going to have to consult with @bluwy on how we can address this.

[mayank99]

@natemoo-re So, testing on 2.0.0-beta.4 (which contains #5917), i found that instead of duplicating 4 times, the css was duplicated 2 times (updated stackblitz).

that's an improvement! i'd guess the one duplication left is because of the module graph thing you mentioned.

when using layers, i dont see the duplication in dev (see updated stackblitz), but if i had to guess, it's because:
1. vite is producing an invalid rule (shown in your comment, happens in both dev/prod)
2. astro is stripping out the layer when doing its own import (in dev, not prod)

i will open an issue in vite for 1st point, since i understand how to repro it now.

[mayank99]

update: actually the layer thing was partly because of invalid syntax on my end 🤦

there should be no space between layer and the parentheses:

- @import '../styles.css' layer (A);
+ @import '../styles.css' layer(A);

see final updated stackblitz: https://stackblitz.com/edit/github-fkhp2c-kkhdqq

the duplication happens only in dev now, not prod, and the layer gets stripped only in astro, not vite.

dev	prod

sorry about all the confusion! let me know if i can clarify anything.

[matthewp]

So what's going here is:

1. We add <style> tags not just your Astro styles but for any imported dependencies, so that if that dependency changes it can receive an HMR update.
2. Using @layer makes this not a real dependency, but we have no way of knowing that. This all relies on a postcss plugin that tracks dependencies, see https://www.npmjs.com/package/postcss-import#user-content-dependency-message-support

So unfortunately there isn't a way to really do what you'd like us to do and not treat this as a dependency.

Going to leave this open for now, but I don't see any possible solution here. We could revisit why we add <style> tags for dependency but that's such an old decision that I can't imagine going down that road.

[mayank99]

why are <style> tags added at all (even for non-layered imports)?

SSR/FOUC is not really a concern in the dev server, so i think vite should handle all of it. and prod seems to behave correctly after #5917

[lilnasy]

Issue still exists with [email protected]. Extra stylesheet highlighted in devtools.

[ascorbic]

I can't reproduce this in [email protected], so I'll close this.

[mayank99]

Huh, it does appear to be fixed in 4.15 at least in my initial testing, which is great news! 🚀

I'll test against some more repos and report back if there is still an issue.