Emotion: Loading a second emotion bundle shouldn't break the first

[craigsketchley]

Current behavior:

I'm trying to run emotion 11 in a browser extension content script. The trouble is if that content script then runs in a page that is already running an emotion 11 app, then the app styles break. After a chat with @Andarist on the emotion-slack, he suggested I open an issue here and that this is probably the culprit: https://github.com/emotion-js/emotion/blob/1e10d8c9aa91ce443d29661a7f830190d42aae92/packages/cache/src/index.js#L55-L60

To reproduce:

1. Build and install a browser extension that uses emotion 11 in a content script (I've made a test extension here: https://github.com/craigsketchley/emotion-11-extension).
2. Visit a page that uses emotion 11 in production mode (I've made a test app here: https://github.com/craigsketchley/emotion-11-app).
3. Watch styles break as soon as the content script loads.

Expected behavior:

Loading a second bundle which includes emotion 11 shouldn't break the styles of the existing emotion 11 app already running in the page.

Environment information:

In the app and extension:

• react version: 16.13.1
• @emotion/cache version: 11.0.0-next.13
• @emotion/react version: 11.0.0-next.13
• @emotion/styled version: 11.0.0-next.13

[Andarist]

I finally got to it and prepared a PR for this, you can track it here: https://github.com/emotion-js/emotion/pull/2028

[criles25]

Hey @Andarist , i am running into a similar issue as ^.

I have a page with multiple bundles. Each of these bundles is using emotion v11.1.1 and each bundle has its own emotion cache with a unique key.

Additionally, my team has a design system built with emotion and styled-system https://github.com/styled-system/styled-system. This design system gets imported as an npm package and bundled into each of the bundles. I noticed the styles from the design system are trying to write to the css key for each of the bundles, which ultimately breaks the styles.

You can see what I mean in this image:

[criles25]

i think my issue is a duplicate of this issue https://github.com/emotion-js/emotion/issues/1386. i am going to try making @emotion/react external to achieve a single context.

[Andarist]

Ye, thats preferable - same way that its expected that u only have a single React used on your page.