Check for null when evaluating input strings in createStyles (#352)

* Check for null when evaluating input strings in createStyles

closes #351

* Update snapshots

packages/emotion/src/index.js

@@ -198,10 +198,7 @@ function isLastCharDot(string) {
 function createStyles(strings, ...interpolations) {
   let stringMode = true
   let styles = ''
-  if (
-    (strings !== undefined && strings.raw === undefined) ||
-    strings === undefined
-  ) {
+  if (strings == null || strings === undefined || strings.raw === undefined) {
     stringMode = false
     styles = handleInterpolation(strings, false)
   } else {

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

@@ -399,6 +399,18 @@ exports[`css null rule 1`] = `
 />
 `;
 
+exports[`css null value 1`] = `
+<div
+  className="css-0"
+/>
+`;
+
+exports[`css null value 2`] = `
+<div
+  className="css-1xdhyk6"
+/>
+`;
+
 exports[`css random expression 1`] = `
 .glamor-0 {
   font-size: 20px;

packages/emotion/test/css.test.js

@@ -281,6 +281,14 @@ describe('css', () => {
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  test('null value', () => {
+    const cls1 = css(null)
+    const cls2 = css`${() => null};`
+    expect(renderer.create(<div className={cls1} />).toJSON()).toMatchSnapshot()
+    expect(renderer.create(<div className={cls2} />).toJSON()).toMatchSnapshot()
+  })
+
   test('flushes correctly', () => {
     const cls1 = css`display: flex;`
     const tree = renderer.create(<div className={cls1} />).toJSON()

packages/react-emotion/test/__snapshots__/index.test.js.snap

@@ -447,6 +447,31 @@ exports[`styled no prop filtering on non string tags 1`] = `
 </a>
 `;
 
+exports[`styled null interpolation value 1`] = `
+.glamor-0 {
+  color: blue;
+  font-size: 20;
+}
+
+@media (min-width:520px) {
+  .glamor-0 {
+    color: green;
+  }
+}
+
+@media (min-width:420px) {
+  .glamor-0 {
+    color: blue;
+  }
+}
+
+<h1
+  className="glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled object as style 1`] = `
 .glamor-0 {
   font-size: 20px;

packages/react-emotion/test/index.test.js

@@ -35,6 +35,24 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test('null interpolation value', () => {
+    const fontSize = 20
+    const H1 = styled.h1`
+      color: blue;
+      font-size: ${fontSize};
+      @media (min-width: 420px) {
+        color: blue;
+        @media (min-width: 520px) {
+          color: green;
+        }
+      }
+    `
+
+    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test('basic render with object as style', () => {
     const fontSize = 20
     const H1 = styled.h1({ fontSize })