Disable css-in-js transform for server layer in RSC

vercel · Oct 5, 2022 · 1bf800c · 1bf800c
1 parent 4a4119e
commit 1bf800c
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 25 deletions.
diff --git a/packages/next-swc/crates/core/src/lib.rs b/packages/next-swc/crates/core/src/lib.rs
@@ -90,6 +90,9 @@ pub struct TransformOptions {
     #[serde(default)]
     pub server_components: Option<react_server_components::Config>,
 
+    #[serde(default)]
+    pub styled_jsx: Option<bool>,
+
     #[serde(default)]
     pub styled_components: Option<styled_components::Config>,
 
@@ -159,7 +162,12 @@ where
                 )),
             _ => Either::Right(noop()),
         },
-        styled_jsx::styled_jsx(cm.clone(), file.name.clone()),
+        match opts.styled_jsx {
+            Some(true) =>
+                Either::Left(styled_jsx::styled_jsx(cm.clone(), file.name.clone())),
+            _ =>
+                Either::Right(noop())
+        },
         hook_optimizer::hook_optimizer(),
         match &opts.styled_components {
             Some(config) => Either::Left(styled_components::styled_components(

diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
@@ -36,9 +36,6 @@ function getBaseSWCOptions({
   relativeFilePathFromRoot,
   hasServerComponents,
 }) {
-  if (filename.includes('page.js')) {
-    console.log('isServerLayer', isServerLayer, filename)
-  }
   const parserConfig = getParserOptions({ filename, jsConfig })
   const paths = jsConfig?.compilerOptions?.paths
   const enableDecorators = Boolean(
@@ -121,12 +118,14 @@ function getBaseSWCOptions({
       : nextConfig?.compiler?.reactRemoveProperties,
     modularizeImports: nextConfig?.experimental?.modularizeImports,
     relay: nextConfig?.compiler?.relay,
-    ...(!isServerLayer
-      ? {
-          styledComponents: getStyledComponentsOptions(nextConfig, development),
+    // Disable css-in-js transform on server layer for server components
+    ...(isServerLayer
+      ? {}
+      : {
           emotion: getEmotionOptions(nextConfig, development),
-        }
-      : undefined),
+          styledComponents: getStyledComponentsOptions(nextConfig, development),
+          styledJsx: true,
+        }),
     serverComponents: hasServerComponents
       ? {
           isServer: !!isServerLayer,

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1626,7 +1626,7 @@ export default async function getBaseWebpackConfig(
             {
               ...codeCondition,
               issuerLayer: WEBPACK_LAYERS.middleware,
-              use: getBabelOrSwcLoader(),
+              use: defaultLoaders.babel,
             },
             ...(hasServerComponents
               ? [

diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts
@@ -265,6 +265,9 @@ const configSchema = {
             },
           ] as any,
         },
+        appDir: {
+          type: 'boolean',
+        },
         externalDir: {
           type: 'boolean',
         },

diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
@@ -76,8 +76,6 @@ describe('app dir - react server components', () => {
     expect(homeHTML).toMatch(/^<!DOCTYPE html><html/)
     expect(homeHTML).toContain('component:index.server')
     expect(homeHTML).toContain('header:test-util')
-    // support esm module on server side
-    expect(homeHTML).toContain('random-module-instance')
 
     const inlineFlightContents = []
     const $ = cheerio.load(homeHTML)
@@ -247,12 +245,17 @@ describe('app dir - react server components', () => {
   })
 
   it('should handle external async module libraries correctly', async () => {
-    const html = await renderViaHTTP(next.url, '/external-imports')
-    expect(html).toContain('module type:esm-export')
-    expect(html).toContain('export named:named')
-    expect(html).toContain('export value:123')
-    expect(html).toContain('export array:4,5,6')
-    expect(html).toContain('export object:{x:1}')
+    const clientHtml = await renderViaHTTP(next.url, '/external-imports/client')
+    const serverHtml = await renderViaHTTP(next.url, '/external-imports/server')
+
+    expect(clientHtml).toContain('module type:esm-export')
+    expect(clientHtml).toContain('export named:named')
+    expect(clientHtml).toContain('export value:123')
+    expect(clientHtml).toContain('export array:4,5,6')
+    expect(clientHtml).toContain('export object:{x:1}')
+
+    // support esm module on server side
+    expect(serverHtml).toContain('random-module-instance')
   })
 
   it('should handle various kinds of exports correctly', async () => {
@@ -314,6 +317,11 @@ describe('app dir - react server components', () => {
 
     // from styled-components
     expect(head).toMatch(/{color:(\s*)blue;?}/)
+
+    // css-in-js like styled-jsx in server components won't be transformed
+    expect(html).toMatch(
+      /\<style\>\.this-wont-be-transformed\{color:purple;\}<\/style\>/
+    )
   })
 
   it('should stick to the url without trailing /page suffix', async () => {

diff --git a/test/e2e/app-dir/rsc-basic/app/css-in-js/page.js b/test/e2e/app-dir/rsc-basic/app/css-in-js/page.js
@@ -6,6 +6,11 @@ export default function Page() {
     <div>
       <Comp />
       <StyledComp />
+      <style jsx>{`
+        .this-wont-be-transformed {
+          color: purple;
+        }
+      `}</style>
     </div>
   )
 }
diff --git a/...ir/rsc-basic/app/external-imports/page.js → ...basic/app/external-imports/client/page.js b/...ir/rsc-basic/app/external-imports/page.js → ...basic/app/external-imports/client/page.js
diff --git a/test/e2e/app-dir/rsc-basic/app/external-imports/server/page.js b/test/e2e/app-dir/rsc-basic/app/external-imports/server/page.js
@@ -0,0 +1,9 @@
+import { name } from 'random-module-instance'
+
+export default function Page() {
+  return (
+    <div>
+      <p>{name}</p>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/rsc-basic/app/page.js b/test/e2e/app-dir/rsc-basic/app/page.js
@@ -1,6 +1,5 @@
 import Nav from '../components/nav'
 import { headers } from 'next/dist/client/components/hooks-server'
-// import { name } from 'random-module-instance'
 
 const envVar = process.env.ENV_VAR_TEST
 const headerKey = 'x-next-test-client'
@@ -11,15 +10,9 @@ export default function Index() {
 
   return (
     <div>
-      <style jsx>{`
-        .this-wont-be-transformed {
-          color: blue;
-        }
-      `}</style>
       <h1>{`component:index.server`}</h1>
       <div>{'env:' + envVar}</div>
       <div>{'header:' + header}</div>
-      {/* <p className='this-wont-be-transformed'>{name}</p> */}
       <Nav />
     </div>
   )