Always transform styled-jsx for rsc and error with client-only condition

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,

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,

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>
+  )
 }