Remove flatten (#392)

* Remove flatten Add prod mode tests Add really crazy nesting test * Update snapshots for nested array test. * Add prod-mode snapshots * rework handleInterpolation a bit.
emotion-js · Oct 10, 2017 · 407f90a · 407f90a
1 parent 1f2ce48
commit 407f90a
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 37 deletions.
diff --git a/packages/emotion/package.json b/packages/emotion/package.json
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
+    "babel-plugin-transform-define": "^1.3.0",
     "cross-env": "^5.0.5",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",

diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js
@@ -3,6 +3,7 @@ import stylisPluginEmotion from 'stylis-plugin-emotion'
 import StyleSheet from './sheet'
 
 export const sheet = new StyleSheet()
+
 // 🚀
 sheet.inject()
 const stylisOptions = { keyframe: false }
@@ -36,49 +37,33 @@ let currentSourceMap = ''
 
 stylis.use(insertionPlugin)
 
-function flatten(inArr) {
-  let arr = []
-  inArr.forEach(val => {
-    if (Array.isArray(val)) arr = arr.concat(flatten(val))
-    else arr = arr.concat(val)
-  })
-
-  return arr
-}
-
 function handleInterpolation(
   interpolation: any,
   couldBeSelectorInterpolation: boolean
 ) {
-  if (
-    interpolation === undefined ||
-    interpolation === null ||
-    typeof interpolation === 'boolean'
-  ) {
+  if (interpolation == null) {
     return ''
   }
 
-  if (typeof interpolation === 'function') {
-    return handleInterpolation.call(
-      this,
-      this === undefined
-        ? interpolation()
-        : interpolation(this.mergedProps, this.context),
-      couldBeSelectorInterpolation
-    )
-  }
-
-  if (typeof interpolation === 'object') {
-    return createStringFromObject.call(this, interpolation)
-  }
-
-  if (
-    couldBeSelectorInterpolation === false &&
-    registered[interpolation] !== undefined
-  ) {
-    return registered[interpolation]
+  switch (typeof interpolation) {
+    case 'boolean':
+      return ''
+    case 'function':
+      return handleInterpolation.call(
+        this,
+        this === undefined
+          ? interpolation()
+          : interpolation(this.mergedProps, this.context),
+        couldBeSelectorInterpolation
+      )
+    case 'object':
+      return createStringFromObject.call(this, interpolation)
+    default:
+      const cached = registered[interpolation]
+      return couldBeSelectorInterpolation === false && cached !== undefined
+        ? cached
+        : interpolation
   }
-  return interpolation
 }
 
 const hyphenateRegex = /[A-Z]|^ms/g
@@ -106,7 +91,7 @@ function createStringFromObject(obj) {
   let string = ''
 
   if (Array.isArray(obj)) {
-    flatten(obj).forEach(function(interpolation) {
+    obj.forEach(function(interpolation) {
       string += handleInterpolation.call(this, interpolation, false)
     }, this)
   } else {

diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap
@@ -364,10 +364,20 @@ exports[`css nested 1`] = `
 
 exports[`css nested array 1`] = `
 .glamor-0 {
+  display: inline;
+  display: inline-block;
+  display: block;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  display: table;
+  color: darkorchid;
+  font-size: 16px;
+}
+
+.glamor-0:after {
+  background-color: aquamarine;
 }
 
 <div

diff --git a/packages/emotion/test/css.test.js b/packages/emotion/test/css.test.js
@@ -170,7 +170,26 @@ describe('css', () => {
     expect(tree).toMatchSnapshot()
   })
   test('nested array', () => {
-    const cls1 = css([[{ display: 'flex' }]])
+    const cls1 = css([
+      [{ display: 'inline' }],
+      [{ display: 'inline-block' }],
+      [
+        { display: 'block' },
+        [
+          { display: 'flex' },
+          [
+            { display: 'table' },
+            { color: 'darkorchid' },
+            [
+              {
+                fontSize: 16
+              },
+              [{ '&:after': { backgroundColor: 'aquamarine' } }]
+            ]
+          ]
+        ]
+      ]
+    ])
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()
   })

diff --git a/packages/emotion/test/prod-mode/.babelrc b/packages/emotion/test/prod-mode/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "flow",
+    "env",
+    "react"
+  ],
+  "plugins": [
+    [
+      "transform-define",
+      {
+        "process.env.NODE_ENV": "production"
+      }
+    ], ["../../../../babel-plugin-emotion-test"], "codegen"]
+}
diff --git a/packages/emotion/test/prod-mode/__snapshots__/prod-mode.test.js.snap b/packages/emotion/test/prod-mode/__snapshots__/prod-mode.test.js.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`production mode production mode basic 1`] = `
+.glamor-0 {
+  color: yellow;
+}
+
+.glamor-0 .some-class {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.glamor-0 .some-class .some-other-class {
+  background-color: hotpink;
+}
+
+@media (max-width:600px) {
+  .glamor-0 .some-class {
+    background-color: pink;
+  }
+}
+
+<div
+  className="glamor-0"
+>
+  <div
+    className="some-class"
+  >
+    <div
+      className="some-other-class"
+    />
+  </div>
+</div>
+`;
+
+exports[`production mode production mode nested media queries 1`] = `
+"@media (max-width:600px) {
+  .css-acogag h1 {
+    font-size: 1.4rem;
+  }
+}
+
+@media (max-width:400px),(max-height:420px) {
+  .css-acogag h1 {
+    font-size: 1.1rem;
+  }
+}"
+`;
+
+exports[`production mode production mode nested styles 1`] = `
+".css-s7aswl {
+  color: blue;
+}
+
+.css-s7aswl:hover {
+  color: green;
+}
+
+.css-s7aswl:hover .name {
+  color: amethyst;
+}
+
+.css-s7aswl:hover .name:focus {
+  color: burlywood;
+}
+
+@media (min-width:420px) {
+  .css-s7aswl:hover .name:focus {
+    color: rebeccapurple;
+  }
+}"
+`;
diff --git a/packages/emotion/test/prod-mode/prod-mode.test.js b/packages/emotion/test/prod-mode/prod-mode.test.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { css, sheet, flush } from 'emotion'
+
+describe('production mode', () => {
+  afterEach(() => flush())
+  test('production mode basic', () => {
+    const cls1 = css`
+      color: yellow;
+      & .some-class {
+        display: flex;
+        & .some-other-class {
+          background-color: hotpink;
+        }
+        @media (max-width: 600px) {
+          background-color: pink;
+        }
+      }
+    `
+    const tree = renderer
+      .create(
+        <div className={cls1}>
+          <div className="some-class">
+            <div className="some-other-class" />
+          </div>
+        </div>
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('production mode nested styles', () => {
+    const mq = [
+      '@media(min-width: 420px)',
+      '@media(min-width: 640px)',
+      '@media(min-width: 960px)'
+    ]
+
+    css({
+      color: 'blue',
+      '&:hover': {
+        '& .name': {
+          color: 'amethyst',
+          '&:focus': {
+            color: 'burlywood',
+            [mq[0]]: {
+              color: 'rebeccapurple'
+            }
+          }
+        },
+        color: 'green'
+      }
+    })
+    expect(sheet).toMatchSnapshot()
+  })
+
+  test('production mode nested media queries', () => {
+    css`
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 1.4rem;
+        }
+      }
+
+      @media (max-width: 400px), (max-height: 420px) {
+        h1 {
+          font-size: 1.1rem;
+        }
+      }
+    `
+
+    expect(sheet).toMatchSnapshot()
+  })
+})