fix: make styled-jsx/babel plugin respect the source type (#684)

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

Fixes #680 .

* chore: retrigger

Co-authored-by: Joe Haddad <[email protected]>
Co-authored-by: Joe Haddad <[email protected]>

Author: jaydenseric

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",

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}
   )
 }
 

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)
       }
     })
 

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)
         }
       }
     }

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)
       }
     })
   })

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"}>␊

test/babel6/snapshots/attribute.js.snap

@@ -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};}`);␊