Don't cause invalid rule to be serialized when using object style wit…

…h falsy value (#1581)
emotion-js · Oct 29, 2019 · a55f3d4 · a55f3d4
1 parent 6cdb569
commit a55f3d4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/.changeset/big-oranges-carry.md b/.changeset/big-oranges-carry.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Don't cause invalid rule to be serialized when using object style with falsy value
diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js
@@ -4,9 +4,19 @@ import 'test-utils/next-env'
 import * as React from 'react'
 import { jsx, css, CacheProvider } from '@emotion/core'
 import { ThemeProvider } from 'emotion-theming'
+import { render } from '@testing-library/react'
 import renderer from 'react-test-renderer'
 import createCache from '@emotion/cache'
 
+// $FlowFixMe
+console.error = jest.fn()
+// $FlowFixMe
+console.warn = jest.fn()
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
 const SomeComponent = (props: { lol: true }) => (props.lol ? 'yes' : 'no')
 
 // test to make sure flow prop errors work.
@@ -256,3 +266,18 @@ test('handles composition of styles without a final semi in a declaration block'
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
+
+it("doesn't try to insert invalid rules caused by object style's value being falsy", () => {
+  render(
+    <CacheProvider value={createCache({ speedy: true })}>
+      <h1
+        css={css({ color: 'hotpink', '@media (min-width 800px)': undefined })}
+      >
+        {'Emotion'}
+      </h1>
+    </CacheProvider>
+  )
+
+  expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+  expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+})
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
@@ -17,6 +17,7 @@ let hyphenateRegex = /[A-Z]|^ms/g
 let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
 
 const isCustomProperty = (property: string) => property.charCodeAt(1) === 45
+const isProcessableValue = value => value != null && typeof value !== 'boolean'
 
 const processStyleName = memoize(
   (styleName: string) =>
@@ -29,10 +30,6 @@ let processStyleValue = (
   key: string,
   value: string | number
 ): string | number => {
-  if (value == null || typeof value === 'boolean') {
-    return ''
-  }
-
   switch (key) {
     case 'animation':
     case 'animationName': {
@@ -272,7 +269,7 @@ function createStringFromObject(
       if (typeof value !== 'object') {
         if (registered != null && registered[value] !== undefined) {
           string += `${key}{${registered[value]}}`
-        } else {
+        } else if (isProcessableValue(value)) {
           string += `${processStyleName(key)}:${processStyleValue(key, value)};`
         }
       } else {
@@ -290,10 +287,12 @@ function createStringFromObject(
           (registered == null || registered[value[0]] === undefined)
         ) {
           for (let i = 0; i < value.length; i++) {
-            string += `${processStyleName(key)}:${processStyleValue(
-              key,
-              value[i]
-            )};`
+            if (isProcessableValue(value[i])) {
+              string += `${processStyleName(key)}:${processStyleValue(
+                key,
+                value[i]
+              )};`
+            }
           }
         } else {
           const interpolated = handleInterpolation(