Custom CacheProvider does not pick up styles from bundled components

Current behavior:

A custom CacheProvider does not pick up styles from components imported from bundled JS. Styles for these components are prefixed with the default css key and are injected into the document head, not the location specified in the cache.

To reproduce:

Repo with example: https://github.com/ChrisMccollister-minted/emotion-cache-provider-test

Expected behavior:

For the code shown below, I would expect the styles used by LibraryComponent to be prefixed with bbb and injected into the div holding the t2Ref.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {css, CacheProvider} from '@emotion/core';
import createCache from '@emotion/cache';
import LibraryComponent from 'emotion-cache-test-lib';

const localStyle = css`
  color: red;
`;

const LocalComponent = ({children}) => (
  <div css={localStyle}>{children}</div>
);

class Main extends Component {
  constructor(props) {
    super(props);
    this.t1Ref = React.createRef();
    this.t2Ref = React.createRef();
    this.state = {
      isReady: false,
    };
  }

  componentDidMount() {
    this.t1Cache = createCache({
      key: 'aaa',
      container: this.t1Ref.current,
    });
    this.t2Cache = createCache({
      key: 'bbb',
      container: this.t2Ref.current,
    });
    this.setState({isReady: true});
  }

  render() {
    const {isReady} = this.state;
    return (
      <div>
        <div ref={this.t1Ref}>
          {isReady &&
            <CacheProvider value={this.t1Cache}>
              <LocalComponent>
                LocalComponent
              </LocalComponent>
            </CacheProvider>
          }
        </div>
        <div ref={this.t2Ref}>
          {isReady &&
            <CacheProvider value={this.t2Cache}>
              <LibraryComponent>
                LibraryComponent
              </LibraryComponent>
            </CacheProvider>
          }
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Main />,
  document.getElementById('root')
);

Looking at the resulting document, I see that the styles for LocalComponent are correctly prefixed with aaa and injected into the div holding the t1Ref. The styles used by LibraryComponent however, are prefixed with the default css prefix and injected into the document head, as if no custom CacheProvider was being used.

If this is the intended behavior, then I would expect the docs to mention that CacheProvider does not work with bundled components.

Environment information:

• react version: 16.8.6
• @emotion/core version: 10.0.10
• @emotion/cache version: 10.0.9

[zeckdude]

This works for JSS btw, so I’m not convinced this issue is how things work in general. I couldn’t tell you what the solution is but they made it work. Basically I have some code in the shadow dom in which I am using components made in Material UI (which uses JSS behind the scenes) that are from an external package and I am able to specify the location where those styles should be inserted. Not only does it insert all styles that are created within the shadow dom but also the ones that are imported via the package.

Unfortunately the solution that allows me to specify where to add the emotion styles that are created within the shadow dom does not also include the emotion styles that are imported via the package.

import root from 'react-shadow';
import { jssPreset, StylesProvider as MuiStylesProvider, MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
import { create } from 'jss';
import React, { useState } from 'react';
import { CacheProvider as EmotionCacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';
import { Theme, Components } from 'design-library';

// Define custom location to insert JSS styles (instead of document head)
// From: https://stackoverflow.com/a/57221293/83916

// Define custom location to insert Emotion styles (instead of document head)
// From: https://emotion.sh/docs/cache-provider

const ShadowDomContainer = ({ children }) => {
  const [jss, setJss] = useState(null);
  const [emotionCache, setEmotionCache] = useState(null);

  function createJssStyles(headRef) {
    if (headRef && !jss) {
      const createdJssWithRef = create({ ...jssPreset(), insertionPoint: headRef });
      setJss(createdJssWithRef);
    }
  }

  function setEmotionStyles(emotionRef) {
    if (emotionRef && !emotionCache) {
      const createdEmotionWithRef = createCache({
        container: emotionRef,
      });
      setEmotionCache(createdEmotionWithRef);
    }
  }

  function setShadowHeadRef(headRef) {
    createJssStyles(headRef);
    setEmotionStyles(headRef);
  }

  return (
    <root.div>
      <head ref={setShadowHeadRef} />
      {jss && emotionCache && (
        <MuiThemeProvider theme={Theme}>
          <EmotionThemeProvider theme={Theme}>
            <EmotionCacheProvider value={emotionCache}>
              <MuiStylesProvider jss={jss}>
                <Components.ScopedCssBaseline>{children}</Components.ScopedCssBaseline>
              </MuiStylesProvider>
            </EmotionCacheProvider>
          </EmotionThemeProvider>
        </MuiThemeProvider>
      )}
    </root.div>
  );
};

export default ShadowDomContainer;

[zeckdude]

@Andarist If that is the case, how would I solve the multiple packages issue?