Malformed Style JavaScript objects put CSS in the global scope #3220
Labels
Comments
matyasf
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The problem
Malformed CSS syntax makes Emotion behave in erroneous ways causing it to insert CSS into the global scope messing up styles (maybe also a security issue?)
Proposed solution
Make the JS parser fail/emit errors if the CSS value is invalid
How to reproduce
In this CodeSandbox: https://codesandbox.io/s/emotion-forked-2h978y?file=/index.js inspect the
<style>tags inserted to to the<head>element, there is one in the global scope::hover>[class$=-button]{background:red;}(easier to see in a new window here: https://2h978y.csb.app/ ) The reason is that the JS above it in the code is malformed:boxShadow: "11px 5px 5px red}"(notice the extra '}') which causes Emotion not to emit the full CSS selector which is something like.css-gvsb18-button:hover>[class$=-button]{background:red;}The text was updated successfully, but these errors were encountered: