Cannot persist CSS changes in Chrome DevTools with PostCSS and Vite using Workspaces

[Michael Peters]

I'm encountering a problem where changes I make to CSS in Chrome DevTools' Styles pane are not being persisted back to the original PostCSS files in my local project when using Vite as my development server. This issue occurs even when I have the Workspaces feature in DevTools properly configured, and source maps for my CSS are correctly generated and included as data URIs in my CSS files.

The problem appears to be specific to PostCSS. When I configure Vite to use PostCSS and make changes in the Styles pane, those changes are not persisted back to the original PostCSS files. However, if I remove PostCSS from my Vite configuration, changes are correctly persisted.

Steps to Reproduce:

Set up a new project with Vite and PostCSS.
Configure Vite to generate CSS source maps in development (using devSourcemap: true).
Configure Chrome DevTools to use the Workspaces feature that maps to the project's directory.
Open the project in a browser and in DevTools.
Make a change to a CSS property in the Styles pane in DevTools.
Observe that the change is not persisted back to the original PostCSS file.
Expected Result:

Changes made to CSS properties in the Styles pane in DevTools should be persisted back to the original PostCSS files when source maps are correctly configured and the Workspaces feature in DevTools is set up properly.

Actual Result:

Changes made to CSS properties in the Styles pane are not persisted back to the original PostCSS files. This issue only occurs when PostCSS is used in the Vite configuration.

Additional Information:

Vite version: 4.3.9
PostCSS version: 8.4.24
Chrome version: 114
Operating system: MacOS 13.4
The Workspaces feature in Chrome DevTools is being used.

Changes from Elements -> Style are not affecting the file in the sources. But changing and saving the file in sources works:

Stops working when I comment out the empty postcss configuration. (Because Vite starts using PostCSS then.)

[Benedikt Meurer]

Hey Michael,

What you are proposing doesn't (generally) work (at least at the moment), because the Styles pane edits the deployed CSS (what we get from the browser), and reflecting changes back from deployed CSS to authored SASS/CSS via source maps is not generally possible right now.

cheers,

Benedikt

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/f7f70573-589a-4903-a5e9-134aa8f2aa2dn%40googlegroups.com.

--

Benedikt Meurer

Chrome DevTools Lead

bme...@google.com

Google Germany GmbH

Erika-Mann-Straße 33

80636 München

Geschäftsführer: Paul Manicle, Liana Sebastian

Registergericht und -nummer: Hamburg, HRB 86891

Sitz der Gesellschaft: Hamburg

Diese E-Mail ist vertraulich. Falls Sie diese fälschlicherweise erhalten haben sollten, leiten Sie diese bitte nicht an jemand anderes weiter, löschen Sie alle Kopien und Anhänge davon und lassen Sie mich bitte wissen, dass die E-Mail an die falsche Person gesendet wurde. 

     

This e-mail is confidential. If you received this communication by mistake, please don't forward it to anyone else, please erase all copies and attachments, and please let me know that it has gone to the wrong person.