Add warning for invalid content values in objects

packages/create-emotion/src/utils.js

@@ -8,7 +8,7 @@ export const processStyleName: (styleName: string) => string = memoize(
   (styleName: string) => styleName.replace(hyphenateRegex, '-$&').toLowerCase()
 )
 
-export const processStyleValue = (key: string, value: string): string => {
+export let processStyleValue = (key: string, value: string): string => {
   if (value == null || typeof value === 'boolean') {
     return ''
   }
@@ -24,6 +24,39 @@ export const processStyleValue = (key: string, value: string): string => {
   return value
 }
 
+if (process.env.NODE_ENV !== 'production') {
+  let contentValuePattern = /(attr|calc|counters?|url)\(/
+  let contentValues = [
+    'normal',
+    'none',
+    'counter',
+    'open-quote',
+    'close-quote',
+    'no-open-quote',
+    'no-close-quote',
+    'initial',
+    'inherit',
+    'unset'
+  ]
+  let oldProcessStyleValue = processStyleValue
+  processStyleValue = (key: string, value: string) => {
+    if (key === 'content') {
+      if (
+        typeof value !== 'string' ||
+        (contentValues.indexOf(value) === -1 &&
+          !contentValuePattern.test(value) &&
+          (value.charAt(0) !== value.charAt(value.length - 1) ||
+            (value.charAt(0) !== '"' && value.charAt(0) !== "'")))
+      ) {
+        console.error(
+          `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
+        )
+      }
+    }
+    return oldProcessStyleValue(key, value)
+  }
+}
+
 export type ClassNameArg =
   | string
   | boolean

packages/emotion/test/__snapshots__/warnings.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`does not warn when valid values are passed for the content property 1`] = `
+.emotion-0 {
+  content: normal;
+  content: none;
+  content: counter;
+  content: open-quote;
+  content: close-quote;
+  content: no-open-quote;
+  content: no-close-quote;
+  content: initial;
+  content: inherit;
+  content: "some thing";
+  content: 'another thing';
+  content: url("http://www.example.com/test.png");
+  content: counter(chapter_counter);
+  content: counters(section_counter,".");
+  content: attr(value string);
+}
+
+<div
+  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`] = `
+.emotion-0 {
+  content: px;
+}
+
+<div
+  className="emotion-0"
+/>
+`;

packages/emotion/test/warnings.test.js

@@ -0,0 +1,45 @@
+// @flow
+import { css } from 'emotion'
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+const validValues = [
+  'normal',
+  'none',
+  'counter',
+  'open-quote',
+  'close-quote',
+  'no-open-quote',
+  'no-close-quote',
+  'initial',
+  'inherit',
+  '"some thing"',
+  "'another thing'",
+  'url("http://www.example.com/test.png")',
+  'counter(chapter_counter)',
+  'counters(section_counter, ".")',
+  'attr(value string)'
+]
+
+it('does not warn when valid values are passed for the content property', () => {
+  // $FlowFixMe
+  console.error = jest.fn()
+  const cls = css(validValues.map(value => ({ content: value })))
+  expect(console.error).not.toBeCalled()
+  expect(renderer.create(<div className={cls} />).toJSON()).toMatchSnapshot()
+})
+
+const invalidValues = ['this is not valid', '']
+
+it('does warn when invalid values are passed for the content property', () => {
+  // $FlowFixMe
+  console.error = jest.fn()
+  invalidValues.forEach(value => {
+    expect(
+      renderer.create(<div className={css({ content: value })} />).toJSON()
+    ).toMatchSnapshot()
+    expect(console.error).toBeCalledWith(
+      `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
+    )
+  })
+})