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 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;}