fix: _JSXStyle import is not found

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

Hide file tree

Showing 14 changed files with 62 additions and 35 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'
@@ -10,7 +10,6 @@ import {
   STYLE_ATTRIBUTE,
   GLOBAL_ATTRIBUTE,
   STYLE_COMPONENT_ID,
-  STYLE_COMPONENT,
   STYLE_COMPONENT_DYNAMIC
 } from './_constants'
 
@@ -258,7 +257,7 @@ export const getJSXStyleInfo = (expr, scope) => {
   }
 }
 
-export const computeClassNames = (styles, externalJsxId) => {
+export const computeClassNames = (styles, externalJsxId, componentName) => {
   if (styles.length === 0) {
     return {
       className: externalJsxId
@@ -297,7 +296,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(componentName), t.identifier('dynamic')),
     // Arguments
     [
       t.arrayExpression(
@@ -380,7 +379,12 @@ export const cssToBabelType = css => {
   return t.cloneDeep(css)
 }
 
-export const makeStyledJsxTag = (id, transformedCss, expressions = []) => {
+export const makeStyledJsxTag = (
+  id,
+  transformedCss,
+  expressions = [],
+  componentName
+) => {
   const css = cssToBabelType(transformedCss)
 
   const attributes = [
@@ -402,8 +406,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(componentName), attributes),
+    t.jSXClosingElement(t.jSXIdentifier(componentName)),
     [t.jSXExpressionContainer(css)]
   )
 }
@@ -627,7 +631,7 @@ export const createReactComponentImportDeclaration = state => {
     typeof state.opts.styleModule === 'string'
       ? state.opts.styleModule
       : 'styled-jsx/style',
-    { nameHint: STYLE_COMPONENT}
+    { nameHint: state.componentName }
   )
 }
 

diff --git a/src/babel-external.js b/src/babel-external.js
@@ -23,7 +23,8 @@ export function processTaggedTemplateExpression({
   splitRules,
   plugins,
   vendorPrefixes,
-  sourceMaps
+  sourceMaps,
+  componentName
 }) {
   const templateLiteral = path.get('quasi')
   let scope
@@ -39,7 +40,11 @@ export function processTaggedTemplateExpression({
 
   const stylesInfo = getJSXStyleInfo(templateLiteral, scope)
 
-  const { staticClassName, className } = computeClassNames([stylesInfo])
+  const { staticClassName, className } = computeClassNames(
+    [stylesInfo],
+    undefined,
+    componentName
+  )
 
   const styles = processCss(
     {
@@ -64,7 +69,7 @@ export function processTaggedTemplateExpression({
       t.objectExpression([
         t.objectProperty(
           t.identifier('styles'),
-          makeStyledJsxTag(hash, css, expressions)
+          makeStyledJsxTag(hash, css, expressions, componentName)
         ),
         t.objectProperty(t.identifier('className'), className)
       ])
@@ -212,7 +217,8 @@ export const visitor = {
                 : process.env.NODE_ENV === 'production',
             plugins: state.plugins,
             vendorPrefixes,
-            sourceMaps
+            sourceMaps,
+            componentName: state.componentName
           })
         })
       )
@@ -223,7 +229,7 @@ export const visitor = {
         hasJSXStyle &&
         taggedTemplateExpressions.resolve.length > 0 &&
         !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(STYLE_COMPONENT)
+        !path.scope.hasBinding(state.componentName)
       ) {
         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.componentName
           )
           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.componentName))
           return
         }
 
@@ -247,7 +248,9 @@ export default function({ types: t }) {
           splitRules
         })
 
-        path.replaceWith(makeStyledJsxTag(hash, css, expressions))
+        path.replaceWith(
+          makeStyledJsxTag(hash, css, expressions, state.componentName)
+        )
       }
     }
   }
@@ -286,6 +289,9 @@ export default function({ types: t }) {
 
           setStateOptions(state)
 
+          state.componentName = STYLE_COMPONENT
+          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 +305,12 @@ export default function({ types: t }) {
             !(
               state.file.hasJSXStyle &&
               !state.hasInjectedJSXStyle &&
-              !scope.hasBinding(STYLE_COMPONENT)
+              !scope.hasBinding(state.componentName)
             )
           ) {
             return
           }
-
           state.hasInjectedJSXStyle = true
-          createReactComponentImportDeclaration(state)
         }
       }
     }

diff --git a/src/macro.js b/src/macro.js
@@ -17,6 +17,8 @@ function styledJsxMacro({ references, state }) {
   // People who want to migrate from this macro to pure styled-jsx might have name conflicts issues.
   const cssReferences = []
 
+  state.componentName = STYLE_COMPONENT
+
   // references looks like this
   // {
   //    default: [path, path],
@@ -94,12 +96,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,
+        componentName: state.componentName
       })
 
       if (
         !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(STYLE_COMPONENT)
+        !path.scope.hasBinding(state.componentName)
       ) {
         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