From d4192f4bd5496c80cad1f3d6385083279dea8ab0 Mon Sep 17 00:00:00 2001
From: Will Binns-Smith <wbinnssmith@gmail.com>
Date: Wed, 14 Sep 2022 16:46:18 -0700
Subject: [PATCH] Implement styled-jsx with swc's styled_jsx (vercel/turbo#354)

This implements support for styled-jsx in next-dev using swc's styled_jsx crate.

It's only applied in next-dev, and is only applied as a transform to app code, much like the react-refresh transform.

To do:
* [x] The transform doesn't seem to be applied. Pass the added test.

Test Plan: `cargo test -p next-dev --
test_crates_next_dev_tests_integration_turbopack_basic_styled_jsx
--nocapture`
---
 .../next-core/src/server_rendered_source.rs   |  1 +
 .../crates/next-core/src/web_entry_source.rs  |  1 +
 .../turbopack/basic/styled-jsx/index.js       | 25 +++++++++++++++++++
 .../crates/next-dev/tests/package.json        |  5 +++-
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js

diff --git a/packages/next-swc/crates/next-core/src/server_rendered_source.rs b/packages/next-swc/crates/next-core/src/server_rendered_source.rs
index f0ea3f64bab97..aa3b154ffefc8 100644
--- a/packages/next-swc/crates/next-core/src/server_rendered_source.rs
+++ b/packages/next-swc/crates/next-core/src/server_rendered_source.rs
@@ -87,6 +87,7 @@ pub async fn create_server_rendered_source(
     };
     let client_module_options_context = ModuleOptionsContext {
         enable_react_refresh,
+        enable_styled_jsx: true,
     }
     .cell();
     let next_client_transition = NextClientTransition {
diff --git a/packages/next-swc/crates/next-core/src/web_entry_source.rs b/packages/next-swc/crates/next-core/src/web_entry_source.rs
index 94a5517bd0700..3b05d48f8ec8d 100644
--- a/packages/next-swc/crates/next-core/src/web_entry_source.rs
+++ b/packages/next-swc/crates/next-core/src/web_entry_source.rs
@@ -57,6 +57,7 @@ pub async fn create_web_entry_source(
             // we try resolve it once at the root and pass down a context to all
             // the modules.
             enable_react_refresh,
+            enable_styled_jsx: true,
         }
         .into(),
     )
diff --git a/packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js b/packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js
new file mode 100644
index 0000000000000..c0691d8d98ffe
--- /dev/null
+++ b/packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import TestRenderer from 'react-test-renderer'
+
+describe('styled-jsx', () => {
+  it('compiles away <style jsx>', () => {
+    const test = TestRenderer.create(
+      <>
+        <span>This should be color: red</span>
+        <style jsx>{`
+          span {
+            color: red;
+          }
+        `}</style>
+      </>,
+    )
+
+    expect(test.toJSON()).toMatchObject({
+      children: ['This should be color: red'],
+      props: {
+        className: /jsx\-[0-9a-f]+/,
+      },
+      type: 'span',
+    })
+  })
+})
diff --git a/packages/next-swc/crates/next-dev/tests/package.json b/packages/next-swc/crates/next-dev/tests/package.json
index 8c4ae087a410d..02872e5dae7a4 100644
--- a/packages/next-swc/crates/next-dev/tests/package.json
+++ b/packages/next-swc/crates/next-dev/tests/package.json
@@ -2,7 +2,10 @@
   "private": true,
   "devDependencies": {
     "expect": "^24.5.0",
-    "jest-circus-browser": "^1.0.7"
+    "jest-circus-browser": "^1.0.7",
+    "react": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "styled-jsx": "^5.0.7"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"