Lerna

.babelrc

@@ -10,5 +10,16 @@
     "react",
     "flow"
   ],
-  "plugins": ["babel-plugin-preval"]
+  "plugins": ["babel-plugin-preval"],
+  "env": {
+    "test": {
+      "presets": [
+        "flow",
+        "env",
+        "react",
+        "stage-2"
+      ],
+      "plugins": ["./babel-plugin-emotion-test", "preval"]    
+    }
+  }
 }

.flowconfig

@@ -1,22 +1,5 @@
 [ignore]
-<PROJECT_ROOT>/node_modules/[^s].*
-<PROJECT_ROOT>/node_modules/s[^t].*
-<PROJECT_ROOT>/node_modules/st[^y].*
-<PROJECT_ROOT>/node_modules/sty[^l].*
-<PROJECT_ROOT>/node_modules/styl[^e].*
-<PROJECT_ROOT>/node_modules/style[^d].*
-<PROJECT_ROOT>/node_modules/styled[^\-].*
-<PROJECT_ROOT>/node_modules/styled-[^c].*
-<PROJECT_ROOT>/node_modules/styled-c[^o].*
-<PROJECT_ROOT>/node_modules/styled-co[^m].*
-<PROJECT_ROOT>/node_modules/styled-com[^p].*
-<PROJECT_ROOT>/node_modules/styled-comp[^o].*
-<PROJECT_ROOT>/node_modules/styled-compo[^n].*
-<PROJECT_ROOT>/node_modules/styled-compon[^e].*
-<PROJECT_ROOT>/node_modules/styled-compone[^n].*
-<PROJECT_ROOT>/node_modules/styled-componen[^t].*
-<PROJECT_ROOT>/node_modules/styled-component[^s].*
-<PROJECT_ROOT>/node_modules/styled-components.+
+
 [include]
 
 [libs]

.gitignore

@@ -1,14 +1,10 @@
 /coverage
 /demo/dist
-/dist
-/lib
-/es
-/node_modules
-/umd
-/es
-npm-debug.log
+dist/
+lib/
+node_modules/
+*.log
 .idea
 /example/build
-/example/node_modules
 package-lock.json
 yarn.lock

.travis.yml

@@ -10,6 +10,9 @@ cache:
 before_install:
   - npm install codecov
 
+before_script:
+  - npm run bootstrap
+
 after_success:
   - cat ./coverage/lcov.info | ./node_modules/codecov/bin/codecov
 

babel-plugin-emotion-test.js

@@ -0,0 +1,7 @@
+require('babel-register')
+const path = require('path')
+require('module-alias').addAliases({
+  'emotion-utils': path.resolve(__dirname, './packages/emotion-utils/src')
+})
+
+module.exports = require('./packages/babel-plugin-emotion/src')

docs/babel-macros.md

@@ -3,7 +3,7 @@
 Instead of using the emotion's babel plugin, you can use emotion with [`babel-macros`](https://github.com/kentcdodds/babel-macros). Add `babel-macros` to your babel config and import whatever you want from emotion but add `/macro` to the end. The macro is currently the same as inline mode. Currently every API except for the css prop is supported by the macro.
 
 ```jsx
-import styled from 'emotion/react/macro'
+import styled from 'react-emotion/macro'
 import { css, keyframes, fontFace, injectGlobal, flush, hydrate } from 'emotion/macro'
 ```
 

docs/composes.md

