Use @babel/helper-module-import

Author: Max Stoiber

package.json

@@ -27,6 +27,7 @@
   },
   "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/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) => {
@@ -19,29 +20,17 @@ export default t => (path, state) => {
   if (path.node.name.name !== 'css') return
 
   const program = state.file.path
-  const importName =
-    state.customImportName || program.scope.generateUidIdentifier('styled')
-  if (!state.customImportName) state.customImportName = importName
-  // Insert require('styled-components') if it doesn't exist yet
+  // 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 (!state.required) {
-    if (!bindings[importName]) {
-      program.node.body.push(
-        t.variableDeclaration('var', [
-          t.variableDeclarator(
-            importName,
-            t.memberExpression(
-              t.callExpression(t.identifier('require'), [
-                t.stringLiteral('styled-components'),
-              ]),
-              t.identifier('default')
-            )
-          ),
-        ])
-      )
-    }
-    state.required = true
+  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)

test/__snapshots__/index.test.js.snap

@@ -508,6 +508,10 @@ function _templateObject4() {
   return data;
 }
 
+var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _templateObject3() {
   var data = _taggedTemplateLiteral([\\"\\\\n      color: \\", \\";\\\\n    \\"]);
 
@@ -621,47 +625,45 @@ var NestedCompWithDot = function NestedCompWithDot(p) {
   return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
 };
 
-var _styled = require(\\"styled-components\\").default;
+var _StyledP = (0, _styledComponents.default)(\\"p\\")(_templateObject4());
 
-var _StyledP = _styled(\\"p\\")(_templateObject4());
+var _StyledP2 = (0, _styledComponents.default)(\\"p\\")(_templateObject5());
 
-var _StyledP2 = _styled(\\"p\\")(_templateObject5());
-
-var _StyledP3 = _styled(\\"p\\")(_templateObject6(), function (p) {
+var _StyledP3 = (0, _styledComponents.default)(\\"p\\")(_templateObject6(), function (p) {
   return p._css;
 });
 
-var _StyledP4 = _styled(\\"p\\")(_templateObject7());
+var _StyledP4 = (0, _styledComponents.default)(\\"p\\")(_templateObject7());
 
-var _StyledP5 = _styled(\\"p\\")(_templateObject8());
+var _StyledP5 = (0, _styledComponents.default)(\\"p\\")(_templateObject8());
 
-var _StyledParagraph = _styled(Paragraph)(_templateObject9());
+var _StyledParagraph = (0, _styledComponents.default)(Paragraph)(_templateObject9());
 
-var _StyledP6 = _styled(\\"p\\")(_templateObject10(), function (p) {
+var _StyledP6 = (0, _styledComponents.default)(\\"p\\")(_templateObject10(), function (p) {
   return p._css2;
 });
 
-var _StyledP7 = _styled(\\"p\\")(_templateObject11(), function (p) {
+var _StyledP7 = (0, _styledComponents.default)(\\"p\\")(_templateObject11(), function (p) {
   return p._css3;
 });
 
-var _StyledP8 = _styled(\\"p\\")(_templateObject12(), function (props) {
+var _StyledP8 = (0, _styledComponents.default)(\\"p\\")(_templateObject12(), function (props) {
   return props.theme.a;
 });
 
-var _StyledP9 = _styled(\\"p\\")(_templateObject13(), radius);
+var _StyledP9 = (0, _styledComponents.default)(\\"p\\")(_templateObject13(), radius);
 
-var _StyledP10 = _styled(\\"p\\")(_templateObject14(), function (p) {
+var _StyledP10 = (0, _styledComponents.default)(\\"p\\")(_templateObject14(), function (p) {
   return p._css4;
 });
 
-var _StyledP11 = _styled(\\"p\\")(_templateObject15(), function (props) {
+var _StyledP11 = (0, _styledComponents.default)(\\"p\\")(_templateObject15(), function (props) {
   return props.theme.color;
 });
 
-var _StyledButtonGhost = _styled(Button.Ghost)(_templateObject16());
+var _StyledButtonGhost = (0, _styledComponents.default)(Button.Ghost)(_templateObject16());
 
-var _StyledButtonGhostNew = _styled(Button.Ghost.New)(_templateObject17());"
+var _StyledButtonGhostNew = (0, _styledComponents.default)(Button.Ghost.New)(_templateObject17());"
 `;
 
 exports[`fixtures should transpile css prop add import 1`] = `
@@ -684,6 +686,8 @@ 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\\"));
@@ -708,9 +712,7 @@ var _default = function _default() {
 
 exports.default = _default;
 
-var _styled = require(\\"styled-components\\").default;
-
-var _StyledDiv = _styled(\\"div\\")(_templateObject());"
+var _StyledDiv = (0, _styledComponents.default)(\\"div\\")(_templateObject());"
 `;
 
 exports[`fixtures should transpile require default 1`] = `

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"