Merge pull request #181 from styled-components/make-css-prop-work-with-macro

Make the `css` prop work with the macro! 🎉

Author: mxstbr

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.9.4",
+  "version": "1.9.5-0",
   "name": "babel-plugin-styled-components",
   "description": "Improve the debugging experience and add server-side rendering support to styled-components",
   "repository": "styled-components/babel-plugin-styled-components",
@@ -20,13 +20,15 @@
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "babel-core": "7.0.0-bridge.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "jest": "^23.6.0",
     "prettier": "^1.14.2",
     "rimraf": "^2.6.2",
     "styled-components": "^4.0.0"
   },
   "dependencies": {
     "@babel/helper-annotate-as-pure": "^7.0.0",
+    "@babel/helper-module-imports": "^7.0.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "lodash": "^4.17.10"
   },

src/index.js

@@ -10,25 +10,6 @@ export default function({ types: t }) {
   return {
     inherits: syntax,
     visitor: {
-      // These visitors insert newly generated code and missing import/require statements
-      Program: {
-        enter(path, state) {
-          state.required = false
-          state.items = []
-        },
-        exit(path, state) {
-          const oldLength = path.node.body.length
-
-          path.node.body.push(...state.items)
-
-          const newLength = path.node.body.length
-
-          for (let i = 0; i < newLength - oldLength; i++) {
-            // Queue all inserted items for revisiting so that tagged templates are transpiled
-            path.requeue(path.get('body')[oldLength + i]);
-          }
-        },
-      },
       JSXAttribute(path, state) {
         transpileCssProp(t)(path, state)
       },

src/visitors/transpileCssProp.js

@@ -1,5 +1,6 @@
 // Most of this code was taken from @satya164's babel-plugin-css-prop
 // @see https://github.com/satya164/babel-plugin-css-prop
+import { addDefault } from '@babel/helper-module-imports'
 import { useCssProp } from '../utils/options'
 
 const getName = (node, t) => {
@@ -18,27 +19,26 @@ export default t => (path, state) => {
   if (!useCssProp(state)) return
   if (path.node.name.name !== 'css') return
 
-  // Insert require('styled-components') if it doesn't exist yet
-  const { bindings } = path.findParent(p => p.type === 'Program').scope
-  if (!state.required) {
-    if (!bindings.styled) {
-      state.items.push(
-        t.importDeclaration(
-          [t.importDefaultSpecifier(t.identifier('styled'))],
-          t.stringLiteral('styled-components')
-        )
-      )
-    }
-    state.required = true
+  const program = state.file.path
+  // state.customImportName is passed through from styled-components/macro if it's used
+  // since the macro also inserts the import
+  let importName = state.customImportName
+  // Insert import if it doesn't exist yet
+  const { bindings } = program.scope
+  if (!importName || !bindings[importName.name]) {
+    importName = addDefault(path, 'styled-components', {
+      nameHint: importName ? importName.name : 'styled',
+    })
   }
+  if (!state.customImportName) state.customImportName = importName
 
   const elem = path.parentPath
   const name = getName(elem.node.name, t)
   const id = path.scope.generateUidIdentifier(
     'Styled' + name.replace(/^([a-z])/, (match, p1) => p1.toUpperCase())
   )
 
-  const styled = t.callExpression(t.identifier('styled'), [
+  const styled = t.callExpression(importName, [
     /^[a-z]/.test(name) ? t.stringLiteral(name) : t.identifier(name),
   ])
 
@@ -105,9 +105,13 @@ export default t => (path, state) => {
     return acc
   }, [])
 
-  state.items.push(
+  // Add the tagged template expression and then requeue the newly added node
+  // so Babel runs over it again
+  const length = program.node.body.push(
     t.variableDeclaration('var', [
       t.variableDeclarator(id, t.taggedTemplateExpression(styled, css)),
     ])
   )
+
+  program.requeue(program.get('body')[length - 1])
 }

test/__snapshots__/index.test.js.snap

@@ -686,14 +686,14 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.default = void 0;
 
+var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
+
 var _react = _interopRequireDefault(require(\\"react\\"));
 
 var _Card = _interopRequireDefault(require(\\"../../shared/components/Card\\"));
 
 var _config = _interopRequireDefault(require(\\"../../../config\\"));
 
-var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // @flow
@@ -715,6 +715,31 @@ exports.default = _default;
 var _StyledDiv = (0, _styledComponents.default)(\\"div\\")(_templateObject());"
 `;
 
+exports[`fixtures should transpile css prop add require 1`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+
+var _styledComponents = require(\\"styled-components\\");
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _react = require(\\"react\\");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @flow
+exports.default = () => <_StyledDiv />;
+
+var _StyledDiv = (0, _styledComponents2.default)(\\"div\\")\`
+      width: 35em;
+    \`;"
+`;
+
 exports[`fixtures should transpile require default 1`] = `
 "const styled_default = require(\\"styled-components\\");
 

test/fixtures/transpile-css-prop-add-require/.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "transform-es2015-modules-commonjs",
+    [
+      "../../../src",
+      {
+        "ssr": false,
+        "displayName": false,
+        "transpileTemplateLiterals": false,
+        "minify": false,
+        "cssProp": true
+      }
+    ]
+  ]
+}

test/fixtures/transpile-css-prop-add-require/index.js

@@ -0,0 +1,10 @@
+// @flow
+import React from 'react'
+
+export default () => (
+  <div
+    css={`
+      width: 35em;
+    `}
+  />
+)

yarn.lock

@@ -147,7 +147,8 @@
 
 "@babel/helper-module-imports@^7.0.0":
   version "7.0.0"
-  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
   dependencies:
     "@babel/types" "^7.0.0"
 
@@ -907,6 +908,24 @@ babel-plugin-syntax-object-rest-spread@^6.13.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
 
+babel-plugin-transform-es2015-modules-commonjs@^6.26.2:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
 babel-preset-jest@^23.2.0:
   version "23.2.0"
   resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46"
@@ -931,7 +950,18 @@ babel-template@^6.16.0:
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.0.0:
+babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.0.0, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -959,7 +989,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.23.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.23.0, babel-types@^6.26.0:
+babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies: