fix(external): execute transforms before JSX transform (#677)

src/babel.js

@@ -290,6 +290,9 @@ export default function({ types: t }) {
           // possibly others so we traverse from here or else
           // dynamic values in classNames could be incorrect
           path.traverse(jsxVisitors, state)
+
+          // Transpile external styles
+          path.traverse(externalStylesVisitor, state)
         },
         exit({ node, scope }, state) {
           if (
@@ -306,10 +309,7 @@ export default function({ types: t }) {
           const importDeclaration = createReactComponentImportDeclaration(state)
           node.body.unshift(importDeclaration)
         }
-      },
-
-      // Transpile external styles
-      ...externalStylesVisitor
+      }
     }
   }
 

test/external.js

@@ -113,3 +113,28 @@ test('Makes sure that style nodes are not re-used', async t => {
 
   t.snapshot(code)
 })
+
+test('Make sure that it works with the new automatic transform', async t => {
+  const { code } = await transformSource(
+    `
+    import { css } from "styled-jsx/css";
+
+    const A = css.resolve\`
+      div {
+        color: green;
+      }
+    \`;
+
+    export default function IndexPage() {
+      return JSON.stringify(A);
+    }
+    `,
+    {
+      babelrc: false,
+      presets: [['@babel/preset-react', { runtime: 'automatic' }]],
+      plugins: [plugin]
+    }
+  )
+
+  t.snapshot(code)
+})

test/snapshots/external.js.md

@@ -225,3 +225,20 @@ 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);␊
+    }`