From 8a896a31434a1d2f69e1f1467c446c884c929387 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Wed, 6 Nov 2019 01:03:28 +0100
Subject: [PATCH] Throw error about invalid content property values instead of
 just logging error to the console. (#1611)

---
 .changeset/five-spoons-roll.md                   |  5 +++++
 .../__tests__/__snapshots__/warnings.js.snap     | 16 ----------------
 packages/core/__tests__/warnings.js              |  7 +++----
 .../test/__snapshots__/warnings.test.js.snap     | 16 ----------------
 packages/emotion/test/warnings.test.js           |  7 +++----
 packages/serialize/src/index.js                  |  2 +-
 6 files changed, 12 insertions(+), 41 deletions(-)
 create mode 100644 .changeset/five-spoons-roll.md

diff --git a/.changeset/five-spoons-roll.md b/.changeset/five-spoons-roll.md
new file mode 100644
index 000000000..ef4dc55c0
--- /dev/null
+++ b/.changeset/five-spoons-roll.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Throw error about invalid content property values instead of just logging error to the console.
diff --git a/packages/core/__tests__/__snapshots__/warnings.js.snap b/packages/core/__tests__/__snapshots__/warnings.js.snap
index 7e00a74d8..2141a1d04 100644
--- a/packages/core/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/core/__tests__/__snapshots__/warnings.js.snap
@@ -24,22 +24,6 @@ exports[`does not warn when valid values are passed for the content property 1`]
 />
 `;
 
-exports[`does warn when invalid values are passed for the content property 1`] = `
-.emotion-0 {
-  content: this is not valid;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`does warn when invalid values are passed for the content property 2`] = `
-<div
-  className="emotion-0"
-/>
-`;
-
 exports[`global with css prop 1`] = `null`;
 
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ ":first-child /* [flag] */" in a style object 1`] = `
diff --git a/packages/core/__tests__/warnings.js b/packages/core/__tests__/warnings.js
index 66e467f21..7041443b8 100644
--- a/packages/core/__tests__/warnings.js
+++ b/packages/core/__tests__/warnings.js
@@ -42,10 +42,9 @@ const invalidValues = ['this is not valid', '']
 it('does warn when invalid values are passed for the content property', () => {
   // $FlowFixMe
   invalidValues.forEach(value => {
-    expect(
-      renderer.create(<div css={{ content: value }} />).toJSON()
-    ).toMatchSnapshot()
-    expect(console.error).toBeCalledWith(
+    expect(() =>
+      renderer.create(<div css={{ content: value }} />)
+    ).toThrowError(
       `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
     )
   })
diff --git a/packages/emotion/test/__snapshots__/warnings.test.js.snap b/packages/emotion/test/__snapshots__/warnings.test.js.snap
index d11606330..75a76bc67 100644
--- a/packages/emotion/test/__snapshots__/warnings.test.js.snap
+++ b/packages/emotion/test/__snapshots__/warnings.test.js.snap
@@ -23,19 +23,3 @@ exports[`does not warn when valid values are passed for the content property 1`]
   className="emotion-0"
 />
 `;
-
-exports[`does warn when invalid values are passed for the content property 1`] = `
-.emotion-0 {
-  content: this is not valid;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`does warn when invalid values are passed for the content property 2`] = `
-<div
-  className="emotion-0"
-/>
-`;
diff --git a/packages/emotion/test/warnings.test.js b/packages/emotion/test/warnings.test.js
index 669f727a3..e17fb5a98 100644
--- a/packages/emotion/test/warnings.test.js
+++ b/packages/emotion/test/warnings.test.js
@@ -39,10 +39,9 @@ const invalidValues = ['this is not valid', '']
 
 it('does warn when invalid values are passed for the content property', () => {
   invalidValues.forEach(value => {
-    expect(
-      renderer.create(<div className={css({ content: value })} />).toJSON()
-    ).toMatchSnapshot()
-    expect(console.error).toBeCalledWith(
+    expect(() =>
+      renderer.create(<div className={css({ content: value })} />)
+    ).toThrowError(
       `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
     )
   })
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 9afbcbaa1..ee38ee053 100644
--- a/packages/serialize/src/index.js
+++ b/packages/serialize/src/index.js
@@ -91,7 +91,7 @@ if (process.env.NODE_ENV !== 'production') {
           (value.charAt(0) !== value.charAt(value.length - 1) ||
             (value.charAt(0) !== '"' && value.charAt(0) !== "'")))
       ) {
-        console.error(
+        throw new Error(
           `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
         )
       }