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
{{ message }}
matyasf
changed the title
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: