Editing style via DevTools breaks all styles

[zakkor]

Do you want to request a feature or report a bug?

Report a bug, posting another issue because #513 was closed and is not getting attention anymore

What is the current behavior?

Changing styles in Chrome devtools disables all the styles, and in Firefox nothing happens

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Any app using styled-jsx

What is the expected behavior?

I should be able to change the styles in devtools

Environment (include versions)

• OS: Any
• Browser: Chrome, Firefox
• styled-jsx (version): 3.3.0

Did this work in previous versions?

No

[FelixTellmann]

I've experienced the same issue before. I figured that it only happens when having multiple '

[theoludwig]

I have the same problem, it's really annoying while developing... But I have no idea how it occurs.

[jonluca]

This is still happening.

I can repro with a component that only has style jsx element @FelixTellmann. I'm not sure if it's multiple nested versions of this?

It breaks all styles, too, not just the one you're editing, which is what makes it so frustrating

[dangelion]

Same here, really annoying. Any updates on this?

[darbymanning]

Yep, have the same issue. I was trying styled-jsx on a new project, but sadly this issue is going to be too problematic to work around. Having the ability to toggle CSS properties in devtools is really essential.

[pixelize]

Same issue, any fixes around please ? :)

[siolfyr]

Could it be because of the source-maps?