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

…ion (vercel#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

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