Repository: styled-components/babel-plugin-styled-components
Pull request #354 (2021-09-13 21:16:17)

Change topLevelPaths option to take a regexp pattern
This allows for local imports like ../../resources/styled where the relative path changes so the existing pattern doesn't work.



Patch:
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
index 94d4101..65c5bf3 100644
--- a/src/utils/detectors.js
+++ b/src/utils/detectors.js
@@ -1,16 +1,19 @@
-import { useTopLevelImportPaths } from './options'
+import escapeRegExp from 'lodash/escapeRegExp'
+import { useTopLevelImportPathMatchers } from './options'
 
-const VALID_TOP_LEVEL_IMPORT_PATHS = [
+const VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS = [
   'styled-components',
   'styled-components/no-tags',
   'styled-components/native',
   'styled-components/primitives',
-]
+].map(literal => new RegExp(`^${escapeRegExp(literal)}$`))
 
-export const isValidTopLevelImport = (x, state) =>
-  [...VALID_TOP_LEVEL_IMPORT_PATHS, ...useTopLevelImportPaths(state)].includes(
-    x
-  )
+export const isValidTopLevelImport = (x, state) => {
+  return [
+    ...VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS,
+    ...useTopLevelImportPathMatchers(state),
+  ].some(re => re.test(x));
+}
 
 const localNameCache = {}
 
diff --git a/src/utils/options.js b/src/utils/options.js
index 1b52917..e653545 100644
--- a/src/utils/options.js
+++ b/src/utils/options.js
@@ -5,8 +5,8 @@ function getOption({ opts }, name, defaultValue = true) {
 }
 
 export const useDisplayName = state => getOption(state, 'displayName')
-export const useTopLevelImportPaths = state =>
-  getOption(state, 'topLevelImportPaths', [])
+export const useTopLevelImportPathMatchers = state =>
+  getOption(state, 'topLevelImportPaths', []).map(pattern => new RegExp(pattern))
 export const useSSR = state => getOption(state, 'ssr', true)
 export const useFileName = state => getOption(state, 'fileName')
 export const useMinify = state => getOption(state, 'minify')
diff --git a/src/visitors/minify.js b/src/visitors/minify.js
index d3b5235..b0140b6 100644
--- a/src/visitors/minify.js
+++ b/src/visitors/minify.js
@@ -14,10 +14,8 @@ export default t => (path, state) => {
       templateLiteral.quasis.map(x => x.value.raw)
     )
 
-    const [
-      cookedValuesMinfified,
-      eliminatedExpressionIndices,
-    ] = minifyCookedValues(templateLiteral.quasis.map(x => x.value.cooked))
+    const [cookedValuesMinfified, eliminatedExpressionIndices] =
+      minifyCookedValues(templateLiteral.quasis.map(x => x.value.cooked))
 
     eliminatedExpressionIndices.forEach((expressionIndex, iteration) => {
       templateLiteral.expressions.splice(expressionIndex - iteration, 1)


Test patch:
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc
index 63576b5..4d65988 100644
--- a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc
+++ b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc
@@ -6,7 +6,7 @@
         "displayName": true,
         "fileName": false,
         "ssr": true,
-        "topLevelImportPaths": ["@example/example"],
+        "topLevelImportPaths": [".*\/example$"],
         "transpileTemplateLiterals": false
       }
     ]
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js
index e26d3c7..cc95461 100644
--- a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js
+++ b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js
@@ -1,4 +1,4 @@
-import { styled } from '@example/example'
+import { styled } from '../../relative/example'
 
 const Test = styled.div`
   width: 100%;
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
index 968d01b..6b98714 100644
--- a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
+++ b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
@@ -1,4 +1,4 @@
-import { styled } from '@example/example';
+import { styled } from '../../relative/example';
 const Test = styled.div.withConfig({
   displayName: "Test",
   componentId: "sc-elhbfv-0"
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths/.babelrc b/test/fixtures/add-identifier-with-top-level-import-paths/.babelrc
index ef8b91b..9a4e75d 100644
--- a/test/fixtures/add-identifier-with-top-level-import-paths/.babelrc
+++ b/test/fixtures/add-identifier-with-top-level-import-paths/.babelrc
@@ -8,9 +8,7 @@
         "ssr": true,
         "topLevelImportPaths": [
           "@xstyled/styled-components",
-          "@xstyled/styled-components/no-tags",
-          "@xstyled/styled-components/native",
-          "@xstyled/styled-components/primitives"
+          "@xstyled/styled-components/*"
         ],
         "transpileTemplateLiterals": false
       }
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths/code.js b/test/fixtures/add-identifier-with-top-level-import-paths/code.js
index b03b6c1..905b6d7 100644
--- a/test/fixtures/add-identifier-with-top-level-import-paths/code.js
+++ b/test/fixtures/add-identifier-with-top-level-import-paths/code.js
@@ -1,4 +1,4 @@
-import styled from '@xstyled/styled-components'
+import styled from '@xstyled/styled-components/test'
 
 const Test = styled.div`
   width: 100%;
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths/output.js b/test/fixtures/add-identifier-with-top-level-import-paths/output.js
index 7cdb572..e6e909c 100644
--- a/test/fixtures/add-identifier-with-top-level-import-paths/output.js
+++ b/test/fixtures/add-identifier-with-top-level-import-paths/output.js
@@ -1,4 +1,4 @@
-import styled from '@xstyled/styled-components';
+import styled from '@xstyled/styled-components/test';
 const Test = styled.div.withConfig({
   componentId: "sc-1mlyrvc-0"
 })`width:100%;`;