From 46f86f6a430ba810bdcd27df2fc23059b5f39f57 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 25 Nov 2022 16:40:44 +0100
Subject: [PATCH 1/2] Always transform styled-jsx for rsc and error with
 client-only condition

---
 packages/next/build/swc/options.js                | 15 ++++++++-------
 .../app/server-with-errors/styled-jsx/page.js     | 12 +++++++++---
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index d6037779f735..c7957946c284 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -118,13 +118,14 @@ function getBaseSWCOptions({
     modularizeImports: nextConfig?.experimental?.modularizeImports,
     relay: nextConfig?.compiler?.relay,
     // Disable css-in-js transform on server layer for server components
-    ...(isServerLayer
-      ? {}
-      : {
-          emotion: getEmotionOptions(nextConfig, development),
-          styledComponents: getStyledComponentsOptions(nextConfig, development),
-          styledJsx: true,
-        }),
+    ...{
+      // Always transform styled-jsx and error when `client-only` condition is triggered
+      styledJsx: true,
+      ...(isServerLayer && {
+        emotion: getEmotionOptions(nextConfig, development),
+        styledComponents: getStyledComponentsOptions(nextConfig, development),
+      }),
+    },
     serverComponents: hasServerComponents
       ? {
           isServer: !!isServerLayer,
diff --git a/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js b/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js
index 2ba4eaa6b98a..766d723e5e88 100644
--- a/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js
+++ b/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js
@@ -1,5 +1,11 @@
-import JSXStyle from 'styled-jsx/style'
-
 export default function Page() {
-  return <JSXStyle>{`p{color:red}`}</JSXStyle>
+  return (
+    <div>
+      <style jsx>{`
+        p {
+          color: red;
+        }
+      `}</style>
+    </div>
+  )
 }

From 29d1eb977da65589f0f719aa3430321fc3f55fc2 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 25 Nov 2022 17:12:41 +0100
Subject: [PATCH 2/2] fix and disable legacy tests

---
 packages/next/build/swc/options.js               | 16 +++++++---------
 test/e2e/app-dir/rsc-errors.test.ts              |  8 --------
 .../app/not-transform/styled-jsx/page.js         |  9 ---------
 3 files changed, 7 insertions(+), 26 deletions(-)
 delete mode 100644 test/e2e/app-dir/rsc-errors/app/not-transform/styled-jsx/page.js

diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index c7957946c284..8608a39d8bee 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -117,15 +117,13 @@ function getBaseSWCOptions({
       : nextConfig?.compiler?.reactRemoveProperties,
     modularizeImports: nextConfig?.experimental?.modularizeImports,
     relay: nextConfig?.compiler?.relay,
-    // Disable css-in-js transform on server layer for server components
-    ...{
-      // Always transform styled-jsx and error when `client-only` condition is triggered
-      styledJsx: true,
-      ...(isServerLayer && {
-        emotion: getEmotionOptions(nextConfig, development),
-        styledComponents: getStyledComponentsOptions(nextConfig, development),
-      }),
-    },
+    // Always transform styled-jsx and error when `client-only` condition is triggered
+    styledJsx: true,
+    // Disable css-in-js libs (without client-only integration) transform on server layer for server components
+    ...(!isServerLayer && {
+      emotion: getEmotionOptions(nextConfig, development),
+      styledComponents: getStyledComponentsOptions(nextConfig, development),
+    }),
     serverComponents: hasServerComponents
       ? {
           isServer: !!isServerLayer,
diff --git a/test/e2e/app-dir/rsc-errors.test.ts b/test/e2e/app-dir/rsc-errors.test.ts
index 79d99edd4726..75bd36be8f57 100644
--- a/test/e2e/app-dir/rsc-errors.test.ts
+++ b/test/e2e/app-dir/rsc-errors.test.ts
@@ -90,14 +90,6 @@ describe('app dir - rsc errors', () => {
     )
   })
 
-  it('should not transform css-in-js such as styled-jsx in server components', async () => {
-    const html = await renderViaHTTP(next.url, '/not-transform/styled-jsx')
-
-    expect(html).toMatch(
-      /<style>\s*\.this-wont-be-transformed\s*\{\s*color:\s*purple;\s*\}\s*<\/style>/
-    )
-  })
-
   it('should error when page component export is not valid', async () => {
     const html = await renderViaHTTP(
       next.url,
diff --git a/test/e2e/app-dir/rsc-errors/app/not-transform/styled-jsx/page.js b/test/e2e/app-dir/rsc-errors/app/not-transform/styled-jsx/page.js
deleted file mode 100644
index 0f6720fe9d02..000000000000
--- a/test/e2e/app-dir/rsc-errors/app/not-transform/styled-jsx/page.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function page() {
-  return (
-    <style jsx>{`
-      .this-wont-be-transformed {
-        color: purple;
-      }
-    `}</style>
-  )
-}