fix: _JSXStyle import is not found

vercel · Jul 31, 2021 · 56a1bbb · 56a1bbb
1 parent 2741879
commit 56a1bbb
Show file tree

Hide file tree

Showing 21 changed files with 159 additions and 64 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'
@@ -622,13 +622,45 @@ export const booleanOption = opts => {
 }
 
 export const createReactComponentImportDeclaration = state => {
-  addDefault(
+  const uid = state.file.path.scope.generateUidIdentifierBasedOnNode(
+    state.file.path.node.id
+  )
+  const importIdentifierName = '_JSXImport' + uid.name
+
+  const importIdentifier = addDefault(
     state.file.path,
     typeof state.opts.styleModule === 'string'
       ? state.opts.styleModule
       : 'styled-jsx/style',
-    { nameHint: STYLE_COMPONENT}
+    { nameHint: importIdentifierName }
   )
+  // const _JSXStyle = _JSXImport<uid>;
+  const variableDeclaration = t.variableDeclaration('const', [
+    t.variableDeclarator(t.identifier(STYLE_COMPONENT), importIdentifier)
+  ])
+
+  // Insert the variable declaration after the import declaration
+  state.file.path.traverse({
+    // Handle assignment declaration
+    VariableDeclarator(path) {
+      if (
+        t.isIdentifier(path.node.id) &&
+        path.node.id.name === importIdentifier.name
+      ) {
+        path.parentPath.insertAfter(variableDeclaration)
+      }
+    },
+    // Handle ESM imports
+    ImportDeclaration(path) {
+      const firstSpecifier = path.node.specifiers[0]
+      if (
+        firstSpecifier &&
+        firstSpecifier.local.name === importIdentifier.name
+      ) {
+        path.insertAfter(variableDeclaration)
+      }
+    }
+  })
 }
 
 export const setStateOptions = state => {

diff --git a/test/babel6/snapshots/attribute.js.md b/test/babel6/snapshots/attribute.js.md
@@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles';␊
     ␊
     const styles2 = require('./styles2');␊
@@ -106,10 +107,11 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
     ␊
     var _this = this;␊
     ␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (() => {␊
       const Element = 'div';␊
       return <div className={"jsx-2886504620"}>␊

diff --git a/test/babel6/snapshots/attribute.js.snap b/test/babel6/snapshots/attribute.js.snap
diff --git a/test/babel6/snapshots/external.js.md b/test/babel6/snapshots/external.js.md
@@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     import colors, { size } from './constants';␊
     const color = 'red';␊
@@ -98,7 +99,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     ␊
     function test() {␊
@@ -112,7 +114,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     import colors, { size } from './constants';␊
     const color = 'red';␊
@@ -168,7 +171,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles2';␊
     ␊
     export default (({ level = 1 }) => {␊
@@ -184,7 +188,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles';␊
     const styles2 = require('./styles2');␊
     import { foo as styles3 } from './styles';␊
@@ -211,7 +216,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles, { foo as styles3 } from './styles';␊
     ␊
     const styles2 = require('./styles2');␊
@@ -229,7 +235,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles';␊
     ␊
     export default (() => <div className={`jsx-${styles.__hash}`}>␊

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
@@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>test</p>␊
         <p className={"jsx-2743241663"}>woot</p>␊
@@ -28,7 +29,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>test</p>␊
         <p className={"jsx-2743241663"}>woot</p>␊
@@ -40,7 +42,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     const Test = () => <_JSXStyle id={"2743241663"}>{"p{color:red;}"}</_JSXStyle>;␊
     ␊
     export default (() => <div className={"jsx-2673076688"}>␊
@@ -53,7 +56,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     const color = 'red';␊
     const otherColor = 'green';␊
     ␊
@@ -76,7 +80,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     const Test = () => <div className={"jsx-2529315885"}>␊
         <span className={"jsx-2529315885"}>test</span>␊
         <Component />␊
@@ -87,7 +92,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default class {␊
     ␊
       render() {␊
@@ -103,7 +109,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     ␊
     export default (({ children }) => <div className={`jsx-${styles.__hash}`}>␊
@@ -127,7 +134,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (({ level = 1 }) => {␊
       const Element = `h${level}`;␊
     ␊
@@ -158,7 +166,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default class {␊
       render() {␊
         const Element = 'div';␊
@@ -184,7 +193,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     const darken = c => c;␊
     const color = 'red';␊
     const otherColor = 'green';␊
@@ -215,7 +225,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     const Test = () => <div className={"jsx-2209073070"}>␊
         <_JSXStyle id={"2209073070"}>{"body{color:red;}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out;}div a{display:none;}[data-test]>div{color:red;}"}</_JSXStyle>␊
       </div>;␊
@@ -226,7 +237,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     const attrs = {␊
       id: 'test'␊
     };␊
@@ -257,7 +269,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>woot</p>␊
         <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>␊
@@ -268,7 +281,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>test</p>␊
         <p className={"jsx-2743241663"}>woot</p>␊

diff --git a/test/babel6/snapshots/index.js.snap b/test/babel6/snapshots/index.js.snap
diff --git a/test/babel6/snapshots/macro.js.md b/test/babel6/snapshots/macro.js.md
@@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     ␊
     ({␊
@@ -20,7 +21,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     ␊
     function test() {␊
@@ -34,7 +36,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     ␊
     ␊
     const { className, styles } = {␊

diff --git a/test/babel6/snapshots/macro.js.snap b/test/babel6/snapshots/macro.js.snap
diff --git a/test/babel6/snapshots/plugins.js.md b/test/babel6/snapshots/plugins.js.md
@@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles';␊
     const color = 'red';␊
     ␊
@@ -39,7 +40,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXImport_ref from 'styled-jsx/style';␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles';␊
     const color = 'red';␊
     ␊

diff --git a/test/babel6/snapshots/plugins.js.snap b/test/babel6/snapshots/plugins.js.snap
diff --git a/test/snapshots/attribute.js.md b/test/snapshots/attribute.js.md
@@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     import styles from './styles';␊
     ␊
     const styles2 = require('./styles2'); // external only␊
@@ -112,7 +113,8 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXImport_ref from "styled-jsx/style";␊
+    const _JSXStyle = _JSXImport_ref;␊
     export default (() => {␊
       const Element = 'div';␊
       return <div className={"jsx-2886504620"}>␊

diff --git a/test/snapshots/attribute.js.snap b/test/snapshots/attribute.js.snap