initial work for adding styled components type api

README.md

@@ -1,30 +1,21 @@
 # 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)
 [![codecov](https://codecov.io/gh/tkh44/emotion/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/emotion)
 
 
 -   [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.**
-

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"
+  }
 }

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}
+  ]
+}

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>
+`;

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>
+`;

src/glam/__tests__/index.js → 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']})