CSS Sourcemap Duplication of References in Dev

[djmtype]

What version of astro are you using?

1.9.1

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

This is part of an old closed issue that needs addressing since Astro 1.0.0-beta42.
Original issue: #3647

I thought it might work itself out with future Astro versions. Even with Astro 2 beta which utilizes Vite v4, the issue persists.

With CSS sourcemaps enabled, there is duplicate CSS being referenced from both the css file and page file. This can make debugging css extremely tedious. I thought maybe it was a Vite bug. After using Vite as standalone compiler and Sveltekit 1.0, that doesn't seem to be the case as there is no CSS sourcemap duplication with these libraries.

// astro.config.mjs
vite: {
    css: {
      devSourcemap: true,
    },
  },

Link to Minimal Reproducible Example

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

Participation

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

[natemoo-re]

This happens because Astro injects your styles on the server to avoid FOUC, then Vite picks up the rendering on the client. In order to fix this we would need to come up with a new approach than this two-stage approach.

Does this cause any noticeable issues other than being irritating when modifying styles in the browser?

[djmtype]

@natemoo-re I think you had an issue open for this already? Sorry, I couldn't find it at the time. Feel free to close then. I've experienced no other issues otherwise.

[gvkhna]

Can this be configured at the very least. I wouldn't care as much about a FOUC during dev, but not having source maps is a non-starter for anything greater than toys. All I'm seeing is <style> for every css entry in a largish project it's completely unworkable.

[gvkhna]

I've diagnosed the issue at least:

With this in my astro.config.mjs:

vite: {
    css: {
      devSourcemap: true,
    },
    server: {
      hmr: { overlay: false }
    }
  }

There's an issue with the matching of el.innerHTML.trim() between the injectedStyles Map and the Observer.

astro/packages/astro/src/runtime/client/hmr.ts

Line 12 in 5fd9208

injectedStyles.get(node.innerHTML.trim())?.remove();

And here:

astro/packages/astro/src/runtime/client/hmr.ts

Line 35 in 5fd9208

injectedStyles.set(el.innerHTML.trim(), el);

I did a diff between the values, and there are some odd differences between what should be the same files. It's possible extensions or something else is calling the values to be different.

A simple fix is to replace el.innerHTML.trim() with el.innerHTML.substr(0,50) which for obvious reasons isn't a great solution but has solved the problem for me.

Looks like this would be have to be pushed upstream to the point where the style elements are injected (by Vite?) to add an id attribute that can be targeted better.

[natemoo-re]

Thanks for the investigation @gvkhna! With your help, I was able to track down what was going on here—looks like there were situations where the exact content didn't match and the duplicate styles weren't being handled properly.

I've opened #5917 which should fix this! We'll now match on the actual fileId instead of the text content. Also confirmed that it works with vite.css.devSourcemap enabled!