emotion-js/emotion

Malformed Style JavaScript objects put CSS in the global scope

matyasf opened this issue · 0 comments

matyasf commented

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