Merge pull request #3432 from agriffis/legacy-v5

Cherry pick macro fix and feature to legacy-v5

CHANGELOG.md

@@ -8,6 +8,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 - For React Native based components, pass `testID` down to the native component if specified for an easier time testing. (see [#3365](https://github.com/styled-components/styled-components/pull/3365))
 
+- 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.1] - 2020-10-30
 
 - Tweak server-side build settings to resolve an issue with jest-dom not being able to pick up generated styles (see [#3308](https://github.com/styled-components/styled-components/pull/3308)) thanks @Lazyuki

packages/styled-components/package.json

@@ -68,7 +68,7 @@
     "@emotion/is-prop-valid": "^0.8.8",
     "@emotion/stylis": "^0.8.4",
     "@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

@@ -12,6 +12,24 @@ styled.div\`
 
 import _styled from \\"styled-components\\";
 
+_styled.div.withConfig({
+  displayName: \\"macrotest\\"
+})([\\"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\\"

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

@@ -1,10 +1,7 @@
-import cosmiconfigMock from 'cosmiconfig';
 import babel from '@babel/core';
 import pluginTester from 'babel-plugin-tester';
 import plugin from 'babel-plugin-macros';
 
-jest.mock('cosmiconfig', () => jest.fn(require.requireActual('cosmiconfig')));
-
 const styledExampleCode = `
 import styled from '../../macro'
 
@@ -153,21 +150,23 @@ pluginTester({
     },
     'should not add componentId with a config disabling ssr': {
       code: styledExampleCode,
-      setup: () => {
-        cosmiconfigMock.mockImplementationOnce(() => ({
-          searchSync: () => ({
-            config: {
-              styledComponents: {
-                ssr: false,
-              },
-            },
-          }),
-        }));
+      pluginOptions: {
+        styledComponents: {
+          ssr: false,
+        },
       },
     },
     'should work with the css prop': { code: cssPropExampleCode },
     '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

@@ -2225,6 +2225,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"
@@ -10645,7 +10655,7 @@ style-loader@^0.23.1:
     "@emotion/is-prop-valid" "^0.8.8"
     "@emotion/stylis" "^0.8.4"
     "@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"