Warn about being used as object style's key

.changeset/bright-rules-know.md

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

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
 
@@ -290,10 +293,7 @@ function createStringFromObject(
           (registered == null || registered[value[0]] === undefined)
         ) {
           for (let i = 0; i < value.length; i++) {
-            string += `${processStyleName(key)}:${processStyleValue(
-              key,
-              value[i]
-            )};`
+            string += `${key}:${processStyleValue(key, value[i])};`
           }
         } else {
           const interpolated = handleInterpolation(
@@ -309,6 +309,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,16 @@ 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
+  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).",
+    ]
+  `)
+})