🐛 BUG: CSS sourcemap references broken in Astro 1.0.0-beta42 and later

[djmtype]

What version of astro are you using?

1.0.0-beta.46

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

Vite allows for CSS sourcemaps https://vitejs.dev/config/#css-devsourcemap
Prior to Astro 1.0.0 beta 42, CSS sourcemaps in Astro worked as advertised.
By configuring Vite within astro.config.mjs this is made possible:

vite: {
    css: {
      devSourcemap: true,
    },
  },

Now the references to the css files are all broken. Upon inspection, the reference to the css property always points to the page name instead of pointing to the .css or .astro component file – where the css styles originate.

In devtools, inspect any html property with styles applied, and it will show you the page as the reference instead of the css file where the style resides.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-3d931t

Participation

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

[bholmesdev]

Thanks for reporting! I took a look at your example, but I'm not seeing any bad network requests or other errors in the console. Are there any logs in particular we should be looking for here?

[djmtype]

@bholmesdev Unfortunately, there aren't any errors logged to the console that I saw. I had created a screencast about the problem. Hopefully, this helps. https://cloudup.com/crr03kJYHRO
Sorry if the screencast is a little confusing as I was experiencing two different css issues with beta 42 and later. The other issue being #3648. No idea if they are related somehow or purely coincidental.

[djmtype]

@bholmesdev I forked that Stackblitz with beta 41 instead (https://stackblitz.com/edit/github-3d931t-bt8fwa) which illustrates the css sourcemap displaying properly. Inspect <main>, for example, you should see the differences between these two playgrounds.

[djmtype]

@bholmesdev A few RCs ago, this bug was kind of fixed, meaning CSS sourcemaps are now present. However, the references are also now being duplicated which makes debugging still difficult.

Upon inspection, I see the same css styles listed under both the component/css file source and the page file source. I should just see the component/css file source.

[bholmesdev]

Yep, I've noticed this as well! Definitely confusing to debug. Hoping it's a duplicate sourcemap we're merging somewhere up the chanin.

[supermoos]

To me it doesn't even point to file names, but just in-page <style> tags.

[supermoos]

Adding the config from the first post helps, but then duplicates the styles:

[matthewp]

Just checked and sourcemaps are working now! Let's treat the duplication as a separate issue. Thanks!

[djmtype]

@matthewp My initial filing of this bug is actually the duplication of sourcemaps.
The CSS sourcemaps always worked, however they duplicated at the page-level, and should only exist at the file-level.

[matthewp]

@djmtype the original issue comment didn't speak to duplication. I see what is happening and I agree it's issue worthy, it would just be good to have a new one as duplication and sourcemaps not pointing to the right file are different issues.

[djmtype]

👍 Gotcha @matthewp