@@ -4,7 +4,7 @@ The composes property is based on [css modules' composes property](https://githu
 
 ```jsx
 import { css } from 'emotion'
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 // Define a class
 const flexCenter = css`

docs/extract-static.md

@@ -10,15 +10,15 @@ Configure babel
 ```json
 {
   "plugins": [
-    ["emotion/babel", { "extractStatic": true }]
+    ["emotion", { "extractStatic": true }]
   ]
 }
 ```
 
 This js file, `h1.js`
 
 ```jsx harmony
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 const H1 = styled('h1')`
   color: #ffd43b;
@@ -38,7 +38,7 @@ During babel compilation emotion will create `h1.emotion.css` and add `import '.
 
 ```jsx
 import './h1.emotion.css'
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 const H1 = styled('h1', 'css-duiy4a')
 ```

docs/install.md

@@ -12,7 +12,7 @@ npm install -S emotion
 ```json
 {
   "plugins": [
-    "emotion/babel"
+    "emotion"
   ]
 }
 ```

docs/keyframes.md

@@ -5,7 +5,7 @@ The `keyframes` function takes in the css keyframes definition and returns the a
 
 ```jsx
 import { keyframes, css } from 'emotion'
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 const bounceHeight = 30;
 

docs/ssr.md

@@ -7,7 +7,7 @@ This returns an object with the properties `html`, `ids` and `css`. It removes u
 
 ```jsx
 import { renderToString } from 'react-dom/server'
-import { extractCritical } from 'emotion/server'
+import { extractCritical } from 'emotion-server'
 import App from './App'
 
 

docs/styled-with-object.md

@@ -5,7 +5,7 @@
 *The same caveats to using objects with css apply to this.*
 
 ```jsx harmony
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 const H1 = styled.h1(
   {

docs/styled.md

@@ -1,7 +1,7 @@
 ## Styled
 
 ```jsx
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 const H1 = styled('h1')`
   color: blue;
@@ -55,7 +55,7 @@ function Greeting ({ name }) {
 *The same caveats to using objects with css apply to this.*
 
 ```jsx
-import styled from 'emotion/react'
+import styled from 'react-emotion'
 
 const H1 = styled.h1({
   fontSize: 20

lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.0.0",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "7.0.13"
+}

package.json

@@ -1,44 +1,23 @@
 {
-  "name": "emotion",
+  "private": true,
   "version": "7.0.13",
-  "description": "high performance css-in-js",
-  "main": "lib/index.js",
-  "files": [
-    "babel.js",
-    "src",
-    "dist",
-    "lib",
-    "react",
-    "server.js",
-    "macro.js"
-  ],
   "scripts": {
-    "build": "rimraf lib && babel src -d lib",
     "build:watch": "npm run build -- -w",
-    "test:size": "npm-run-all clean rollup size",
-    "clean": "rimraf dist",
+    "build": "lerna run build --parallel",
+    "test:size": "npm-run-all clean rollup:umd size",
+    "clean": "lerna run clean --parallel",
     "test": "npm-run-all -p lint:check coverage test:size",
     "coverage": "jest --coverage --no-cache --ci --runInBand",
     "lint:check": "eslint .",
     "test:watch": "jest --watch --no-cache",
-    "rollup": "rollup -c && IMPORT=react rollup -c",
+    "rollup": "lerna run rollup --parallel",
+    "rollup:umd": "lerna run rollup:umd --parallel",
     "size": "bundlesize",
-    "release": "npm run test && npm run build && npm run rollup && npm version patch && npm publish && git push --tags",
-    "lint": "eslint . --fix"
-  },
-  "dependencies": {
-    "@arr/filter.mutate": "^1.0.0",
-    "@arr/foreach": "^1.0.0",
-    "@arr/map": "^1.0.0",
-    "@arr/reduce": "^1.0.0",
-    "autoprefixer": "^7.1.2",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "fbjs": "^0.8.12",
-    "postcss": "^6.0.8",
-    "postcss-js": "^1.0.0",
-    "postcss-nested": "^2.1.0",
-    "touch": "^1.0.0"
+    "release": "npm run test && npm run build && lerna publish && git push --tags",
+    "lint": "eslint . --fix",
+    "bootstrap": "lerna bootstrap"
   },
+  "dependencies": {},
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
@@ -67,6 +46,8 @@
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
     "jest-glamor-react": "^3.1.0",
+    "lerna": "^2.0.0",
+    "module-alias": "^2.0.1",
     "npm-run-all": "^4.0.2",
     "polished": "^1.2.1",
     "prettier-eslint-cli": "^4.0.3",
@@ -76,6 +57,7 @@
     "react-test-renderer": "^15.6.1",
     "rimraf": "^2.6.1",
     "rollup": "^0.43.0",
+    "rollup-plugin-alias": "^1.3.1",
     "rollup-plugin-babel": "^2.7.1",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^3.0.0",
@@ -123,28 +105,41 @@
       "react/no-unused-prop-types": 0,
       "standard/computed-property-even-spacing": 0,
       "no-template-curly-in-string": 0
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "*.test.js"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "jest": {
     "transform": {
-      "\\.css$": "<rootDir>/test/styleTransform.js",
+      "\\.css$": "<rootDir>/styleTransform.js",
       "^.+\\.js?$": "babel-jest"
     },
     "moduleNameMapper": {
-      "^emotion$": "<rootDir>/src",
-      "^emotion/react$": "<rootDir>/src/react"
+      "^emotion$": "<rootDir>/packages/emotion/src",
+      "^react-emotion$": "<rootDir>/packages/react-emotion/src",
+      "^emotion-utils$": "<rootDir>/packages/emotion-utils/src",
+      "^emotion-server$": "<rootDir>/packages/emotion-server/src",
+      "^babel-plugin-emotion": "<rootDir>/packages/babel-plugin-emotion/src"
     }
   },
   "bugs": {
     "url": "https://github.com/tkh44/emotion/issues"
   },
   "bundlesize": [
     {
-      "path": "./dist/DO-NOT-USE.min.js",
+      "path": "./packages/emotion/dist/DO-NOT-USE.min.js",
       "threshold": "5 Kb"
     },
     {
-      "path": "./dist/DO-NOT-USE-react.min.js",
+      "path": "./packages/emotion-react/dist/DO-NOT-USE.min.js",
       "threshold": "6 Kb"
     }
   ]

packages/babel-plugin-emotion/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "babel-plugin-emotion",
+  "version": "7.0.13",
+  "description": "The Next Generation of CSS-in-JS ",
+  "main": "lib/index.js",
+  "files": ["src", "lib"],
+  "scripts": {
+    "build": "npm-run-all clean babel",
+    "babel": "babel src -d lib",
+    "clean": "rimraf lib"   
+  },
+  "dependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "postcss": "^6.0.9",
+    "postcss-js": "^1.0.0",
+    "postcss-nested": "^2.1.1",
+    "touch": "^1.0.0",
+    "emotion-utils": "7.0.13"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "rimraf": "^2.6.1",
+    "npm-run-all": "^4.0.2"    
+  },
+  "author": "Kye Hohenberger",
+  "homepage": "https://github.com/tkh44/emotion#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tkh44/emotion.git"
+  },
+  "keywords": [
+    "styles",
+    "emotion",
+    "react",
+    "css",
+    "css-in-js"
+  ],
+  "bugs": {
+    "url": "https://github.com/tkh44/emotion/issues"
+  }
+}

src/ast-object.js → packages/babel-plugin-emotion/src/ast-object.js

@@ -1,8 +1,8 @@
 import postcssJs from 'postcss-js'
 import Input from 'postcss/lib/input'
 import { expandCSSFallbacks, prefixer } from './parser'
-import { forEach, reduce } from './utils'
-import { getFilename } from './babel'
+import { forEach, reduce } from 'emotion-utils'
+import { getFilename } from './index'
 
 function prefixAst(args, t, path) {
   function isLiteral(value) {

src/babel-utils.js → packages/babel-plugin-emotion/src/babel-utils.js

@@ -1,4 +1,4 @@
-import { keys, forEach } from './utils'
+import { keys, forEach } from 'emotion-utils'
 
 export function getIdentifierName(path, t) {
   const parent = path.findParent(p => p.isVariableDeclarator())

src/babel.js → packages/babel-plugin-emotion/src/index.js

@@ -11,8 +11,7 @@ import { touchSync } from 'touch'
 import { inline, getName } from './inline'
 import { parseCSS } from './parser'
 import { getIdentifierName } from './babel-utils'
-import { map } from './utils'
-import { hashArray } from './hash'
+import { hashArray, map } from 'emotion-utils'
 import cssProps from './css-prop'
 import ASTObject from './ast-object'
 

src/inline.js → packages/babel-plugin-emotion/src/inline.js

@@ -1,5 +1,5 @@
 // @flow
-import { hashArray } from './hash'
+import { hashArray } from 'emotion-utils'
 
 export function getName(identifierName?: string, prefix: string): string {
   const parts = []