Issues using custom emotion instance in webextension breaking underlying page that also uses emotion

[samuelmburu]

HI, I am working on a browser extension, but adding the emotion import in my content scripts on a page that also uses emotion as their JSS solution renders their page unusable. I presume the issue has to deal with colliding emotion caches. I implemented the code from the createCache documentation a, but the issue is still present. Any help will be super helpful 🤞.

My code is as follows:

// ./emotion-instance.js
import createEmotion from '@emotion/css/create-instance';

export const {
    flush,
    hydrate,
    cx,
    merge,
    getRegisteredStyles,
    injectGlobal,
    keyframes,
    css,
    sheet,
    cache,
} = createEmotion({
    key: 'cb',
    prepend: true
});

// ../shared/withCustomEmotion
import { CacheProvider } from '@emotion/react';

import * as customCache from './emotion-instance';

function Wrapper() {
    // I don't render any visible content
    return <CacheProvider value={customCache}>pop</CacheProvider>
}

export { Wrapper };

// contentScript.js
import browser from 'webextension-polyfill';
import React from 'react';

// ... some more ✨ import statements

import { Wrapper } from '../shared/withCustomEmotion'; 
// 👆 The moment I add this line, the underlying pages goes 💥

I've been banging my head over this for a while and wonder what I'm doing wrong or if I didn't get 👀 the docs closely enough.

I really appreciate any help you can provide.
Thanks!

[Andarist]

Is the underlying page using Emotion 10 or 11?

[samuelmburu]

One seems to be using what seems to be like Emotion 10 because they have @emotion/core in their output bundles. On the other site, I can only tell they are using emotion from the e.getAttribute("data-emotion-"+n)... in their vendor bundle.

[Andarist]

Ok, I think I see the problem. We are moving all existing Emotion styles during initialization~:

emotion/packages/cache/src/index.js

Lines 55 to 65 in 418daad

	if (isBrowser && key === 'css') {
	const ssrStyles = document.querySelectorAll(
	`style[data-emotion]:not([data-s])`
	)
	// get SSRed styles out of the way of React's hydration
	// document.head is a safe place to move them to
	Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => {
	;((document.head: any): HTMLHeadElement).appendChild(node)
	node.setAttribute('data-s', '')
	})
	}

Was this a problem when you were using Emotion 10? Or is your webextension new and you have started with Emotion 11 right away?

[samuelmburu]

The extension is new, and I started using v11 right away