CSS generation not working with Emotion cache enabled

[goldmont]

Issue description

I'm using react-select library in a shadow DOM.

In my tests I used the following code (no customizations):

const shadowrootCache = createCache({
	key: 'shadowroot-cache',
	container: domElement,
        prepend: true
});

const Root = () => (
	<CacheProvider value={shadowrootCache}>
		<Select
	                options={[
		                { label: 'Test', value: 'test' },
		                { label: 'Test 2', value: 'test-2' },
		                { label: 'Test 3', value: 'test-3' }
	                ]}
                />
	</CacheProvider>
);

ReactDOM.render(<Root/>, domElement);

By the way, the layout is totally broken because apparently Emotion is unable to output the CSS. The class names are set in the class attributes but the classes themselves don't exist.

Here is a CodeSandbox reproducing the issue.

Here is another CodeSandbox not using shadow DOM and thus working as expected.

Hoping in a prompt reply. Thanks.

[goldmont]

UPDATE:

Apparently there is a problem during CacheProvider first load. After many tests, I had to create my own CacheProvider which renders children only on second rerender.

Here is the code:

CustomEmotionCacheProvider.tsx file:

import { FunctionComponent, useEffect, useState } from 'react';
import { CacheProvider, EmotionCache } from '@emotion/react';

interface Props {
	cache: EmotionCache;
}

const CustomEmotionCacheProvider: FunctionComponent<Props> = ({ cache, children }) => {

	const [ isFirstRender, setIsFirstRender ] = useState(true);

	useEffect(() => setIsFirstRender(false), []);

	return (
		<CacheProvider value={cache}>
			{!isFirstRender && children}
		</CacheProvider>
	);
};

export default CustomEmotionCacheProvider;

index.tsx file:

const shadowrootCache = createCache({
	key: 'shadowroot-cache',
	container: domElement,
        prepend: true
});

const Root = () => (
	<CustomEmotionCacheProvider cache={shadowrootCache}>
		<Select
	                options={[
		                { label: 'Test', value: 'test' },
		                { label: 'Test 2', value: 'test-2' },
		                { label: 'Test 3', value: 'test-3' }
	                ]}
                />
	</CustomEmotionCacheProvider>
);

ReactDOM.render(<Root/>, domElement);

Broken CodeSandbox example using shadow DOM: here
Working CodeSandbox example using shadow DOM: here

[steveoni]

@goldmont do you know how this could work for IFrame. using import Frame, { FrameContextConsumer } from 'react-frame-component';

e.g

//App.js

import CreatableSelect from 'react-select/creatable';

function App() => {

return  <CreatableSelect
              options={options}
              value={mainTopic}
              onChange={(newValue) =>{}}
            />
}

//content.js
import React from 'react';
import ReactDOM from 'react-dom';
import Frame, { FrameContextConsumer } from 'react-frame-component';
import App from "./App";


function Main() {
  return (
    <Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>]}>
      <FrameContextConsumer>
        {
          ({ document, window }) => {
            return <App document={document} window={window} isExt={true} />
          }
        }
      </FrameContextConsumer>
    </Frame>
  )
}

[alexdanilowicz]

This was marked as completed but where is the relevant PR in the emotion-js repo?

I ask because running into something very similar with: chakra-ui/chakra-ui#8241