1438737 - styled-jsx and… stylesheet editor

Status: NEW

(DevTools :: Style Editor, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: style editor with JSX

This seems related to https://www.npmjs.com/package/styled-jsx

1. Go to this site https://www.techinasia.com/events
2. Open the devtools to the stylesheet editor. 
3. Click on any inline CSS

Actual:
Difficult to use anything in there. Pull out a tissue and cry

Expected:
Not sure what is doable

Comment 1

[Patrick Brosset <:pbro>]

There's a number of <style> elements in this page that come with a source map URI. So, by default, the Style Editor uses these source maps to show the original code.
So, the tool is doing the right thing, but it's not useful to you. I think you might want to click on the cog icon at the top of the stylesheet list to the left, and uncheck the "show original sources" item. This way you'll see the actual CSS used on this page, not the original code that the developers deal with in their dev environment.

Also, we should probably prevent CSS edition when showing original sources, because we do edit the code, we don't do anything interesting in this case (I think we used to have a thing were we attempted to save back to source file, and trigger the build step/source map generation step).