Hacker News Reader

Comment by denysonique | Hacker News Reader

While Styled Components, Styled JSX or Linaria (which doesn't require a JS runtime for production) are nice solutions, the fact that I can no longer use the colour picker and other tools to live edit CSS from the styles pane in the Elements tab in Chrome Dev Tools, sometimes makes me want to go back to plain CSS to get this functionality back.

View on HN

You can! I do this all the time.

With copy and paste? :)

Am I misinterpreting something? In my app that uses CSS-in-JS, if I go to the "Elements" tab of my browser developer tools and select an element, I have the option to inspect, add, remove and change styles — including using the color picker and bézier curve editor — and have it reflected live on the page.

When my styled-components app is in prod, the styles are non-editable. When developing, I can use Chrome Dev Tools. On prod, I have to copy paste. Maybe I'm doing something wrong?

I believe this is a result of it using the "CSSOM" browser APIs for speed in production. Unfortunately, browsers apparently haven't figured out how to make such styles editable yet.

It's definitely a limitation of certain CSS-in-JS implementations, but unfortunately one that inherently comes from "using the platform."

There's a little known feature in Chrome where you can save your inspector changes locally:

https://rafaltomal.com/tips/save-css-chrome-inspector/

Reply on news.ycombinator.com