Add topLevelPathPatterns option

This allows for local imports like ../../resources/styled where the relative path changes so the existing pattern doesn't work.

src/utils/detectors.js

@@ -1,4 +1,4 @@
-import { useTopLevelImportPaths } from './options'
+import { useTopLevelImportPaths, useTopLevelImportPathPatterns } from './options'
 
 const VALID_TOP_LEVEL_IMPORT_PATHS = [
   'styled-components',
@@ -7,10 +7,16 @@ const VALID_TOP_LEVEL_IMPORT_PATHS = [
   'styled-components/primitives',
 ]
 
-export const isValidTopLevelImport = (x, state) =>
-  [...VALID_TOP_LEVEL_IMPORT_PATHS, ...useTopLevelImportPaths(state)].includes(
-    x
-  )
+export const isValidTopLevelImport = (x, state) => {
+  const isValid = [...VALID_TOP_LEVEL_IMPORT_PATHS, ...useTopLevelImportPaths(state)].includes(x);
+  if (isValid) return true;
+  for (const pattern of useTopLevelImportPathPatterns(state)) {
+    if (pattern.test(x)) {
+      return x;
+    }
+  }
+  return false;
+}
 
 const localNameCache = {}
 

src/utils/options.js

@@ -7,6 +7,9 @@ function getOption({ opts }, name, defaultValue = true) {
 export const useDisplayName = state => getOption(state, 'displayName')
 export const useTopLevelImportPaths = state =>
   getOption(state, 'topLevelImportPaths', [])
+export const useTopLevelImportPathPatterns = state =>
+  getOption(state, 'topLevelImportPathPatterns', [])
+    .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')

test/fixtures/add-identifier-with-top-level-import-path-patterns-and-named-import/.babelrc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "displayName": true,
+        "fileName": false,
+        "ssr": true,
+        "topLevelImportPathPatterns": [".*/styled-components/native$"],
+        "transpileTemplateLiterals": false
+      }
+    ]
+  ]
+}

test/fixtures/add-identifier-with-top-level-import-path-patterns-and-named-import/code.js

@@ -0,0 +1,10 @@
+import { styled } from '@example/styled-components/native'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``

test/fixtures/add-identifier-with-top-level-import-path-patterns-and-named-import/output.js

@@ -0,0 +1,27 @@
+import { styled } from '@example/styled-components/native';
+const Test = styled.div.withConfig({
+  displayName: "Test",
+  componentId: "sc-qtkc3x-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-qtkc3x-1"
+})`` : styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-qtkc3x-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    displayName: "One",
+    componentId: "sc-qtkc3x-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  displayName: "Component",
+  componentId: "sc-qtkc3x-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  displayName: "WrappedComponent",
+  componentId: "sc-qtkc3x-5"
+})``;

test/fixtures/add-identifier-with-top-level-import-path-patterns/.babelrc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "displayName": false,
+        "fileName": false,
+        "ssr": true,
+        "topLevelImportPathPatterns": [".*/styled$"],
+        "transpileTemplateLiterals": false
+      }
+    ]
+  ]
+}

test/fixtures/add-identifier-with-top-level-import-path-patterns/code.js

@@ -0,0 +1,10 @@
+import styled from '../../forked/qux-bar/styled'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``

test/fixtures/add-identifier-with-top-level-import-path-patterns/output.js

@@ -0,0 +1,21 @@
+import styled from '../../forked/qux-bar/styled';
+const Test = styled.div.withConfig({
+  componentId: "sc-c384rv-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  componentId: "sc-c384rv-1"
+})`` : styled.div.withConfig({
+  componentId: "sc-c384rv-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    componentId: "sc-c384rv-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  componentId: "sc-c384rv-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  componentId: "sc-c384rv-5"
+})``;