Make the styled-jsx/babel Babel plugin respect the Babel source type.

Fixes vercel#680 .
jaydenseric · Nov 19, 2020 · 4eb109d · 4eb109d
1 parent eac1703
commit 4eb109d
Show file tree

Hide file tree

Showing 19 changed files with 65 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     }
   },
   "dependencies": {
+    "@babel/helper-module-imports": "7.12.5",
     "@babel/types": "7.8.3",
     "babel-plugin-syntax-jsx": "6.18.0",
     "convert-source-map": "1.7.0",

diff --git a/src/_utils.js b/src/_utils.js
@@ -1,4 +1,5 @@
 import path from 'path'
+import { addDefault } from '@babel/helper-module-imports';
 import * as t from '@babel/types'
 import _hashString from 'string-hash'
 import { SourceMapGenerator } from 'source-map'
@@ -621,14 +622,12 @@ export const booleanOption = opts => {
 }
 
 export const createReactComponentImportDeclaration = state => {
-  const styleModule =
+  addDefault(
+    state.file.path,
     typeof state.opts.styleModule === 'string'
       ? state.opts.styleModule
-      : 'styled-jsx/style'
-
-  return t.importDeclaration(
-    [t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
-    t.stringLiteral(styleModule)
+      : 'styled-jsx/style',
+    { nameHint: STYLE_COMPONENT}
   )
 }
 

diff --git a/src/babel-external.js b/src/babel-external.js
@@ -226,8 +226,7 @@ export const visitor = {
         !path.scope.hasBinding(STYLE_COMPONENT)
       ) {
         state.hasInjectedJSXStyle = true
-        const importDeclaration = createReactComponentImportDeclaration(state)
-        path.scope.path.node.body.unshift(importDeclaration)
+        createReactComponentImportDeclaration(state)
       }
     })
 

diff --git a/src/babel.js b/src/babel.js
@@ -294,7 +294,7 @@ export default function({ types: t }) {
           // Transpile external styles
           path.traverse(externalStylesVisitor, state)
         },
-        exit({ node, scope }, state) {
+        exit({ scope }, state) {
           if (
             !(
               state.file.hasJSXStyle &&
@@ -306,8 +306,7 @@ export default function({ types: t }) {
           }
 
           state.hasInjectedJSXStyle = true
-          const importDeclaration = createReactComponentImportDeclaration(state)
-          node.body.unshift(importDeclaration)
+          createReactComponentImportDeclaration(state)
         }
       }
     }

diff --git a/src/macro.js b/src/macro.js
@@ -102,8 +102,7 @@ function styledJsxMacro({ references, state }) {
         !path.scope.hasBinding(STYLE_COMPONENT)
       ) {
         state.hasInjectedJSXStyle = true
-        const importDeclaration = createReactComponentImportDeclaration(state)
-        path.findParent(p => p.isProgram()).node.body.unshift(importDeclaration)
+        createReactComponentImportDeclaration(state)
       }
     })
   })

diff --git a/test/babel6/snapshots/attribute.js.md b/test/babel6/snapshots/attribute.js.md
@@ -106,9 +106,10 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `var _this = this;␊
+    `import _JSXStyle from "styled-jsx/style";␊
+    ␊
+    var _this = this;␊
     ␊
-    import _JSXStyle from "styled-jsx/style";␊
     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
