From eac1703467d941f3efc501a777436e63dbc36393 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 13 Nov 2020 22:18:45 -0500
Subject: [PATCH] fix(external): execute transforms before JSX transform (#677)

---
 src/babel.js                    |   8 ++++----
 test/external.js                |  25 +++++++++++++++++++++++++
 test/snapshots/external.js.md   |  17 +++++++++++++++++
 test/snapshots/external.js.snap | Bin 1653 -> 1812 bytes
 4 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/babel.js b/src/babel.js
index 8c01155d..9b3b0268 100644
--- a/src/babel.js
+++ b/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
+      }
     }
   }
 
diff --git a/test/external.js b/test/external.js
index 78e3b33a..eb962738 100644
--- a/test/external.js
+++ b/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)
+})
diff --git a/test/snapshots/external.js.md b/test/snapshots/external.js.md
index e1f84dcb..96dbe47e 100644
--- a/test/snapshots/external.js.md
+++ b/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);␊
+    }`
diff --git a/test/snapshots/external.js.snap b/test/snapshots/external.js.snap
index 7508bf73683026ec8937912412e7c27edd783679..f546171740b53e3745fd8359da7c6cc6b000da25 100644
GIT binary patch
literal 1812
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
Ca&+tf

literal 1653
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