@emotion/css does not use the CacheProvider

[sarayourfriend]

Current behavior:

Essentially, the css function from @emotion/css doesn't allow styles to be applied inside of an iframe, whereas styled works just fine.

To reproduce:

This codesandbox demonstrates the issue: https://codesandbox.io/s/solitary-hooks-l8b03?file=/src/App.js

Expected behavior:

I expect the @emotion/css function to provide some mechanism for hooking into the current CacheProvider so that styles generated with it can be put into the correct document.head inside of an iframe.

I think it makes sense to me that this doesn't work, the css function from @emotion/css only returns a classname afterall and there's nothing that happens at runtime for those classnames to be processed into the CacheProvider (unlike the styled components which are able to use the CacheProvider at runtime).

However, I think it would be reasonable to provide some kind of utility function similar to cx but that respects the current cache provider so that styles generated with @emotion/css are able to be injected into the appropriate document.head.

Is this an unreasonable expectation or something that could be possible? I'm happy to help contribute a solution for this if given guidance on where and how to solve this problem.

To be clear, this may be more of a feature request than a bug, I'm not sure what the expected behavior of the library is, but at the very least it's confusing and should be documented somehow if the current behavior is how it is meant to work.

Environment information:

• react version: 16.14.0
• @emotion/react version: 11.4.0

Prior art:

• Feature: Adding selector scoping for generated classNames #760
• Rendering to iframe (different emotion context) #595

[Andarist]

CacheProvider doesn't work with @emotion/css - it's by design. @emotion/css is not tied to React anyway and context is something specific to React.

I recommend using either @emotion/react (it works with CacheProvider) or @emotion/css/create-instance (you can customize the container option when creating the instance).

[sarayourfriend]

@emotion/css is not tied to React anyway and context is something specific to React.

Understood. Thanks for your response.

I'm a little confused though, what's the best/most canonical way to write this type of component using @emotion/react? My impression is that the css function from @emotion/react will not behave as expected here, right?

function Spacer({ marginTop, className, children }) {
    const classes = cx(className, css({ marginTop }));

    return <div className={classes}>{children}</div>;
}

Is this just not a style of component supported by Emotion?

Update: Never mind. After some thought it's easy to just write the above component as a styled component:

const Spacer = styled.div`
  ${(props) => css({ marginTop: props.marginTop })}
`;