🦋 Changeset is good to go

Latest commit: 74db10f

We got this.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 74db10f:

Codecov Report

Merging #1802 into next will decrease coverage by 0.03%.
The diff coverage is 94.73%.

In such a case the documentation should be tweaked because right now it states:

If you have used versions of Emotion prior to Emotion 10 or used vanilla Emotion, the css and cx functions work exactly like they do in those versions.

And while it is true to some extent this is surprising that it was not able to compose regular React styles (so not exactly the same like in previous versions, people dont tend to think about those things as "string styles" and "opaque styles", conceptually they are just "styles").

The use case like this seems valid:

import { css } from `@emotion/react`

;<ClassNames>
  {({ cx }) => <div className={cx(css`color:hotpink;`, 'other-cls')} />}
</ClassNames>

This can be "fixed" by calling received css on your styles, but both identifiers are the same, so it become quite cumbersome as you either have to hoist the styles or rename one of those identifiers.

At the very least we could introduce a dev warning telling people what to do if they misuse the API.

At the very least we could introduce a dev warning telling people what to do if they misuse the API.

This sounds good to me.

Closed in favor of #1810