From 7b1c3aaffec438a4c09619ccd771da083146fa11 Mon Sep 17 00:00:00 2001 From: Aron Griffis Date: Sat, 6 Mar 2021 07:40:34 -0500 Subject: [PATCH 1/2] fix macro test regression (#3420) We don't need the mock at all, because babel-plugin-tester provides pluginOptions to override. Cherry picked from https://github.com/styled-components/styled-components/commit/17d7e01e77bd74904186a507f54931464efb7b6a --- .../macro/test/__snapshots__/macro.test.js.snap | 3 +-- .../src/macro/test/macro.test.js | 17 ++++------------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap b/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap index 94422f990..7132fbe4d 100644 --- a/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap +++ b/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap @@ -13,8 +13,7 @@ styled.div\` import _styled from \\"styled-components\\"; _styled.div.withConfig({ - displayName: \\"macrotest\\", - componentId: \\"sc-11gvsec-0\\" + displayName: \\"macrotest\\" })([\\"background:\\", \\";\\"], p => p.error ? 'red' : 'green'); " `; diff --git a/packages/styled-components/src/macro/test/macro.test.js b/packages/styled-components/src/macro/test/macro.test.js index f3cf36be0..4ab320cb3 100644 --- a/packages/styled-components/src/macro/test/macro.test.js +++ b/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,16 +150,10 @@ 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 }, From 6661228cca99c3e28b184e377c87fc1e4340e8a9 Mon Sep 17 00:00:00 2001 From: Aron Griffis Date: Sat, 6 Mar 2021 08:11:07 -0500 Subject: [PATCH 2/2] 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 https://github.com/styled-components/babel-plugin-styled-components/commit/325167bb570362adfb5ff78aa84c460adeae32ac Fixes https://github.com/gregberge/xstyled/issues/44 Cherry picked from https://github.com/styled-components/styled-components/commit/83c8b0ccd023444529cb62c44000dae0cee246c9 --- CHANGELOG.md | 2 ++ packages/styled-components/package.json | 2 +- packages/styled-components/src/macro/index.js | 20 +++++++++++++++---- .../test/__snapshots__/macro.test.js.snap | 19 ++++++++++++++++++ .../src/macro/test/macro.test.js | 8 ++++++++ yarn.lock | 12 ++++++++++- 6 files changed, 57 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7849571ff..4e3928b04 100755 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json index 9a15c9656..13424d85c 100644 --- a/packages/styled-components/package.json +++ b/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", diff --git a/packages/styled-components/src/macro/index.js b/packages/styled-components/src/macro/index.js index b6285a7fd..74c3be92c 100644 --- a/packages/styled-components/src/macro/index.js +++ b/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); } diff --git a/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap b/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap index 7132fbe4d..a5dbee82b 100644 --- a/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap +++ b/packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap @@ -18,6 +18,25 @@ _styled.div.withConfig({ " `; +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`] = ` " import React from 'react' diff --git a/packages/styled-components/src/macro/test/macro.test.js b/packages/styled-components/src/macro/test/macro.test.js index 4ab320cb3..271a502a5 100644 --- a/packages/styled-components/src/macro/test/macro.test.js +++ b/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', + }, + }, + }, }, }); diff --git a/yarn.lock b/yarn.lock index 6e4312ea9..8c53b707f 100644 --- a/yarn.lock +++ b/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"