Repository: tkh44/emotion
Pull request #2 (2017-06-01 20:10:20)

initial work for adding styled components type api


Patch:
diff --git a/README.md b/README.md
index a4b730c6..ef22a8cb 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # emotion
 
-#### `css` prop for all
+## 👩‍🎤 Glam + React
 
 [![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion)
 [![Build Status](https://travis-ci.org/tkh44/emotion.svg?branch=master)](https://travis-ci.org/tkh44/emotion)
@@ -8,23 +8,14 @@
 
 
 -   [Install](#install)
--   [glam](#emotionglam)
--   [glamor](#emotionglamor)
--   [cxs](#emotioncxs)
+-   [Example Project](https://github.com/tkh44/emotion/tree/master/examples/glam)
 
 ## Install
 
 ```bash
-npm install -S emotion
+npm install -S emotion glam
 ```
 
-## `emotion/glam`
-
-[Example Project](https://github.com/tkh44/emotion/tree/master/examples/glam)
-
-```bash
-npm install -S glam
-```
 
 **.babelrc**
 ```json
@@ -36,72 +27,62 @@ npm install -S glam
 }
 ```
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>
-```
-
-is converted to
+### glam
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>
-```
+```jsx
+import glam from 'emotion'
 
+const H1 = glam('h1')`
+  color: 'blue';
+  font-size: 48px;
+  transform: scale(${props => props.scale});
+`
 
-**Similar to importing React when using jsx, `import css from 'glam'` must be at the top of your source files.**
+// can be used as any other normal component
 
-## `emotion/glamor`
+function Greeting ({ name }) {
+  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
+}
 
-```bash
-npm install -S glamor
-```
+/*
+<h1
+  className="css-vxb7tq vars-3na0zv"
+>
+  Hello user
+</h1>
+*/
 
-**.babelrc**
-```json
-{
-  "plugins": [
-    "emotion/glamor",
-  ]
-}
-```
+// You can also pass components in
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 css={{ color: 'red' }}>{name}</h1>
-```
+const H2 = glam(H1)`
+  font-size: ${fontSize * 2/3}px;
+  color: 'red';
+`
 
-is converted to
+function Greeting ({ name }) {
+  return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
+}
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 {...css({color: 'red' })}>{name}</h1>
+/*
+<h1
+  className="css-vxb7tq vars-3na0zv css-13wdnau vars-nujrf4"
+>`
+  Hello user
+</h1>
+*/
+// results
 ```
 
 
-**Similar to importing React when using jsx, `import {css} from 'glamor'` must be at the top of your source files.**
+### css prop
 
-## `emotion/cxs`
+When using the emotion babel plugin, any `css` prop is converted to a class name via glam and appended to any existing class names.
 
-```bash
-npm install -S cxs
-```
-
-**.babelrc**
-```json
-{
-  "plugins": [
-    "emotion/cxs",
-  ]
-}
-```
 
 ```jsx harmony
-const Name = ({ color, name }) => <h1 css={{ color: 'red', background: color }}>{name}</h1>
-```
+const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>
 
-is converted to
+// is converted to
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 className={cxs({color: 'red', background: color })}>{name}</h1>
+const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>
 ```
-
-
-**Similar to importing React when using jsx, `import cxs from 'cxs'` must be at the top of your source files.**
-
diff --git a/cxs.js b/cxs.js
deleted file mode 100644
index 5e9e7323..00000000
--- a/cxs.js
+++ /dev/null
@@ -1,1 +0,0 @@
-module.exports = require('./src/cxs/babel')
diff --git a/glamor.js b/glamor.js
deleted file mode 100644
index d2cce17a..00000000
--- a/glamor.js
+++ /dev/null
@@ -1,1 +0,0 @@
-module.exports = require('./src/glamor/babel')
diff --git a/package.json b/package.json
index a5dd4faf..4414ecb6 100644
--- a/package.json
+++ b/package.json
@@ -1,38 +1,57 @@
 {
   "name": "emotion",
   "version": "0.0.6",
-  "description": "css prop for all",
+  "description": "👩‍🎤 Glam + React",
+  "jsnext:main": "dist/emotion.es.js",
+  "module": "dist/emotion.es.js",
+  "main": "dist/glam.js",
+  "umd:main": "dist/emotion.umd.js",
   "files": [
     "src",
     "glam.js"
   ],
   "scripts": {
+    "build": "npm-run-all clean -p rollup -p minify:* -s size",
+    "clean": "rimraf dist",
     "test": "standard src test && jest --coverage",
-    "test:watch": "jest --watch --coverage",
-    "release": "npm run test && npm version patch && npm publish && git push --tags"
+    "test:watch": "jest --watch",
+    "rollup": "rollup -c",
+    "minify:cjs": "uglifyjs $npm_package_main -cm toplevel -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map",
+    "minify:umd": "uglifyjs $npm_package_umd_main -cm -o $npm_package_umd_main -p relative --in-source-map ${npm_package_umd_main}.map --source-map ${npm_package_umd_main}.map",
+    "size": "echo \"Gzipped Size: $(strip-json-comments --no-whitespace $npm_package_main | gzip-size)\"",
+    "release": "npm run test && npm run build && npm version patch && npm publish && git push --tags"
   },
   "dependencies": {
-    "babel-plugin-syntax-jsx": "^6.18.0"
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "glam": "^4.0.3"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
-    "babel-jest": "^19.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.4.0",
+    "babel-preset-env": "^1.5.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "cxs": "^3.0.4",
-    "glam": "^4.0.3",
-    "glamor": "^2.20.25",
-    "jest": "^20.0.1",
-    "jest-glamor-react": "^1.3.0",
+    "gzip-size-cli": "^2.0.0",
+    "jest": "^20.0.4",
+    "jest-cli": "^20.0.4",
+    "jest-glamor-react": "^1.4.0",
+    "npm-run-all": "^4.0.2",
+    "pretty-bytes-cli": "^2.0.0",
     "react": "^15.5.4",
     "react-addons-test-utils": "^15.5.1",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",
-    "standard": "^10.0.2"
+    "rimraf": "^2.6.1",
+    "rollup": "^0.41.6",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "standard": "^10.0.2",
+    "strip-json-comments-cli": "^1.0.1",
+    "uglify-js": "2.8.23"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://github.com/tkh44/emotion#readme",
@@ -63,6 +82,5 @@
   },
   "bugs": {
     "url": "https://github.com/tkh44/emotion/issues"
-  },
-  "main": "glam.js"
+  }
 }
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 00000000..20311dd0
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,34 @@
+import fs from 'fs'
+import babel from 'rollup-plugin-babel'
+import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
+
+const pkg = JSON.parse(fs.readFileSync('./package.json'))
+
+export default {
+  entry: 'src/react.js',
+  external: ['react', 'prop-types', 'glam'],
+  exports: 'named',
+  globals: { react: 'React', 'prop-types': 'PropTypes', glam: 'glam' },
+  useStrict: false,
+  sourceMap: true,
+  plugins: [
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    resolve({
+      jsnext: false,
+      main: true,
+      browser: true
+    }),
+    commonjs({
+      ignoreGlobal: true,
+      include: 'node_modules/**'
+    })
+  ],
+  targets: [
+    {dest: pkg.main, format: 'cjs'},
+    {dest: pkg.module, format: 'es'},
+    {dest: pkg['umd:main'], format: 'umd', moduleName: pkg.name}
+  ]
+}
diff --git a/src/glam/babel.js b/src/babel.js
similarity index 70%
rename from src/glam/babel.js
rename to src/babel.js
index 268b0c4f..d1d8d117 100644
--- a/src/glam/babel.js
+++ b/src/babel.js
@@ -16,6 +16,18 @@ module.exports = function (babel) {
     name: 'emotion-for-glam', // not required
     inherits: require('babel-plugin-syntax-jsx'),
     visitor: {
+      CallExpression (path) {
+        if (path.node.callee.name === 'css') {
+          const parentPath = path.parentPath
+          if (
+            parentPath.isCallExpression() &&
+            parentPath.node.callee &&
+            parentPath.node.callee.name === 'glam'
+          ) {
+            path.replaceWithMultiple(t.arrayExpression(path.node.arguments))
+          }
+        }
+      },
       JSXOpeningElement (path, state) {
         let cssPath
         let classNamesPath
@@ -41,8 +53,6 @@ module.exports = function (babel) {
           classNamesPath.container &&
           classNamesPath.container.value
 
-        // if (!cssPropValue) return
-
         if (t.isJSXExpressionContainer(cssPropValue)) {
           cssPropValue = cssPropValue.expression
         }
@@ -106,9 +116,29 @@ module.exports = function (babel) {
           )
         }
       },
-      JSXAttribute (path, state) {
-        if (path.node.name.name === 'css') {
-          console.log('whatup', path.node.value)
+      TaggedTemplateExpression (path) {
+        if (
+          t.isMemberExpression(path.node.tag) &&
+          path.node.tag.object.name === 'glam' &&
+          t.isTemplateLiteral(path.node.quasi)
+        ) {
+          path.replaceWith(
+            t.callExpression(t.identifier(path.node.tag.object.name), [
+              t.stringLiteral(path.node.tag.property.name),
+              t.taggedTemplateExpression(t.identifier('css'), path.node.quasi)
+            ])
+          )
+        } else if (
+          t.isCallExpression(path.node.tag) &&
+          path.node.tag.callee.name === 'glam' &&
+          t.isTemplateLiteral(path.node.quasi)
+        ) {
+          path.replaceWith(
+            t.callExpression(t.identifier(path.node.tag.callee.name), [
+              path.node.tag.arguments[0],
+              t.taggedTemplateExpression(t.identifier('css'), path.node.quasi)
+            ])
+          )
         }
       }
     }
diff --git a/src/cxs/babel.js b/src/cxs/babel.js
deleted file mode 100644
index c75eafde..00000000
--- a/src/cxs/babel.js
+++ /dev/null
@@ -1,86 +0,0 @@
-module.exports = function (babel) {
-  const {types: t} = babel
-
-  function createClassNameAttr (expression) {
-    return t.jSXAttribute(
-      t.jSXIdentifier('className'),
-      t.JSXExpressionContainer(expression)
-    )
-  }
-
-  return {
-    name: 'emotion-for-cxs', // not required
-    inherits: require('babel-plugin-syntax-jsx'),
-    visitor: {
-      JSXOpeningElement (path, state) {
-        let cssPath
-        let classNamesPath
-
-        path.get('attributes').forEach(openElPath => {
-          const attrPath = openElPath.get('name')
-          const name = attrPath.node.name
-
-          if (name === 'css') {
-            cssPath = attrPath
-          }
-
-          if (name === 'className') {
-            classNamesPath = attrPath
-          }
-        })
-
-        if (!cssPath) return
-
-        let cssPropValue = cssPath.container && cssPath.container.value
-        let classNamesValue =
-          classNamesPath &&
-          classNamesPath.container &&
-          classNamesPath.container.value
-
-        if (t.isJSXExpressionContainer(cssPropValue)) {
-          cssPropValue = cssPropValue.expression
-        }
-
-        let cxsCssFunction = t.callExpression(t.identifier('cxs'), [
-          cssPropValue
-        ])
-
-        if (!classNamesValue) {
-          cssPath.parentPath.replaceWith(createClassNameAttr(cxsCssFunction))
-          return
-        }
-
-        cssPath.parentPath.remove()
-        if (t.isJSXExpressionContainer(classNamesValue)) {
-          classNamesPath.parentPath.replaceWith(
-            createClassNameAttr(
-              t.binaryExpression(
-                '+',
-                t.binaryExpression(
-                  '+',
-                  classNamesValue.expression,
-                  t.stringLiteral(' ')
-                ),
-                cxsCssFunction
-              )
-            )
-          )
-        } else {
-          classNamesPath.parentPath.replaceWith(
-            createClassNameAttr(
-              t.binaryExpression(
-                '+',
-                t.binaryExpression(
-                  '+',
-                  t.stringLiteral(classNamesValue.value || ''),
-                  t.stringLiteral(' ')
-                ),
-                cxsCssFunction
-              )
-            )
-          )
-        }
-      }
-    }
-  }
-}
diff --git a/src/glamor/babel.js b/src/glamor/babel.js
deleted file mode 100644
index ceaa23b5..00000000
--- a/src/glamor/babel.js
+++ /dev/null
@@ -1,37 +0,0 @@
-module.exports = function (babel) {
-  const {types: t} = babel
-
-  return {
-    name: 'emotion-for-glam', // not required
-    inherits: require('babel-plugin-syntax-jsx'),
-    visitor: {
-      JSXOpeningElement (path, state) {
-        let cssPath
-
-        path.get('attributes').forEach(openElPath => {
-          const attrPath = openElPath.get('name')
-          const name = attrPath.node.name
-
-          if (name === 'css') {
-            cssPath = attrPath
-          }
-        })
-
-        if (!cssPath) return
-
-        let cssPropValue = cssPath.container && cssPath.container.value
-
-        if (t.isJSXExpressionContainer(cssPropValue)) {
-          cssPropValue = cssPropValue.expression
-        }
-
-        let glamorCssFunction = t.callExpression(t.identifier('css'), [
-          cssPropValue
-        ])
-
-        cssPath.parentPath.insertAfter(t.jSXSpreadAttribute(glamorCssFunction))
-        cssPath.parentPath.remove()
-      }
-    }
-  }
-}
diff --git a/src/react.js b/src/react.js
new file mode 100644
index 00000000..6e0c69d3
--- /dev/null
+++ b/src/react.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import css from 'glam'
+
+const h = React.createElement
+
+export default function glam (tag, [cls, vars]) {
+  return class Target extends React.Component {
+    render () {
+      const finalClassName = css(
+        cls,
+        vars.map(v => (typeof v === 'function' ? v(this.props) : v))
+      )
+
+      return h(tag, {
+        ...this.props,
+        className: (this.props.className || '') + ' ' + finalClassName
+      })
+    }
+  }
+}


Test patch:
diff --git a/src/glam/__tests__/.babelrc b/src/__tests__/.babelrc
similarity index 100%
rename from src/glam/__tests__/.babelrc
rename to src/__tests__/.babelrc
diff --git a/src/__tests__/__snapshots__/babel.js.snap b/src/__tests__/__snapshots__/babel.js.snap
new file mode 100644
index 00000000..c7a78296
--- /dev/null
+++ b/src/__tests__/__snapshots__/babel.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emotion/glam babel css prop StringLiteral css prop value 1`] = `"<div className={css('css-jf1v9l')}></div>;"`;
+
+exports[`emotion/glam babel css prop basic 1`] = `"<div className={\\"a\\" + \\" \\" + css('css-jf1v9l')}></div>;"`;
+
+exports[`emotion/glam babel css prop className as expression 1`] = `"<div className={variable + \\" \\" + css('css-jf1v9l')}></div>;"`;
+
+exports[`emotion/glam babel css prop className as expression string 1`] = `"<div className={\`test__class\` + \\" \\" + css('css-jf1v9l')} this={\`hello\`}></div>;"`;
+
+exports[`emotion/glam babel css prop css empty 1`] = `"<div className={css('css-0')}></div>;"`;
+
+exports[`emotion/glam babel css prop emptyClassName 1`] = `"<div className={\\"\\" + \\" \\" + css('css-jf1v9l')}></div>;"`;
+
+exports[`emotion/glam babel css prop no css attr 1`] = `"<div></div>;"`;
+
+exports[`emotion/glam babel css prop noClassName 1`] = `"<div className={css('css-jf1v9l')}></div>;"`;
+
+exports[`emotion/glam real basic 1`] = `
+<p
+  className="css-jk0pkr"
+>
+  hello world
+</p>
+`;
+
+exports[`emotion/glam real kitchen sink 1`] = `
+<div
+  className="css__legacy-stuff css-1170hdn vars-k1238z frag-15qcrjv frag-mdk64u"
+>
+  <h1
+    className="css-wjhr0q vars-11t1jtz frag-1wh34bm vars-telb2o"
+  >
+    BOOM
+  </h1>
+  <p
+    className="test_class1 css-14jcta0"
+  >
+    Hello
+  </p>
+  <p
+    className="test_class1 test___class45 css-1gdxe9e"
+  >
+    World
+  </p>
+  <p
+    className="css-1g8ltio vars-bs2yjn"
+  >
+    hello world
+  </p>
+</div>
+`;
+
+exports[`emotion/glam real string expression 1`] = `
+<p
+  className="css-7sqgip"
+>
+  hello world
+</p>
+`;
diff --git a/src/__tests__/__snapshots__/react.js.snap b/src/__tests__/__snapshots__/react.js.snap
new file mode 100644
index 00000000..4a200f80
--- /dev/null
+++ b/src/__tests__/__snapshots__/react.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`glam react babel glam component basic 1`] = `"glam(\\"h1\\", ['css-8xpzga', [fontSize]]);"`;
+
+exports[`glam react babel glam component function call 1`] = `"glam(MyComponent, ['css-8xpzga', [fontSize]]);"`;
+
+exports[`glam react basic render 1`] = `
+<h1
+  className=" css-13wdnau vars-nujrf4"
+>
+  hello world
+</h1>
+`;
+
+exports[`glam react call expression 1`] = `
+<h1
+  className="legacy__class css-13wdnau vars-nujrf4"
+>
+  hello world
+</h1>
+`;
+
+exports[`glam react composition 1`] = `
+<h1
+  className="legacy__class css-vxb7tq vars-3na0zv css-13wdnau vars-nujrf4"
+>
+  hello world
+</h1>
+`;
+
+exports[`glam react function in expression 1`] = `
+<h1
+  className="legacy__class css-vxb7tq vars-prycnx css-13wdnau vars-nujrf4"
+  scale={2}
+>
+  hello world
+</h1>
+`;
diff --git a/src/glam/__tests__/index.js b/src/__tests__/babel.js
similarity index 97%
rename from src/glam/__tests__/index.js
rename to src/__tests__/babel.js
index a5fc858f..322dd99d 100644
--- a/src/glam/__tests__/index.js
+++ b/src/__tests__/babel.js
@@ -1,4 +1,4 @@
-/* eslint-disable jsx-quotes,no-useless-escape */
+/* eslint-disable jsx-quotes,no-useless-escape,no-template-curly-in-string */
 /* eslint-env jest */
 import React from 'react'
 import renderer from 'react-test-renderer'
@@ -8,7 +8,7 @@ import css, {fragment} from 'glam'
 const babel = require('babel-core')
 
 describe('emotion/glam', () => {
-  describe('babel', () => {
+  describe('babel css prop', () => {
     test('basic', () => {
       const basic = '(<div className="a" css={`color: brown;`}></div>)'
       const {code} = babel.transform(basic, {plugins: [plugin, 'glam/babel']})
diff --git a/src/glam/__tests__/index.js.css b/src/__tests__/babel.js.css
similarity index 100%
rename from src/glam/__tests__/index.js.css
rename to src/__tests__/babel.js.css
diff --git a/src/__tests__/react.js b/src/__tests__/react.js
new file mode 100644
index 00000000..1915e4d9
--- /dev/null
+++ b/src/__tests__/react.js
@@ -0,0 +1,97 @@
+/* eslint-disable jsx-quotes,no-useless-escape,no-template-curly-in-string */
+/* eslint-env jest */
+import React from 'react'
+import renderer from 'react-test-renderer'
+import css, {fragment} from 'glam'
+import glam from '../react'
+import plugin from '../babel'
+
+const babel = require('babel-core')
+
+describe('glam react', () => {
+  describe('babel glam component', () => {
+    test('basic', () => {
+      const basic = 'glam.h1\`font-size: \$\{fontSize\}px;\`'
+      const {code} = babel.transform(basic, {plugins: [plugin, 'glam/babel']})
+      expect(code).toMatchSnapshot()
+    })
+
+    test('function call', () => {
+      const basic = 'glam(MyComponent)\`font-size: \$\{fontSize\}px;\`'
+      const {code} = babel.transform(basic, {plugins: [plugin, 'glam/babel']})
+      expect(code).toMatchSnapshot()
+    })
+  })
+
+  test('basic render', () => {
+    const fontSize = 20
+    const H1 = glam.h1`
+      font-size: ${fontSize}px;
+    `
+
+    const tree = renderer
+      .create(
+        <H1>
+          hello world
+        </H1>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('call expression', () => {
+    const fontSize = 20
+    const H1 = glam('h1')`
+      font-size: ${fontSize}px;
+    `
+
+    const tree = renderer
+      .create(
+        <H1 className={'legacy__class'}>
+          hello world
+        </H1>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('composition', () => {
+    const fontSize = 20
+    const H1 = glam('h1')`
+      font-size: ${fontSize}px;
+    `
+
+    const H2 = glam(H1)`font-size: ${fontSize * 2 / 3}`
+
+    const tree = renderer
+      .create(
+        <H2 className={'legacy__class'}>
+          hello world
+        </H2>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('function in expression', () => {
+    const fontSize = 20
+    const H1 = glam('h1')`
+      font-size: ${fontSize}px;
+    `
+
+    const H2 = glam(H1)`font-size: ${({ scale }) => fontSize * scale}`
+
+    const tree = renderer
+      .create(
+        <H2 scale={2} className={'legacy__class'}>
+          hello world
+        </H2>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/__tests__/react.js.css b/src/__tests__/react.js.css
new file mode 100644
index 00000000..50c47477
--- /dev/null
+++ b/src/__tests__/react.js.css
@@ -0,0 +1,3 @@
+/* do not edit this file */
+.css-13wdnau { font-size: var(--css-13wdnau-0)px; }
+.css-vxb7tq { font-size: var(--css-vxb7tq-0) }
\ No newline at end of file
diff --git a/src/cxs/__tests__/.babelrc b/src/cxs/__tests__/.babelrc
deleted file mode 100644
index 1f68b4d6..00000000
--- a/src/cxs/__tests__/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "presets": [
-    "env",
-    "stage-0",
-    "react"
-  ],
-  "plugins": [
-    ["../babel.js"],
-  ]
-}
diff --git a/src/cxs/__tests__/__snapshots__/index.js.snap b/src/cxs/__tests__/__snapshots__/index.js.snap
deleted file mode 100644
index 0b9d9ef5..00000000
--- a/src/cxs/__tests__/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`emotion/cxs babel basic 1`] = `"<div className={\\"a\\" + \\" \\" + cxs({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/cxs babel className as expression 1`] = `"<div className={props.className + ' ' + cxs({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/cxs babel className as expression string 1`] = `"<div className={\`test__class\` + ' ' + cxs({ color: 'brown' })} this={\`hello\`}></div>;"`;
-
-exports[`emotion/cxs babel css empty 1`] = `"<div className={cxs({})}></div>;"`;
-
-exports[`emotion/cxs babel emptyClassName 1`] = `"<div className={\\"\\" + \\" \\" + cxs({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/cxs babel no className 1`] = `"<div className={cxs({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/cxs babel no css attr 1`] = `"<div></div>;"`;
-
-exports[`emotion/cxs babel wrong value type 1`] = `"<div className={cxs(5)}></div>;"`;
-
-exports[`emotion/cxs real basic 1`] = `
-<p
-  className="c-red"
->
-  hello world
-</p>
-`;
-
-exports[`emotion/cxs real kitchen sink 1`] = `
-<div
-  className="css__legacy-stuff c-blue"
->
-  <h1
-    className="_1eomoo"
-  >
-    BOOM
-  </h1>
-  <p
-    className="test_class1 c-gray"
-  >
-    Hello
-  </p>
-  <p
-    className="test_class1 test___class45 border-1px_solid_blue"
-  >
-    World
-  </p>
-  <p
-    className="d-flex"
-  >
-    hello world
-  </p>
-</div>
-`;
diff --git a/src/cxs/__tests__/index.js b/src/cxs/__tests__/index.js
deleted file mode 100644
index 3800fac0..00000000
--- a/src/cxs/__tests__/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/* eslint-disable jsx-quotes,no-useless-escape */
-/* eslint-env jest */
-import React from 'react'
-import renderer from 'react-test-renderer'
-import plugin from '../babel'
-import {matcher, serializer} from 'jest-glamor-react'
-import cxs from 'cxs'
-
-expect.addSnapshotSerializer(serializer)
-expect.extend(matcher)
-
-const babel = require('babel-core')
-
-describe('emotion/cxs', () => {
-  describe('babel', () => {
-    test('basic', () => {
-      const basic = `(<div className="a" css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('no css attr', () => {
-      const basic = '(<div></div>)'
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('css empty', () => {
-      const basic = '(<div css={{}}></div>)'
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('wrong value type', () => {
-      const basic = '(<div css={5}></div>)'
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('no className', () => {
-      const basic = `(<div css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('emptyClassName', () => {
-      const basic = `(<div className="" css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('className as expression', () => {
-      const basic = `(<div className={props.className} css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('className as expression string', () => {
-      const basic =
-        "(<div className={`test__class\`} css={{ color: 'brown'}} this={`hello\`}></div>)"
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-  })
-
-  describe('real', () => {
-    test('basic', (done) => {
-      const tree = renderer
-        .create(
-          <p css={{color: 'red'}}>
-            hello world
-          </p>
-        )
-        .toJSON()
-
-      expect(tree).toMatchSnapshotWithGlamor()
-      setTimeout(done)
-    })
-
-    test('kitchen sink', (done) => {
-      const tree = renderer
-        .create(
-          <div className="css__legacy-stuff" css={{color: 'blue'}}>
-            <h1 css={{'@media(min-width: 420px)': {fontSize: 48}}}>
-              BOOM
-            </h1>
-            <p className="test_class1" css={{color: 'gray'}}>Hello</p>
-            <p
-              className="test_class1 test___class45"
-              css={{border: '1px solid blue'}}
-            >
-              World
-            </p>
-            <p css={{display: 'flex'}}>
-              hello world
-            </p>
-
-          </div>
-        )
-        .toJSON()
-
-      expect(tree).toMatchSnapshotWithGlamor()
-      setTimeout(done)
-    })
-  })
-})
diff --git a/src/glam/__tests__/__snapshots__/index.js.snap b/src/glam/__tests__/__snapshots__/index.js.snap
deleted file mode 100644
index 0fc06a53..00000000
--- a/src/glam/__tests__/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`emotion/glam babel StringLiteral css prop value 1`] = `"<div className={css('css-jf1v9l')}></div>;"`;
-
-exports[`emotion/glam babel basic 1`] = `"<div className={\\"a\\" + \\" \\" + css('css-jf1v9l')}></div>;"`;
-
-exports[`emotion/glam babel className as expression 1`] = `"<div className={variable + \\" \\" + css('css-jf1v9l')}></div>;"`;
-
-exports[`emotion/glam babel className as expression string 1`] = `"<div className={\`test__class\` + \\" \\" + css('css-jf1v9l')} this={\`hello\`}></div>;"`;
-
-exports[`emotion/glam babel css empty 1`] = `"<div className={css('css-0')}></div>;"`;
-
-exports[`emotion/glam babel emptyClassName 1`] = `"<div className={\\"\\" + \\" \\" + css('css-jf1v9l')}></div>;"`;
-
-exports[`emotion/glam babel no css attr 1`] = `"<div></div>;"`;
-
-exports[`emotion/glam babel noClassName 1`] = `"<div className={css('css-jf1v9l')}></div>;"`;
-
-exports[`emotion/glam real basic 1`] = `
-<p
-  className="css-jk0pkr"
->
-  hello world
-</p>
-`;
-
-exports[`emotion/glam real kitchen sink 1`] = `
-<div
-  className="css__legacy-stuff css-1170hdn vars-k1238z frag-15qcrjv frag-mdk64u"
->
-  <h1
-    className="css-wjhr0q vars-11t1jtz frag-1wh34bm vars-telb2o"
-  >
-    BOOM
-  </h1>
-  <p
-    className="test_class1 css-14jcta0"
-  >
-    Hello
-  </p>
-  <p
-    className="test_class1 test___class45 css-1gdxe9e"
-  >
-    World
-  </p>
-  <p
-    className="css-1g8ltio vars-bs2yjn"
-  >
-    hello world
-  </p>
-</div>
-`;
-
-exports[`emotion/glam real string expression 1`] = `
-<p
-  className="css-7sqgip"
->
-  hello world
-</p>
-`;
diff --git a/src/glamor/__tests__/.babelrc b/src/glamor/__tests__/.babelrc
deleted file mode 100644
index 1f68b4d6..00000000
--- a/src/glamor/__tests__/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "presets": [
-    "env",
-    "stage-0",
-    "react"
-  ],
-  "plugins": [
-    ["../babel.js"],
-  ]
-}
diff --git a/src/glamor/__tests__/__snapshots__/index.js.snap b/src/glamor/__tests__/__snapshots__/index.js.snap
deleted file mode 100644
index 2e03eb77..00000000
--- a/src/glamor/__tests__/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`emotion/glamor babel basic 1`] = `"<div className=\\"a\\" {...css({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/glamor babel className as expression 1`] = `"<div className={props.className} {...css({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/glamor babel className as expression string 1`] = `"<div className={\`test__class\`} {...css({ color: 'brown' })} this={\`hello\`}></div>;"`;
-
-exports[`emotion/glamor babel css empty 1`] = `"<div {...css({})}></div>;"`;
-
-exports[`emotion/glamor babel emptyClassName 1`] = `"<div className=\\"\\" {...css({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/glamor babel no className 1`] = `"<div {...css({ color: 'brown' })}></div>;"`;
-
-exports[`emotion/glamor babel no css attr 1`] = `"<div></div>;"`;
-
-exports[`emotion/glamor babel wrong value type 1`] = `"<div {...css(5)}></div>;"`;
-
-exports[`emotion/glamor real basic 1`] = `
-.css-1ezp9xe,
-[data-css-1ezp9xe] {
-  color: red;
-}
-
-<p
-  data-css-1ezp9xe=""
->
-  hello world
-</p>
-`;
-
-exports[`emotion/glamor real kitchen sink 1`] = `
-.css-icjsl7,
-[data-css-icjsl7] {
-  color: blue;
-}
-
-.css-gvvg5g,
-[data-css-gvvg5g] {
-  color: gray;
-}
-
-.css-16ywyew,
-[data-css-16ywyew] {
-  border: 1px solid blue;
-}
-
-.css-1cqgl9p,
-[data-css-1cqgl9p] {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-@media (min-width: 420px) {
-  .css-198yaui,
-  [data-css-198yaui] {
-    font-size: 48px;
-  }
-}
-
-<div
-  className="css__legacy-stuff"
-  data-css-icjsl7=""
->
-  <h1
-    data-css-198yaui=""
-  >
-    BOOM
-  </h1>
-  <p
-    className="test_class1"
-    data-css-gvvg5g=""
-  >
-    Hello
-  </p>
-  <p
-    className="test_class1 test___class45"
-    data-css-16ywyew=""
-  >
-    World
-  </p>
-  <p
-    data-css-1cqgl9p=""
-  >
-    hello world
-  </p>
-</div>
-`;
diff --git a/src/glamor/__tests__/index.js b/src/glamor/__tests__/index.js
deleted file mode 100644
index d750cffb..00000000
--- a/src/glamor/__tests__/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/* eslint-disable jsx-quotes,no-useless-escape */
-/* eslint-env jest */
-import React from 'react'
-import renderer from 'react-test-renderer'
-import plugin from '../babel'
-import { matcher, serializer } from 'jest-glamor-react'
-import { css } from 'glamor'
-
-expect.addSnapshotSerializer(serializer)
-expect.extend(matcher)
-
-const babel = require('babel-core')
-
-describe('emotion/glamor', () => {
-  describe('babel', () => {
-    test('basic', () => {
-      const basic = `(<div className="a" css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('no css attr', () => {
-      const basic = '(<div></div>)'
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('css empty', () => {
-      const basic = '(<div css={{}}></div>)'
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('wrong value type', () => {
-      const basic = '(<div css={5}></div>)'
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('no className', () => {
-      const basic = `(<div css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('emptyClassName', () => {
-      const basic = `(<div className="" css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('className as expression', () => {
-      const basic = `(<div className={props.className} css={{ color: 'brown' }}></div>)`
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-
-    test('className as expression string', () => {
-      const basic =
-        "(<div className={`test__class\`} css={{ color: 'brown'}} this={`hello\`}></div>)"
-      const {code} = babel.transform(basic, {plugins: [plugin]})
-      expect(code).toMatchSnapshot()
-    })
-  })
-
-  describe('real', () => {
-    test('basic', () => {
-      const tree = renderer
-        .create(
-          <p css={{color: 'red'}}>
-            hello world
-          </p>
-        )
-        .toJSON()
-
-      expect(tree).toMatchSnapshotWithGlamor()
-    })
-
-    test('kitchen sink', () => {
-      const tree = renderer
-        .create(
-          <div className="css__legacy-stuff" css={{color: 'blue'}}>
-            <h1 css={{'@media(min-width: 420px)': {fontSize: 48}}}>
-              BOOM
-            </h1>
-            <p className="test_class1" css={{color: 'gray'}}>Hello</p>
-            <p
-              className="test_class1 test___class45"
-              css={{border: '1px solid blue'}}
-            >
-              World
-            </p>
-            <p css={{display: 'flex'}}>
-              hello world
-            </p>
-
-          </div>
-        )
-        .toJSON()
-
-      expect(tree).toMatchSnapshotWithGlamor()
-    })
-  })
-})