Add a dev-only warning about opaque styles being passed to cx (#1810)

.changeset/shiny-knives-tell.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Add a dev-only warning about styles created with `css` from `@emotion/react` being passed to `cx` from `<ClassNames/>`.

packages/react/__tests__/warnings.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import 'test-utils/next-env'
-import { jsx, css, Global, keyframes } from '@emotion/react'
+import { jsx, css, Global, keyframes, ClassNames } from '@emotion/react'
 import renderer from 'react-test-renderer'
 import { render } from '@testing-library/react'
 
@@ -259,3 +259,30 @@ test('`css` opaque object passed in as `className` prop', () => {
     </div>
   `)
 })
+
+test('`css` opaque object passed to `cx` from <ClassNames/>', () => {
+  render(
+    <ClassNames>
+      {({ cx }) => (
+        <div
+          className={cx(
+            // $FlowFixMe
+            css`
+              color: hotpink;
+            `,
+            'other-cls'
+          )}
+        />
+      )}
+    </ClassNames>
+  )
+
+  expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
+Array [
+  Array [
+    "You have passed styles created with \`css\` from \`@emotion/react\` package to the \`cx\`.
+\`cx\` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the \`css\` received from <ClassNames/> component.",
+  ],
+]
+`)
+})

packages/react/src/class-names.js

@@ -30,6 +30,16 @@ let classnames = (args: Array<ClassNameArg>): string => {
         if (Array.isArray(arg)) {
           toAdd = classnames(arg)
         } else {
+          if (
+            process.env.NODE_ENV !== 'production' &&
+            arg.styles !== undefined &&
+            arg.name !== undefined
+          ) {
+            console.error(
+              'You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' +
+                '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.'
+            )
+          }
           toAdd = ''
           for (const k in arg) {
             if (arg[k] && k) {