Merge pull request #3422 from agriffis/feat/macro-importModuleName

feat: macro can customize importModuleName

CHANGELOG.md

@@ -10,6 +10,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 - Upgrade to stylis v4
 
+- Enable users of the babel macro to customize the styled-components import with `importModuleName` (see [#3422](https://github.com/styled-components/styled-components/pull/3422))
+
 ## [v5.2.0] - 2020-09-04
 
 - Make sure `StyleSheetManager` renders all styles in iframe / child windows (see [#3159](https://github.com/styled-components/styled-components/pull/3159)) thanks @eramdam!

packages/styled-components/package.json

@@ -66,7 +66,7 @@
     "@babel/traverse": "^7.4.5",
     "@emotion/is-prop-valid": "^0.8.8",
     "@emotion/unitless": "^0.7.4",
-    "babel-plugin-styled-components": ">= 1",
+    "babel-plugin-styled-components": ">= 1.12.0",
     "css-to-react-native": "^3.0.0",
     "hoist-non-react-statics": "^3.0.0",
     "shallowequal": "^1.1.0",

packages/styled-components/src/macro/index.js

@@ -4,7 +4,12 @@ import traverse from '@babel/traverse';
 import { createMacro } from 'babel-plugin-macros';
 import babelPlugin from 'babel-plugin-styled-components';
 
-function styledComponentsMacro({ references, state, babel: { types: t }, config = {} }) {
+function styledComponentsMacro({
+  references,
+  state,
+  babel: { types: t },
+  config: { importModuleName = 'styled-components', ...config } = {},
+}) {
   const program = state.file.path;
 
   // FIRST STEP : replace `styled-components/macro` by `styled-components
@@ -15,10 +20,10 @@ function styledComponentsMacro({ references, state, babel: { types: t }, config
     // generate new identifier
     let id;
     if (refName === 'default') {
-      id = addDefault(program, 'styled-components', { nameHint: 'styled' });
+      id = addDefault(program, importModuleName, { nameHint: 'styled' });
       customImportName = id;
     } else {
-      id = addNamed(program, refName, 'styled-components', { nameHint: refName });
+      id = addNamed(program, refName, importModuleName, { nameHint: refName });
     }
 
     // update references with the new identifiers
@@ -29,7 +34,14 @@ function styledComponentsMacro({ references, state, babel: { types: t }, config
   });
 
   // SECOND STEP : apply babel-plugin-styled-components to the file
-  const stateWithOpts = { ...state, opts: config, customImportName };
+  const stateWithOpts = {
+    ...state,
+    opts: {
+      ...config,
+      topLevelImportPaths: (config.topLevelImportPaths || []).concat(importModuleName),
+    },
+    customImportName,
+  };
   traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);
 }
 

packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap

@@ -17,6 +17,26 @@ _styled.div.withConfig({
 })(['background:', ';'], p => (p.error ? 'red' : 'green'));
 
 
+`;
+
+exports[`macro should use a custom import with importModuleName: should use a custom import with importModuleName 1`] = `
+
+import styled from '../../macro'
+
+styled.div\`
+  background: \${p => (p.error ? 'red' : 'green')};
+\`
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from '@xstyled/styled-components';
+
+_styled.div.withConfig({
+  displayName: 'macrotest',
+  componentId: 'sc-11gvsec-0',
+})(['background:', ';'], p => (p.error ? 'red' : 'green'));
+
+
 `;
 
 exports[`macro should work when extending a component: should work when extending a component 1`] = `

packages/styled-components/src/macro/test/macro.test.js

@@ -160,5 +160,13 @@ pluginTester({
     'should work with the css prop overriding an existing styled-component': {
       code: cssPropOverridingComponentExampleCode,
     },
+    'should use a custom import with importModuleName': {
+      code: styledExampleCode,
+      pluginOptions: {
+        styledComponents: {
+          importModuleName: '@xstyled/styled-components',
+        },
+      },
+    },
   },
 });

yarn.lock

@@ -2433,11 +2433,6 @@ axobject-query@^2.1.2:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-core@^7.0.0-bridge.0:
-  version "7.0.0-bridge.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
-  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
-
 babel-eslint@^10.0.1:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2548,6 +2543,16 @@ babel-plugin-react-native-web@^0.11.4:
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.11"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
+  integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
+  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.11"
+
 babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -10881,7 +10886,7 @@ style-loader@^0.23.1:
     "@babel/traverse" "^7.4.5"
     "@emotion/is-prop-valid" "^0.8.8"
     "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1"
+    babel-plugin-styled-components ">= 1.12.0"
     css-to-react-native "^3.0.0"
     hoist-non-react-statics "^3.0.0"
     shallowequal "^1.1.0"