Throw error about invalid content property values instead of just log…

…ging error to the console. (#1611)

.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.

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`] = `

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}"'\``
     )
   })

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"
-/>
-`;

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}"'\``
     )
   })

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}"'\``
         )
       }