Working directly with classNames using createEmotion post-Emotion v10

• emotion version: 10.0.7
• react version: 16.4.2

Problem description: I’m a developer on a UI library that uses Emotion. We use it because we want styles to be bundled and applied with each component when they’re imported, so we don’t add any implementation complexity (importing more than one file to use a component, adding a context provider to the consuming app, etc.) to the consuming app.

We have had to work through a few issues with Emotion:

1. Styles were being appended, rather than prepended to the document head, which overwrote the consuming application’s styles. We solved this by creating a custom instance of Emotion that prepends a <div> to the document head, and configuring the instance to use that as the container. It is less than ideal, but works in all the browsers we support.
2. The className composition method, cx(), wasn’t handling certain uses of the & + & selector that the library seems to support otherwise. We now combine classNames with a simple (...args) => args.join(' '); (simplistic, but gets the job done effectively).

We’re undertaking the upgrade from Emotion 9 -> 10 now, and it seems like classNames are being abstracted away, and createEmotion is being phased out for CacheProvider.

Quite simply, while we have managed to upgrade to version 10 of the original create-emotion package, we haven’t been able to get our individually-consumable components working using CacheProvider + the scoped @emotion/x packages.

Suggested solution: Ideally, we would continue to create classNames through the css() template literal processor function, and work without abstracting classNames away in favor of the css prop / composition. I’m aware of the new ClassNames component, but given the sheer length of the styles of some of our components, it would be horrible to compose those styles in the render method of the components.

Additionally, having some way to more easily have style tags prepended, rather than appended to the document head would be excellent.

What we would like clarity on is: are you planning on continuing support of the emotion and create-emotion packages?

[Andarist]

prepend option has been implemented in the upcoming v11

[Andarist]

Closing this issue as I believe the OP has found a way to work around this limitation.