@@ -19,9 +19,9 @@ Generated by [AVA](https://ava.li).
     const baz = ['div{font-size:3em;}'];␊
     ␊
     baz.__hash = '2141779268';␊
-    a.__hash = '262929833';␊
     const a = [`div{font-size:${size}em;}`];␊
     ␊
+    a.__hash = '262929833';␊
     export const uh = bar;␊
     ␊
     export const foo = [`div.jsx-2299908427{color:${color};}`];␊
@@ -123,9 +123,9 @@ Generated by [AVA](https://ava.li).
     const baz = new String('div{font-size:3em;}');␊
     ␊
     baz.__hash = '2141779268';␊
-    a.__hash = '262929833';␊
     const a = new String(`div{font-size:${size}em;}`);␊
     ␊
+    a.__hash = '262929833';␊
     export const uh = bar;␊
     ␊
     export const foo = new String(`div.jsx-2299908427{color:${color};}`);␊

diff --git a/test/babel6/snapshots/external.js.snap b/test/babel6/snapshots/external.js.snap
diff --git a/test/babel6/snapshots/index.js.snap b/test/babel6/snapshots/index.js.snap
diff --git a/test/babel6/snapshots/plugins.js.snap b/test/babel6/snapshots/plugins.js.snap
diff --git a/test/fixtures/cjs-module.js b/test/fixtures/cjs-module.js
@@ -0,0 +1,7 @@
+'use strict'
+
+module.exports = () => (
+  <div>
+    <style jsx>{'div { color: red }'}</style>
+  </div>
+)
diff --git a/test/index.js b/test/index.js
@@ -28,6 +28,13 @@ test('works with stateless', async t => {
   t.snapshot(code)
 })
 
+test('works with a CJS module', async t => {
+  const { code } = await transform('./fixtures/cjs-module.js', {
+    sourceType: 'script'
+  })
+  t.snapshot(code)
+})
+
 test('works with fragment', async t => {
   const { code } = await transform('./fixtures/fragment.js')
   t.snapshot(code)

diff --git a/test/snapshots/external.js.md b/test/snapshots/external.js.md
@@ -15,8 +15,8 @@ Generated by [AVA](https://ava.li).
     bar.__hash = "2141779268";␊
     const baz = ["div{font-size:3em;}"];␊
     baz.__hash = "2141779268";␊
-    a.__hash = "262929833";␊
     const a = [`div{font-size:${size}em;}`];␊
+    a.__hash = "262929833";␊
     export const uh = bar;␊
     export const foo = [`div.jsx-2299908427{color:${color};}`];␊
     foo.__hash = "2299908427";␊
@@ -49,6 +49,23 @@ Generated by [AVA](https://ava.li).
     _defaultExport.__hash = "2292456818";␊
     module.exports = _defaultExport;`
 
+## Make sure that it works with the new automatic transform
+
+> Snapshot 1
+
+    `import { jsx as _jsx } from "react/jsx-runtime";␊
+    import _JSXStyle from "styled-jsx/style";␊
+    const A = {␊
+      styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
+        id: "2723508961",␊
+        children: "div.jsx-2723508961{color:green;}"␊
+      }),␊
+      className: "jsx-2723508961"␊
+    };␊
+    export default function IndexPage() {␊
+      return JSON.stringify(A);␊
+    }`
+
 ## Makes sure that style nodes are not re-used
 
 > Snapshot 1
@@ -119,8 +136,8 @@ Generated by [AVA](https://ava.li).
     bar.__hash = "2141779268";␊
     const baz = new String("div{font-size:3em;}");␊
     baz.__hash = "2141779268";␊
-    a.__hash = "262929833";␊
     const a = new String(`div{font-size:${size}em;}`);␊
+    a.__hash = "262929833";␊
     export const uh = bar;␊
     export const foo = new String(`div.jsx-2299908427{color:${color};}`);␊
     foo.__hash = "2299908427";␊
@@ -225,20 +242,3 @@ Generated by [AVA](https://ava.li).
         <p className={`jsx-${styles.__hash}`}>test</p>␊
         <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
       </div>);`
-
-## Make sure that it works with the new automatic transform
-
-> Snapshot 1
-
-    `import { jsx as _jsx } from "react/jsx-runtime";␊
-    import _JSXStyle from "styled-jsx/style";␊
-    const A = {␊
-      styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
-        id: "2723508961",␊
-        children: "div.jsx-2723508961{color:green;}"␊
-      }),␊
-      className: "jsx-2723508961"␊
-    };␊
-    export default function IndexPage() {␊
-      return JSON.stringify(A);␊
-    }`
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
@@ -129,6 +129,20 @@ Generated by [AVA](https://ava.li).
         <_JSXStyle id={"2529315885"}>{"span.jsx-2529315885{color:red;}"}</_JSXStyle>␊
       </div>;`
 
+## works with a CJS module
+
+> Snapshot 1
+
+    `'use strict';␊
+    ␊
+    var _JSXStyle = _interopRequireDefault(require("styled-jsx/style")).default;␊
+    ␊
+    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
+    ␊
+    module.exports = () => <div className={"jsx-2886504620"}>␊
+        <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>␊
+      </div>;`
+
 ## works with class
 
 > Snapshot 1

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
diff --git a/yarn.lock b/yarn.lock
@@ -289,7 +289,7 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
-"@babel/helper-module-imports@^7.12.1":
+"@babel/helper-module-imports@7.12.5", "@babel/helper-module-imports@^7.12.1":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
   integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
@@ -3065,7 +3065,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -4718,7 +4718,7 @@ import-modules@^1.1.0:
   resolved "https://registry.yarnpkg.com/import-modules/-/import-modules-1.1.0.tgz#748db79c5cc42bb9701efab424f894e72600e9dc"
   integrity sha1-dI23nFzEK7lwHvq0JPiU5yYA6dw=
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -5645,11 +5645,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -5658,33 +5653,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._root@~3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
@@ -5785,11 +5758,6 @@ lodash.mergewith@^4.6.1:
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
   integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.snakecase@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"