Implement the plugin as a babel macro

README.md

@@ -43,3 +43,4 @@ minimizes the runtime cost of css-in-js dramatically by parsing your styles with
   - [vue styled](https://github.com/tkh44/emotion/tree/master/docs/vue-styled.md)
 
 - [Usage with CSS Modules](https://github.com/tkh44/emotion/tree/master/docs/css-modules.md)
+- [Usage with babel-macros](https://github.com/tkh44/emotion/tree/master/docs/babel-macros.md)

docs/babel-macros.md

@@ -0,0 +1,11 @@
+## Usage with babel-macros
+
+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 { css, keyframes, fontFace, injectGlobal, flush, hydrate } from 'emotion/macro'
+import vueStyled from 'emotion/vue/macro'
+```
+
+For some context, check out this [issue](https://github.com/facebookincubator/create-react-app/issues/2730).

macro.js

@@ -0,0 +1 @@
+module.exports = require('./lib/macro')

package.json

@@ -10,8 +10,9 @@
     "lib",
     "react",
     "server.js",
-    "vue.js",
-    "dist/DO-NOT-USE.min.js"
+    "vue",
+    "dist/DO-NOT-USE.min.js",
+    "macro.js"
   ],
   "scripts": {
     "build": "babel src -d lib",
@@ -44,6 +45,7 @@
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
+    "babel-macros": "^0.5.2",
     "babel-preset-env": "^1.5.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",

react/macro.js

@@ -0,0 +1 @@
+module.exports = require('../lib/react/macro')

src/babel-utils.js

@@ -0,0 +1,51 @@
+import { keys } from './utils'
+import forEach from '@arr/foreach'
+
+export function getIdentifierName (path, t) {
+  const parent = path.findParent(p => p.isVariableDeclarator())
+  return parent && t.isIdentifier(parent.node.id) ? parent.node.id.name : ''
+}
+
+export function getRuntimeImportPath (path, t) {
+  const binding = path.scope.getBinding(path.node.name)
+  if (!t.isImportDeclaration(binding.path.parentPath)) {
+    throw binding.path.buildCodeFrameError(
+      'the emotion macro must be imported with es modules'
+    )
+  }
+  const importPath = binding.path.parentPath.node.source.value
+  return importPath.match(/(.*)\/macro/)[1]
+}
+
+export function buildMacroRuntimeNode (path, state, importName, t) {
+  const runtimeImportPath = getRuntimeImportPath(path, t)
+  if (state.emotionImports === undefined) state.emotionImports = {}
+  if (state.emotionImports[runtimeImportPath] === undefined) { state.emotionImports[runtimeImportPath] = {} }
+  if (state.emotionImports[runtimeImportPath][importName] === undefined) {
+    state.emotionImports[runtimeImportPath][
+      importName
+    ] = path.scope.generateUidIdentifier(path.node.name)
+  }
+  return state.emotionImports[runtimeImportPath][importName]
+}
+
+export function addRuntimeImports (state, t) {
+  if (state.emotionImports === undefined) return
+  forEach(keys(state.emotionImports), importPath => {
+    const importSpecifiers = []
+    forEach(keys(state.emotionImports[importPath]), importName => {
+      const identifier = state.emotionImports[importPath][importName]
+      if (importName === 'default') {
+        importSpecifiers.push(t.importDefaultSpecifier(identifier))
+      } else {
+        importSpecifiers.push(
+          t.importSpecifier(identifier, t.identifier(importName))
+        )
+      }
+    })
+    state.file.path.node.body.unshift(
+      t.importDeclaration(importSpecifiers, t.stringLiteral(importPath))
+    )
+  })
+  state.emotionImports = undefined
+}