From ca95f385f7ce3da6d53de1a652b3b219f11434c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 29 Oct 2019 12:30:12 +0100
Subject: [PATCH] Warn about  being used as object style's key (#1580)

---
 .changeset/bright-rules-know.md               |  5 +++++
 .../core/__tests__/__snapshots__/css.js.snap  | 19 +++++++++++++++++--
 packages/core/__tests__/css.js                | 18 +++++++++++++++++-
 packages/serialize/src/index.js               |  9 +++++++++
 packages/styled/__tests__/warnings.js         | 16 ++++++++++++++++
 5 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/bright-rules-know.md

diff --git a/.changeset/bright-rules-know.md b/.changeset/bright-rules-know.md
new file mode 100644
index 000000000..121535e20
--- /dev/null
+++ b/.changeset/bright-rules-know.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Warn about `undefined` being used as object style's key
diff --git a/packages/core/__tests__/__snapshots__/css.js.snap b/packages/core/__tests__/__snapshots__/css.js.snap
index 9cd333dff..8a2a95406 100644
--- a/packages/core/__tests__/__snapshots__/css.js.snap
+++ b/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>
diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js
index 1b3aaa561..467bf3fba 100644
--- a/packages/core/__tests__/css.js
+++ b/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
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 37344dc60..9afbcbaa1 100644
--- a/packages/serialize/src/index.js
+++ b/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}}`
             }
           }
diff --git a/packages/styled/__tests__/warnings.js b/packages/styled/__tests__/warnings.js
index 569514320..a9f2035db 100644
--- a/packages/styled/__tests__/warnings.js
+++ b/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).",
+    ]
+  `)
+})