Configurable imports (#290)

* Custom default import

Basically this is a POC that proves that this works without extra
configuration. Breaks no existing tests. Only works for `styled`
calls.

```js
import lol from 'emotion';

lol`color:blue`;
```

* Move ImportDeclaration; state.importedNames

Set importedNames on state and merge with babel opts.

* rename css in prop, template literal, and function call

* change "default" config to "styled"

* Move import parsing to `Program` visitor

* Remove ImportDeclaration visitor
* Remove parseImports
* Move import naming logic to `Program`

* more tests

* preliminary docs

* typo fix in docs

* more doc fixes

* eslint --fix

Author: ChristopherBiscardi

docs/configurable-imports.md

@@ -0,0 +1,107 @@
+# Configurable Imports
+
+If you are using ES Module imports (`import styled from
+'react-emotion'`) the emotion babel plugin can handle two types of
+import renaming.
+
+## Dynamic
+
+```js
+import something, { css as cows } from 'react-emotion';
+
+const classes = cows`
+  color: red;
+`
+
+export default something.div`
+  background: blue;
+`
+```
+
+## Babel Opts
+
+The emotion babel plugin can also handle using babel options to handle
+processing via the `importedNames` key. This is useful for targetting
+a prop other than `css` for processing.
+
+```js
+{
+  "plugins": [
+    ["emotion", { "importedNames": { "css": 'cows' }}]
+  ]
+}
+```
+
+Beware that if you use the babel configuration, you must import as the
+same name. In the previous example, we would have to `import { css as
+cows } from 'emotion';` then use `cows` to construct the template
+literals. 
+
+# Use Case
+
+One use case for this functionality is to migrate incrementally from a
+styled-jsx application. When compiling the following file with emotion
+and styled-jsx.
+
+```js
+import styled, { css } from "react-emotion";
+
+export default () => (
+  <div>
+    <p>only this paragraph will get the style :)</p>
+    {/* you can include <Component />s here that include
+         other <p>s that don't get unexpected styles! */}
+    <style jsx>{`
+      p {
+        color: red;
+      }
+    `}</style>
+  </div>
+);
+```
+
+The old combination would conflict on the `css` prop that styled-jsx
+outputs.
+
+```js
+import _JSXStyle from "styled-jsx/style";
+import styled, { css } from "react-emotion";
+
+export default (() => <div data-jsx={2648947580}>
+    <p data-jsx={2648947580}>only this paragraph will get the style :)</p>
+    {}
+    <_JSXStyle styleId={2648947580} className={/*#__PURE__*/_css([], [], function createEmotionStyledRules() {
+    return [{
+      "p[data-jsx=\"2648947580\"]": {
+        "color": "red"
+      }
+    }];
+  })} />
+  </div>);
+```
+
+By adding the babel opt config rename as such.
+
+```js
+{
+  "plugins": [
+    "styled-jsx/babel",
+    ["emotion", { "importedNames": { "css": 'cows' }}]
+  ]
+}
+```
+
+We can avoid re-compiling the `css` props and instead use `cows` for
+our template literals, etc.
+
+```js
+import _JSXStyle from "styled-jsx/style";
+import styled, { css as cows } from "react-emotion";
+
+export default (() => <div data-jsx={2648947580}>
+    <p data-jsx={2648947580}>only this paragraph will get the style :)</p>
+    {}
+    <_JSXStyle styleId={2648947580} css={"p[data-jsx=\"2648947580\"]{color:red}"} />
+  </div>);
+```
+

packages/babel-plugin-emotion/src/css-prop.js

@@ -10,7 +10,7 @@ export default function(path, state, t) {
     const attrPath = openElPath.get('name')
     const name = attrPath.node.name
 
-    if (name === 'css') {
+    if (name === state.importedNames.css) {
       cssPath = attrPath
     }
 
@@ -91,11 +91,13 @@ export default function(path, state, t) {
   function getCssIdentifer() {
     if (state.opts.autoImportCssProp !== false) {
       if (!state.cssPropIdentifier) {
-        state.cssPropIdentifier = path.scope.generateUidIdentifier('css')
+        state.cssPropIdentifier = path.scope.generateUidIdentifier(
+          state.importedNames.css
+        )
       }
       return state.cssPropIdentifier
     } else {
-      return t.identifier('css')
+      return t.identifier(state.importedNames.css)
     }
   }
   function createCssTemplateExpression(templateLiteral) {

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

@@ -228,6 +228,11 @@ export function replaceCssObjectCallExpression(path, identifier, t) {
 
 const visited = Symbol('visited')
 
+const defaultImportedNames = {
+  styled: 'styled',
+  css: 'css'
+}
+
 export default function(babel) {
   const { types: t } = babel
 
@@ -237,6 +242,30 @@ export default function(babel) {
     visitor: {
       Program: {
         enter(path, state) {
+          state.importedNames = {
+            ...defaultImportedNames,
+            ...state.opts.importedNames
+          }
+          state.file.metadata.modules.imports.forEach(
+            ({ source, imported, specifiers }) => {
+              if (source.indexOf('emotion') !== -1) {
+                const importedNames = specifiers
+                  .filter(v => ['default', 'css'].includes(v.imported))
+                  .reduce(
+                    (acc, { imported, local }) => ({
+                      ...acc,
+                      [imported === 'default' ? 'styled' : imported]: local
+                    }),
+                    defaultImportedNames
+                  )
+                state.importedNames = {
+                  ...importedNames,
+                  ...state.opts.importedNames
+                }
+              }
+            }
+          )
+
           state.extractStatic =
             // path.hub.file.opts.filename !== 'unknown' ||
             state.opts.extractStatic
@@ -295,10 +324,10 @@ export default function(babel) {
         try {
           if (
             (t.isCallExpression(path.node.callee) &&
-              path.node.callee.callee.name === 'styled') ||
+              path.node.callee.callee.name === state.importedNames.styled) ||
             (t.isMemberExpression(path.node.callee) &&
               t.isIdentifier(path.node.callee.object) &&
-              path.node.callee.object.name === 'styled')
+              path.node.callee.object.name === state.importedNames.styled)
           ) {
             const identifier = t.isCallExpression(path.node.callee)
               ? path.node.callee.callee
@@ -308,11 +337,15 @@ export default function(babel) {
             )
           }
           if (
-            path.node.callee.name === 'css' &&
+            path.node.callee.name === state.importedNames.css &&
             !path.node.arguments[1] &&
             path.node.arguments[0]
           ) {
-            replaceCssObjectCallExpression(path, t.identifier('css'), t)
+            replaceCssObjectCallExpression(
+              path,
+              t.identifier(state.importedNames.css),
+              t
+            )
           }
         } catch (e) {
           throw path.buildCodeFrameError(e)
@@ -324,7 +357,7 @@ export default function(babel) {
         if (
           // styled.h1`color:${color};`
           t.isMemberExpression(path.node.tag) &&
-          path.node.tag.object.name === 'styled'
+          path.node.tag.object.name === state.importedNames.styled
         ) {
           path.replaceWith(
             buildStyledCallExpression(
@@ -338,7 +371,7 @@ export default function(babel) {
         } else if (
           // styled('h1')`color:${color};`
           t.isCallExpression(path.node.tag) &&
-          path.node.tag.callee.name === 'styled'
+          path.node.tag.callee.name === state.importedNames.styled
         ) {
           path.replaceWith(
             buildStyledCallExpression(
@@ -350,8 +383,13 @@ export default function(babel) {
             )
           )
         } else if (t.isIdentifier(path.node.tag)) {
-          if (path.node.tag.name === 'css') {
-            replaceCssWithCallExpression(path, t.identifier('css'), state, t)
+          if (path.node.tag.name === state.importedNames.css) {
+            replaceCssWithCallExpression(
+              path,
+              t.identifier(state.importedNames.css),
+              state,
+              t
+            )
           } else if (path.node.tag.name === 'keyframes') {
             replaceCssWithCallExpression(
               path,

packages/babel-plugin-emotion/test/__snapshots__/css-prop.test.js.snap

@@ -97,6 +97,15 @@ exports[`babel css prop noClassName 1`] = `
 })}></div>;"
 `;
 
+exports[`babel css prop redefined-import: basic inline 1`] = `
+"import { css as _cows } from \\"emotion\\";
+<div className={\\"a\\" + \\" \\" + /*#__PURE__*/_cows([], [], function createEmotionStyledRules() {
+  return [{
+    \\"color\\": \\"brown\\"
+  }];
+})}></div>;"
+`;
+
 exports[`babel css prop with spread arg in jsx opening tag 1`] = `
 "import { css as _css } from \\"emotion\\";
 <div className={\\"a\\" + \\" \\" + /*#__PURE__*/_css([], [], function createEmotionStyledRules() {

packages/babel-plugin-emotion/test/__snapshots__/css.test.js.snap

@@ -94,6 +94,12 @@ css({
 });"
 `;
 
+exports[`babel css extract dynamically renamed-import: basic object support 1`] = `
+"import { css as cows } from 'emotion';cows({
+  'display': '-webkit-box; display: -ms-flexbox; display: flex'
+});"
+`;
+
 exports[`babel css extract prefixed array of objects 1`] = `
 "
 css([{
@@ -127,6 +133,12 @@ css({
 });"
 `;
 
+exports[`babel css extract renamed-import: basic object support 1`] = `
+"cows({
+  'display': '-webkit-box; display: -ms-flexbox; display: flex'
+});"
+`;
+
 exports[`babel css inline ::placeholder 1`] = `
 "
 const cls1 = css({
@@ -259,6 +271,43 @@ exports[`babel css inline css basic 1`] = `
 });"
 `;
 
+exports[`babel css inline css basic 2`] = `
+"
+/*#__PURE__*/cows([], [widthVar], function createEmotionStyledRules(x0) {
+  return [{
+    \\"margin\\": \\"12px 48px\\",
+    \\"color\\": \\"#ffffff; color: blue\\",
+    \\"display\\": \\"-webkit-box; display: -ms-flexbox; display: flex\\",
+    \\"WebkitBoxFlex\\": \\"1\\",
+    \\"msFlex\\": \\"1 0 auto\\",
+    \\"flex\\": \\"1 0 auto\\",
+    \\"@media (min-width: 420px)\\": {
+      \\"lineHeight\\": \\"40px\\"
+    },
+    \\"width\\": x0
+  }];
+});"
+`;
+
+exports[`babel css inline css basic 3`] = `
+"
+import { css as cows } from 'emotion';
+/*#__PURE__*/cows([], [widthVar], function createEmotionStyledRules(x0) {
+  return [{
+    'margin': '12px 48px',
+    'color': '#ffffff; color: blue',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex',
+    'WebkitBoxFlex': '1',
+    'msFlex': '1 0 auto',
+    'flex': '1 0 auto',
+    '@media (min-width: 420px)': {
+      'lineHeight': '40px'
+    },
+    'width': x0
+  }];
+});"
+`;
+
 exports[`babel css inline css random expression 1`] = `
 "/*#__PURE__*/css([], [/*#__PURE__*/css([], [], function createEmotionStyledRules() {
   return [{

packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap

@@ -317,3 +317,19 @@ const Figure = styled(\\"figure\\", \\"css-Figure-1mp0w960\\", [{
   ...defaultText
 }]);"
 `;
+
+exports[`babel styled component renamed import: inline config rename 1`] = `
+"/*#__PURE__*/what(\\"h1\\", \\"css-1jhrj9p0\\", [], [], function createEmotionStyledRules() {
+  return {
+    \\"color\\": \\"blue\\"
+  };
+});"
+`;
+
+exports[`babel styled component renamed import: inline variable import: no dynamic 1`] = `
+"import what from 'emotion'; /*#__PURE__*/what('h1', 'css-nl5a7v0', [], [], function createEmotionStyledRules() {
+  return {
+    'color': 'blue'
+  };
+});"
+`;

packages/babel-plugin-emotion/test/css-prop.test.js

@@ -117,4 +117,12 @@ describe('babel css prop', () => {
     })
     expect(code).toMatchSnapshot()
   })
+
+  test('redefined-import: basic inline', () => {
+    const basic = '(<div className="a" cows={`color: brown;`}></div>)'
+    const { code } = babel.transform(basic, {
+      plugins: [[plugin, { importedNames: { css: 'cows' } }]]
+    })
+    expect(code).toMatchSnapshot()
+  })
 })