feat: macro can customize importModuleName

If `styled` should come from a wrapper instead of directly from
styled-components, this enables users of the macro to customize the
import by configuring in `packages.json`:

    "babelMacros": {
      "styledComponents": {
        "importModuleName": "my-styled-components"
      }
    }

Previously similar functionality landed in
babel-plugin-styled-components so users of the plugin could use
a wrapper at that level, but it wasn't available to users of the macro.
This builds on that work by passing the customized module name through
to the plugin. Consequently we also update the dependency to ensure the
plugin supports `topLevelImportPaths`

See styled-components/babel-plugin-styled-components@325167b

Fixes styled-components/xstyled#44

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

@@ -18,6 +18,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

@@ -169,5 +169,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

@@ -2548,6 +2548,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"