Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Mirror Editing with Sourcemaps: Known Issues and Feedback #965

Open
7 tasks
antross opened this issue Apr 5, 2022 · 2 comments
Open
7 tasks

CSS Mirror Editing with Sourcemaps: Known Issues and Feedback #965

antross opened this issue Apr 5, 2022 · 2 comments

Comments

@antross
Copy link
Contributor

antross commented Apr 5, 2022

This issue is where we will collect feedback specific to using CSS Mirroring with source-mapped files. Support for mirroring edits across source maps is a follow-up for #476 that enables using this feature with languages such as SASS or with CSS which gets bundled during build. See CSS Mirror Editing with Sourcemapped files (Sass, React...) for more details and a demo of how the feature works.

Testing Pre-requisites:

  • Edge 102.0.1216.0+
  • A build step that generates source maps for CSS

Known Issues

  1. Changes to selectors are not mirrored back to the original source file.

  2. New properties added at the end of the block don't indent correctly if a source map entry exists for the closing curly brace } (webpack + sass-loader behavior).

  3. New properties added at the end of the block get inserted before the last property of the block if no source map entry exists for the closing curly brace } (default sass CLI behavior).

  4. Creating/editing property names to use invalid characters (e.g. ```-``-`) can cause mapping to get out-of-sync.

  5. Inserting new properties into an empty block (e.g. after deleting all existing properties) inserts them before the selector if no source map entry exists for the closing curly brace } (default sass CLI behavior).

  6. Editing a selector in a single-line source block (e.g. .foo { color: #fff }) causes property edits in that block to be incorrect.

  7. Changes applied due to panel-level undo/redo (e.g. Ctrl+Z) don't get mirrored to original source (they do work if undoing while editing a property directly).

@codepo8 codepo8 pinned this issue Apr 6, 2022
@CubeBR
Copy link

CubeBR commented Apr 10, 2022

I'm not sure if it's the same subject, but is there a way to disable the synchronization of CSS between the dev tools and vscode?
I use Chrome's Dev Tools a lot for testing, and this "feature" just broke half of my stylesheet and disappeared with the undo buffer along with it.
Not to mention the lack of line breaks and organization which causes a terrible headache that didn't exist with a simple copy paste.

@antross
Copy link
Contributor Author

antross commented Apr 11, 2022

@CubeBR if it's related to CSS without source maps there is a known issue with formatting that's affecting all Chromium-based DevTools (see this Chromium bug which was recently fixed). The fix should be in Canary soon. Formatting of source-mapped code is not affected by this issue.

We're generally tracking issues with non-source-mapped sync'ing in #476 but you can turn this off using the "Toggle Mirror Editing Off" button in the sidebar of the extension:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
@antross @CubeBR and others