Warn about being used as object style's key (#1580)

Author: Andarist

.changeset/bright-rules-know.md

@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Warn about `undefined` being used as object style's key

packages/core/__tests__/__snapshots__/css.js.snap

@@ -23,10 +23,25 @@ Array [
 ]
 `;
 
+exports[`array fallback (using camelCased property) 1`] = `
+.emotion-0 {
+  background-color: green;
+  background-color: hotpink;
+}
+
+<div>
+  <div
+    className="emotion-0"
+  >
+    something
+  </div>
+</div>
+`;
+
 exports[`array fallback 1`] = `
 .emotion-0 {
-  display: green;
-  display: hotpink;
+  color: green;
+  color: hotpink;
 }
 
 <div>

packages/core/__tests__/css.js

@@ -102,7 +102,23 @@ test('array fallback', () => {
     <div>
       <div
         css={{
-          display: ['green', 'hotpink']
+          color: ['green', 'hotpink']
+        }}
+      >
+        something
+      </div>
+    </div>
+  )
+
+  expect(tree.toJSON()).toMatchSnapshot()
+})
+
+test('array fallback (using camelCased property)', () => {
+  const tree = renderer.create(
+    <div>
+      <div
+        css={{
+          backgroundColor: ['green', 'hotpink']
         }}
       >
         something

packages/serialize/src/index.js

@@ -13,6 +13,9 @@ Because you write your CSS inside a JavaScript string you actually have to do do
 You can read more about this here:
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
 
+const UNDEFINED_AS_OBJECT_KEY_ERROR =
+  "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key)."
+
 let hyphenateRegex = /[A-Z]|^ms/g
 let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
 
@@ -308,6 +311,12 @@ function createStringFromObject(
               break
             }
             default: {
+              if (
+                process.env.NODE_ENV !== 'production' &&
+                key === 'undefined'
+              ) {
+                console.error(UNDEFINED_AS_OBJECT_KEY_ERROR)
+              }
               string += `${key}{${interpolated}}`
             }
           }

packages/styled/__tests__/warnings.js

@@ -1,7 +1,9 @@
 // @flow
 import 'test-utils/legacy-env'
+import * as React from 'react'
 import { css } from '@emotion/core'
 import styled from '@emotion/styled'
+import { render } from '@testing-library/react'
 
 // $FlowFixMe
 console.error = jest.fn()
@@ -48,3 +50,17 @@ it('warns about illegal escape sequences inside non-first quasi of template lite
     ]
   `)
 })
+
+it("warns about undefined being passed as object style's key", () => {
+  let ListItem
+  // $FlowFixMe
+  const List = styled.ul({ [ListItem]: { color: 'hotpink' } })
+
+  render(<List />)
+
+  expect((console.error: any).mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).",
+    ]
+  `)
+})