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;
+}
+
+
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', () => {
+ )
+
+ expect(tree.toJSON()).toMatchSnapshot()
+})
+
+test('array fallback (using camelCased property)', () => {
+ const tree = renderer.create(
+
+
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(
)
+
+ 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).",
+ ]
+ `)
+})