fix: _JSXStyle import is not found

create imports on program enter
vercel · Aug 1, 2021 · 0d57f9e · 0d57f9e
1 parent ffd11ca
commit 0d57f9e
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 36 deletions.
diff --git a/src/_utils.js b/src/_utils.js
@@ -1,5 +1,5 @@
 import path from 'path'
-import { addDefault } from '@babel/helper-module-imports';
+import { addDefault } from '@babel/helper-module-imports'
 import * as t from '@babel/types'
 import _hashString from 'string-hash'
 import { SourceMapGenerator } from 'source-map'
@@ -258,7 +258,7 @@ export const getJSXStyleInfo = (expr, scope) => {
   }
 }
 
-export const computeClassNames = (styles, externalJsxId) => {
+export const computeClassNames = (styles, externalJsxId, StyleComponent) => {
   if (styles.length === 0) {
     return {
       className: externalJsxId
@@ -297,7 +297,7 @@ export const computeClassNames = (styles, externalJsxId) => {
   // _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ])
   const dynamic = t.callExpression(
     // Callee: _JSXStyle.dynamic
-    t.memberExpression(t.identifier(STYLE_COMPONENT), t.identifier('dynamic')),
+    t.memberExpression(t.identifier(StyleComponent), t.identifier('dynamic')),
     // Arguments
     [
       t.arrayExpression(
@@ -380,7 +380,12 @@ export const cssToBabelType = css => {
   return t.cloneDeep(css)
 }
 
-export const makeStyledJsxTag = (id, transformedCss, expressions = []) => {
+export const makeStyledJsxTag = (
+  id,
+  transformedCss,
+  expressions = [],
+  StyleComponent
+) => {
   const css = cssToBabelType(transformedCss)
 
   const attributes = [
@@ -402,8 +407,8 @@ export const makeStyledJsxTag = (id, transformedCss, expressions = []) => {
   }
 
   return t.jSXElement(
-    t.jSXOpeningElement(t.jSXIdentifier(STYLE_COMPONENT), attributes),
-    t.jSXClosingElement(t.jSXIdentifier(STYLE_COMPONENT)),
+    t.jSXOpeningElement(t.jSXIdentifier(StyleComponent), attributes),
+    t.jSXClosingElement(t.jSXIdentifier(StyleComponent)),
     [t.jSXExpressionContainer(css)]
   )
 }
@@ -627,7 +632,7 @@ export const createReactComponentImportDeclaration = state => {
     typeof state.opts.styleModule === 'string'
       ? state.opts.styleModule
       : 'styled-jsx/style',
-    { nameHint: STYLE_COMPONENT}
+    { nameHint: state.StyleComponent }
   )
 }
 
@@ -650,6 +655,7 @@ export const setStateOptions = state => {
       vendorPrefixes: state.opts.vendorPrefixes
     })
   }
+  state.StyleComponent = STYLE_COMPONENT
 }
 
 export function log(message) {

diff --git a/src/babel-external.js b/src/babel-external.js
@@ -1,7 +1,5 @@
 import * as t from '@babel/types'
 
-import { STYLE_COMPONENT } from './_constants'
-
 import {
   getJSXStyleInfo,
   processCss,
@@ -23,7 +21,8 @@ export function processTaggedTemplateExpression({
   splitRules,
   plugins,
   vendorPrefixes,
-  sourceMaps
+  sourceMaps,
+  StyleComponent
 }) {
   const templateLiteral = path.get('quasi')
   let scope
@@ -39,7 +38,11 @@ export function processTaggedTemplateExpression({
 
   const stylesInfo = getJSXStyleInfo(templateLiteral, scope)
 
-  const { staticClassName, className } = computeClassNames([stylesInfo])
+  const { staticClassName, className } = computeClassNames(
+    [stylesInfo],
+    undefined,
+    StyleComponent
+  )
 
   const styles = processCss(
     {
@@ -64,7 +67,7 @@ export function processTaggedTemplateExpression({
       t.objectExpression([
         t.objectProperty(
           t.identifier('styles'),
-          makeStyledJsxTag(hash, css, expressions)
+          makeStyledJsxTag(hash, css, expressions, StyleComponent)
         ),
         t.objectProperty(t.identifier('className'), className)
       ])
@@ -212,7 +215,8 @@ export const visitor = {
                 : process.env.NODE_ENV === 'production',
             plugins: state.plugins,
             vendorPrefixes,
-            sourceMaps
+            sourceMaps,
+            StyleComponent: state.StyleComponent
           })
         })
       )
@@ -223,7 +227,7 @@ export const visitor = {
         hasJSXStyle &&
         taggedTemplateExpressions.resolve.length > 0 &&
         !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(STYLE_COMPONENT)
+        !path.scope.hasBinding(state.StyleComponent)
       ) {
         state.hasInjectedJSXStyle = true
         createReactComponentImportDeclaration(state)

diff --git a/src/babel.js b/src/babel.js
@@ -172,7 +172,8 @@ export default function({ types: t }) {
         if (state.styles.length > 0 || externalJsxId) {
           const { staticClassName, className } = computeClassNames(
             state.styles,
-            externalJsxId
+            externalJsxId,
+            state.StyleComponent
           )
           state.className = className
           state.staticClassName = staticClassName
@@ -224,7 +225,7 @@ export default function({ types: t }) {
         ) {
           const [id, css] = state.externalStyles.shift()
 
-          path.replaceWith(makeStyledJsxTag(id, css))
+          path.replaceWith(makeStyledJsxTag(id, css, [], state.StyleComponent))
           return
         }
 
@@ -247,7 +248,9 @@ export default function({ types: t }) {
           splitRules
         })
 
-        path.replaceWith(makeStyledJsxTag(hash, css, expressions))
+        path.replaceWith(
+          makeStyledJsxTag(hash, css, expressions, state.StyleComponent)
+        )
       }
     }
   }
@@ -286,6 +289,8 @@ export default function({ types: t }) {
 
           setStateOptions(state)
 
+          state.importDeclaration = createReactComponentImportDeclaration(state)
+
           // we need to beat the arrow function transform and
           // possibly others so we traverse from here or else
           // dynamic values in classNames could be incorrect
@@ -299,14 +304,12 @@ export default function({ types: t }) {
             !(
               state.file.hasJSXStyle &&
               !state.hasInjectedJSXStyle &&
-              !scope.hasBinding(STYLE_COMPONENT)
+              !scope.hasBinding(state.StyleComponent)
             )
           ) {
             return
           }
-
           state.hasInjectedJSXStyle = true
-          createReactComponentImportDeclaration(state)
         }
       }
     }

diff --git a/src/macro.js b/src/macro.js
@@ -94,12 +94,13 @@ function styledJsxMacro({ references, state }) {
             : process.env.NODE_ENV === 'production',
         plugins: state.plugins,
         vendorPrefixes: state.opts.vendorPrefixes,
-        sourceMaps: state.opts.sourceMaps
+        sourceMaps: state.opts.sourceMaps,
+        StyleComponent: state.StyleComponent
       })
 
       if (
         !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(STYLE_COMPONENT)
+        !path.scope.hasBinding(state.StyleComponent)
       ) {
         state.hasInjectedJSXStyle = true
         createReactComponentImportDeclaration(state)

diff --git a/test/babel6/snapshots/external.js.md b/test/babel6/snapshots/external.js.md
@@ -53,7 +53,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];␊
+    `import _JSXStyle from 'styled-jsx/style';␊
+    const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];␊
     _defaultExport.__hash = '2292456818';␊
     ␊
     ␊
@@ -63,7 +64,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import css from 'hell';␊
+    `import _JSXStyle from 'styled-jsx/style';␊
+    import css from 'hell';␊
     ␊
     const color = 'red';␊
     ␊
@@ -157,7 +159,9 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');␊
+    `import _JSXStyle from 'styled-jsx/style';␊
+    ␊
+    const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');␊
     ␊
     _defaultExport.__hash = '2292456818';␊
     ␊

diff --git a/test/babel6/snapshots/external.js.snap b/test/babel6/snapshots/external.js.snap
diff --git a/test/babel6/snapshots/index.js.md b/test/babel6/snapshots/index.js.md
@@ -19,7 +19,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `const a = () => <div>␊
+    `import _JSXStyle from 'styled-jsx/style';␊
+    const a = () => <div>␊
         <p>hi</p>␊
         <style>{'woot'}</style>␊
       </div>;`
@@ -87,16 +88,15 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from 'styled-jsx/style';␊
+    export const _StyleImport = '123';␊
     export default class {␊
-    ␊
       render() {␊
         return <div className={"jsx-2101845350"}>␊
             <p className={"jsx-2101845350"}>test</p>␊
             <_JSXStyle id={"2101845350"}>{"p.jsx-2101845350{color:red;}"}</_JSXStyle>␊
           </div>;␊
       }␊
-    ␊
     }`
 
 ## works with css tagged template literals in the same file

diff --git a/test/babel6/snapshots/index.js.snap b/test/babel6/snapshots/index.js.snap
diff --git a/test/fixtures/class.js b/test/fixtures/class.js
@@ -1,6 +1,6 @@
+export const _StyleImport = '123'
 export default class {
-
-  render () {
+  render() {
     return (
       <div>
         <p>test</p>
@@ -12,5 +12,4 @@ export default class {
       </div>
     )
   }
-
 }
diff --git a/test/snapshots/external.js.md b/test/snapshots/external.js.md
@@ -45,7 +45,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `const _defaultExport = ["div.jsx-2292456818{font-size:3em;}"];␊
+    `import _JSXStyle from "styled-jsx/style";␊
+    const _defaultExport = ["div.jsx-2292456818{font-size:3em;}"];␊
     _defaultExport.__hash = "2292456818";␊
     module.exports = _defaultExport;`
 
@@ -88,7 +89,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import css from 'hell';␊
+    `import _JSXStyle from "styled-jsx/style";␊
+    import css from 'hell';␊
     const color = 'red';␊
     const bar = css`␊
       div {␊
@@ -166,7 +168,9 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `const _defaultExport = new String("div.jsx-2292456818{font-size:3em;}");␊
+    `import _JSXStyle from "styled-jsx/style";␊
+    ␊
+    const _defaultExport = new String("div.jsx-2292456818{font-size:3em;}");␊
     ␊
     _defaultExport.__hash = "2292456818";␊
     module.exports = _defaultExport;`

diff --git a/test/snapshots/external.js.snap b/test/snapshots/external.js.snap
diff --git a/test/snapshots/index.js.md b/test/snapshots/index.js.md
@@ -63,7 +63,9 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `const a = () => <div>␊
+    `import _JSXStyle from "styled-jsx/style";␊
+    ␊
+    const a = () => <div>␊
         <p>hi</p>␊
         <style>{'woot'}</style>␊
       </div>;`
@@ -148,6 +150,7 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     `import _JSXStyle from "styled-jsx/style";␊
+    export const _StyleImport = '123';␊
     export default class {␊
       render() {␊
         return <div className={"jsx-2101845350"}>␊

diff --git a/test/snapshots/index.js.snap b/test/snapshots/index.js.snap
diff --git a/test/snapshots/plugins.js.snap b/test/snapshots/plugins.js.snap