Change topLevelPaths option to take a regexp pattern

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 = {}
 

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')

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/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
       }
     ]

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%;

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"

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
       }

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%;

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%;`;