do not try to transpile things we don't own (#230)

quantizor · web-flow · commit 4e28bb9edca3 · 2019-06-27T13:22:50.000-05:00
* add failing test

* do not try to transpile things we don't own

* a little extra proof that the variable from s-c is tracked properly
diff --git a/src/index.js b/src/index.js
@@ -16,6 +16,9 @@ export default function({ types: t }) {
             JSXAttribute(path, state) {
               transpileCssProp(t)(path, state)
             },
+            VariableDeclarator(path, state) {
+              assignStyledRequired(t)(path, state)
+            },
           },
           state
         )
@@ -30,9 +33,6 @@ export default function({ types: t }) {
         templateLiterals(t)(path, state)
         pureAnnotation(t)(path, state)
       },
-      VariableDeclarator(path, state) {
-        assignStyledRequired(t)(path, state)
-      },
     },
   }
 }
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
@@ -17,7 +17,11 @@ export const importLocalName = (name, state, bypassCache = false) => {
     return localNameCache[cacheKey]
   }
 
-  let localName = name === 'default' ? 'styled' : name
+  let localName = state.styledRequired
+    ? name === 'default'
+      ? 'styled'
+      : name
+    : false
 
   state.file.path.traverse({
     ImportDeclaration: {
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
@@ -24,20 +24,21 @@ export default t => (path, state) => {
 
   // state.customImportName is passed through from styled-components/macro if it's used
   // since the macro also inserts the import
-  let importName =
-    state.customImportName || t.identifier(importLocalName('default', state))
+  let importName = state.customImportName || importLocalName('default', state)
 
   const { bindings } = program.scope
 
   // Insert import if it doesn't exist yet
-  if (!bindings[importName.name]) {
+  if (!importName || !bindings[importName.name]) {
     addDefault(path, 'styled-components', {
       nameHint: 'styled',
     })
 
     importName = t.identifier(importLocalName('default', state, true))
   }
 
+  if (!t.isIdentifier(importName)) importName = t.identifier(importName)
+
   const elem = path.parentPath
   const name = getName(elem.node.name, t)
   const id = path.scope.generateUidIdentifier(
diff --git a/test/fixtures/add-display-names/code.js b/test/fixtures/add-display-names/code.js
@@ -1,8 +1,14 @@
-const Test = styled.div`width: 100%;`;
-const Test2 = styled('div')``;
-const Test3 = true ? styled.div`` : styled.div``;
+import styled from 'styled-components'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = styled('div')``
+const Test3 = true ? styled.div`` : styled.div``
 const styles = { One: styled.div`` }
-let Component;
-Component = styled.div``;
-const WrappedComponent = styled(Inner)``;
-class ClassComponent { static Child = styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
+class ClassComponent {
+  static Child = styled.div``
+}
diff --git a/test/fixtures/add-display-names/output.js b/test/fixtures/add-display-names/output.js
@@ -1,3 +1,4 @@
+import styled from 'styled-components';
 const Test = styled.div.withConfig({
   displayName: "Test"
 })`width:100%;`;
diff --git a/test/fixtures/add-identifier-and-display-name/code.js b/test/fixtures/add-identifier-and-display-name/code.js
@@ -1,3 +1,5 @@
+import styled from 'styled-components'
+
 const Test = styled.div`
   width: 100%;
 `
diff --git a/test/fixtures/add-identifier-and-display-name/output.js b/test/fixtures/add-identifier-and-display-name/output.js
@@ -1,3 +1,4 @@
+import styled from 'styled-components';
 const Test = styled.div.withConfig({
   displayName: "Test",
   componentId: "sc-1cza72q-0"
diff --git a/test/fixtures/add-identifier/code.js b/test/fixtures/add-identifier/code.js
@@ -1,6 +1,10 @@
-const Test = styled.div`width: 100%;`;
-const Test2 = true ? styled.div`` : styled.div``;
+import styled from '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)``;
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
diff --git a/test/fixtures/add-identifier/output.js b/test/fixtures/add-identifier/output.js
@@ -1,3 +1,4 @@
+import styled from 'styled-components';
 const Test = styled.div.withConfig({
   componentId: "sc-1289dod-0"
 })`width:100%;`;
diff --git a/test/fixtures/allow-chains-of-member-calls/code.js b/test/fixtures/allow-chains-of-member-calls/code.js
@@ -1,2 +1,4 @@
-const WithAttrs = styled.div.attrs({ some: 'value'})``
-const WithAttrsWrapped = styled(Inner).attrs({ some: 'value'})``
+import styled from 'styled-components'
+
+const WithAttrs = styled.div.attrs({ some: 'value' })``
+const WithAttrsWrapped = styled(Inner).attrs({ some: 'value' })``
diff --git a/test/fixtures/allow-chains-of-member-calls/output.js b/test/fixtures/allow-chains-of-member-calls/output.js
@@ -1,3 +1,4 @@
+import styled from 'styled-components';
 const WithAttrs = styled.div.attrs({
   some: 'value'
 }).withConfig({
diff --git a/test/fixtures/annotate-create-global-style-with-pure-comments/code.js b/test/fixtures/annotate-create-global-style-with-pure-comments/code.js
@@ -1,3 +1,5 @@
+import { createGlobalStyle } from 'styled-components'
+
 const GlobalStyle = createGlobalStyle`
   body {
     color: red;
diff --git a/test/fixtures/annotate-create-global-style-with-pure-comments/output.js b/test/fixtures/annotate-create-global-style-with-pure-comments/output.js
@@ -1,3 +1,4 @@
+import { createGlobalStyle } from 'styled-components';
 const GlobalStyle =
 /*#__PURE__*/
 createGlobalStyle`
diff --git a/test/fixtures/annotate-css-with-pure-comments/code.js b/test/fixtures/annotate-css-with-pure-comments/code.js
@@ -1,3 +1,5 @@
+import styled, { css } from 'styled-components'
+
 const partial = css`
   color: red;
 `
diff --git a/test/fixtures/annotate-css-with-pure-comments/output.js b/test/fixtures/annotate-css-with-pure-comments/output.js
@@ -1,3 +1,4 @@
+import styled, { css } from 'styled-components';
 const partial =
 /*#__PURE__*/
 css(["color:red;"]);
diff --git a/test/fixtures/annotate-keyframes-with-pure-comments/code.js b/test/fixtures/annotate-keyframes-with-pure-comments/code.js
@@ -1,3 +1,5 @@
+import { keyframes } from 'styled-components'
+
 const Animation = keyframes`
   0% {
     opacity: 0;
@@ -6,4 +8,4 @@ const Animation = keyframes`
   100% {
     opacity: 1;
   }
-`;
+`
diff --git a/test/fixtures/annotate-keyframes-with-pure-comments/output.js b/test/fixtures/annotate-keyframes-with-pure-comments/output.js
@@ -1,3 +1,4 @@
+import { keyframes } from 'styled-components';
 const Animation =
 /*#__PURE__*/
 keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
diff --git a/test/fixtures/annotate-styled-calls-with-pure-comments/code.js b/test/fixtures/annotate-styled-calls-with-pure-comments/code.js
@@ -1,3 +1,5 @@
+import styled from 'styled-components'
+
 const Test = styled.div`
   width: 100%;
 `
diff --git a/test/fixtures/annotate-styled-calls-with-pure-comments/output.js b/test/fixtures/annotate-styled-calls-with-pure-comments/output.js
@@ -1,3 +1,4 @@
+import styled from 'styled-components';
 const Test =
 /*#__PURE__*/
 styled.div.withConfig({
diff --git a/test/fixtures/ignore-external-styled-import/.babelrc b/test/fixtures/ignore-external-styled-import/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../src"]
+}
diff --git a/test/fixtures/ignore-external-styled-import/code.js b/test/fixtures/ignore-external-styled-import/code.js
@@ -0,0 +1,9 @@
+import { styled } from '@material/ui'
+import s from 'styled-components'
+
+const Paragraph = s.p`
+  color: green;
+`
+
+const Foo = p => <Paragraph {...p} />
+const TestNormal = styled(Foo)({ color: red })
diff --git a/test/fixtures/ignore-external-styled-import/output.js b/test/fixtures/ignore-external-styled-import/output.js
@@ -0,0 +1,12 @@
+import { styled } from '@material/ui';
+import s from 'styled-components';
+const Paragraph = s.p.withConfig({
+  displayName: "code__Paragraph",
+  componentId: "sc-10i7tpl-0"
+})(["color:green;"]);
+
+const Foo = p => <Paragraph {...p} />;
+
+const TestNormal = styled(Foo)({
+  color: red
+});

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,9 @@ export default function({ types: t }) {`
`16`	`16`	`JSXAttribute(path, state) {`
`17`	`17`	`transpileCssProp(t)(path, state)`
`18`	`18`	`},`
	`19`	`+ VariableDeclarator(path, state) {`
	`20`	`+ assignStyledRequired(t)(path, state)`
	`21`	`+ },`
`19`	`22`	`},`
`20`	`23`	`state`
`21`	`24`	`)`
`@@ -30,9 +33,6 @@ export default function({ types: t }) {`
`30`	`33`	`templateLiterals(t)(path, state)`
`31`	`34`	`pureAnnotation(t)(path, state)`
`32`	`35`	`},`
`33`		`- VariableDeclarator(path, state) {`
`34`		`- assignStyledRequired(t)(path, state)`
`35`		`- },`
`36`	`36`	`},`
`37`	`37`	`}`
`38`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import styled from 'styled-components';`
`1`	`2`	`const Test = styled.div.withConfig({`
`2`	`3`	`displayName: "Test"`
`3`	`4`	})`width:100%;`;
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import styled from 'styled-components'`
	`2`	`+`
`1`	`3`	const Test = styled.div`
`2`	`4`	`width: 100%;`
`3`	`5`	`