From 31e0bfeef005765b88f71cd3ecfb86a46a252428 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 26 Nov 2022 01:36:18 +0100
Subject: [PATCH] Always transform styled-jsx for rsc and error with
 client-only condition (#43386)

Previously we stopped transform css-in-js libraries for RSC server layer because it's not encouraged to use them in server components but client components for saving the bytes of RSC payload.
We can detect styled-jsx usage on RSC server layer and error with `client-only` condition, but since it was not transformed properly so it's not erroring properly.

In the future, once styled-components and emotion have `client-only` depepdency integrated so we can re-enable the transform for them on server layer

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
---
 packages/next/build/swc/options.js                | 15 +++++++--------
 test/e2e/app-dir/rsc-errors.test.ts               |  8 --------
 .../app/not-transform/styled-jsx/page.js          |  9 ---------
 .../app/server-with-errors/styled-jsx/page.js     | 12 +++++++++---
 4 files changed, 16 insertions(+), 28 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 d6037779f735..8608a39d8bee 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -117,14 +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
-    ...(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,
+    // 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>
-  )
-}
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>
+  )
 }