Add topLevelImportPaths option (#288)

Co-authored-by: Stefen Alper <stefen.alper@gmail.com>

src/utils/detectors.js

@@ -1,12 +1,16 @@
+import { useTopLevelImportPaths } from './options'
+
 const VALID_TOP_LEVEL_IMPORT_PATHS = [
   'styled-components',
   'styled-components/no-tags',
   'styled-components/native',
   'styled-components/primitives',
 ]
 
-export const isValidTopLevelImport = x =>
-  VALID_TOP_LEVEL_IMPORT_PATHS.includes(x)
+export const isValidTopLevelImport = (x, state) =>
+  [...VALID_TOP_LEVEL_IMPORT_PATHS, ...useTopLevelImportPaths(state)].includes(
+    x
+  )
 
 const localNameCache = {}
 
@@ -28,7 +32,7 @@ export const importLocalName = (name, state, bypassCache = false) => {
       exit(path) {
         const { node } = path
 
-        if (isValidTopLevelImport(node.source.value)) {
+        if (isValidTopLevelImport(node.source.value, state)) {
           for (const specifier of path.get('specifiers')) {
             if (specifier.isImportDefaultSpecifier()) {
               localName = specifier.node.local.name
@@ -107,7 +111,9 @@ export const isWithThemeHelper = t => (tag, state) =>
   t.isIdentifier(tag) && tag.name === importLocalName('withTheme', state)
 
 export const isHelper = t => (tag, state) =>
-  isCSSHelper(t)(tag, state) || isKeyframesHelper(t)(tag, state) || isWithThemeHelper(t)(tag, state)
+  isCSSHelper(t)(tag, state) ||
+  isKeyframesHelper(t)(tag, state) ||
+  isWithThemeHelper(t)(tag, state)
 
 export const isPureHelper = t => (tag, state) =>
   isCSSHelper(t)(tag, state) ||

src/utils/options.js

@@ -5,6 +5,8 @@ function getOption({ opts }, name, defaultValue = true) {
 }
 
 export const useDisplayName = state => getOption(state, 'displayName')
+export const useTopLevelImportPaths = state =>
+  getOption(state, 'topLevelImportPaths', [])
 export const useSSR = state => getOption(state, 'ssr', true)
 export const useFileName = state => getOption(state, 'fileName')
 export const useMinify = state => getOption(state, 'minify')

src/visitors/assignStyledRequired.js

@@ -8,7 +8,7 @@ export default t => (path, state) => {
     path.node.init.arguments &&
     path.node.init.arguments[0] &&
     t.isLiteral(path.node.init.arguments[0]) &&
-    isValidTopLevelImport(path.node.init.arguments[0].value)
+    isValidTopLevelImport(path.node.init.arguments[0].value, state)
   ) {
     state.styledRequired = path.node.id.name
   }

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

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "displayName": false,
+        "fileName": false,
+        "ssr": true,
+        "topLevelImportPaths": [
+          "@xstyled/styled-components",
+          "@xstyled/styled-components/no-tags",
+          "@xstyled/styled-components/native",
+          "@xstyled/styled-components/primitives"
+        ],
+        "transpileTemplateLiterals": false
+      }
+    ]
+  ]
+}

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

@@ -0,0 +1,10 @@
+import styled from '@xstyled/styled-components'
+
+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-paths/output.js

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