Emotion: Runtime error thrown when using stylis-plugin-rtl with component that has only class selector in the styles

[mnajdova]

First of all thanks for the awesome project :) We are using emotion for our next version in Material-ui, and we are really happy with the project!

Current behavior:

The issue is with the integration with the stylist-plugin-rtl. I'd say it is probably some corner case, but we noticed it as we had an example that could repro the problem. Basically, if the styles for the component contain only nested class selector, the plugin is throwing a runtime error:

Array.stylisRTLPlugin
https://0s4r3.csb.app/node_modules/stylis-plugin-rtl/dist/stylis-rtl.js:35:142
eval
https://0s4r3.csb.app/node_modules/stylis/dist/stylis.mjs:882:42
se
https://0s4r3.csb.app/node_modules/stylis/dist/stylis.mjs:863:36
    at stylis (https://0s4r3.csb.app/node_modules/
emotion/cache/dist/emotion-cache.browser.esm.js:184:41
    at Object.insert (https://0s4r3.csb.app/node_modules/
emotion/cache/dist/emotion-cache.browser.esm.js:195:7
    at insertStyles (https://0s4r3.csb.app/node_modules/
emotion/utils/dist/emotion-utils.browser.esm.js:40:31
    at eval (https://0s4r3.csb.app/node_modules/
emotion/styled/base/dist/emotion-styled-base.browser.esm.js:91:48
    at Styled(div) (https://0s4r3.csb.app/node_modules/
emotion/react/dist/emotion-element-5144c041.browser.esm.js:88:12
renderWithHooks
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:10021:22
updateForwardRef
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11643:24
beginWork
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12978:20
HTMLUnknownElement.callCallback
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:2746:18
Object.invokeGuardedCallbackDev
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:2770:20
invokeGuardedCallback
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:2804:35
beginWork$1
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:16114:11
performUnitOfWork
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15339:16
workLoopSync
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15293:9
renderRootSync
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15268:11
performSyncWorkOnRoot
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15008:22
eval
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:7457:30
unstable_runWithPriority
https://0s4r3.csb.app/node_modules/scheduler/cjs/scheduler.development.js:646:12
runWithPriority$1
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:7417:14
flushSyncCallbackQueueImpl
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:7453:13
flushSyncCallbackQueue
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:7443:7
discreteUpdates$1
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15094:13
discreteUpdates
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:2636:16
dispatchDiscreteEvent
https://0s4r3.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3987:7

To reproduce:

Here is a codesandbox that illustrates the issue - https://codesandbox.io/s/emotion-rtl-issue-with-only-class-selector-0s4r3?file=/demo.js Just open the link and click on the Switch RTL/LTR button to see the error.

Expected behavior:

No runtime error should be shown.

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.1.1

Additional information:

For comparison, if I just add additional style rule everything work as expected: https://codesandbox.io/s/emotion-rtl-issue-with-only-class-selector-forked-n4r6v?file=/demo.js

const CustomizedBox = styled("div")({
+ width: 150,
  "& .child": {
    height: 24
  }
});

[Andarist]

Thanks for the report - it seems that this is a bug in the RTL plugin itself. I've prepared a fix for it here: https://github.com/styled-components/stylis-plugin-rtl/pull/20 .

[Andarist]

And the [email protected] with the fix has been released 🎉

[mnajdova]

Thanks a lot for the quick fix!