Do not inline CSS in RSC payload for dynamic client nav (vercel#73182)

adamlaska · Nov 26, 2024 · a2f4b93 · a2f4b93
1 parent 7e87edd
commit a2f4b93
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 3 deletions.
diff --git a/packages/next/src/server/app-render/render-css-resource.tsx b/packages/next/src/server/app-render/render-css-resource.tsx
@@ -36,7 +36,7 @@ export function renderCssResource(
       entryCssFile.path
     )}${getAssetQueryString(ctx, true)}`
 
-    if (entryCssFile.inlined) {
+    if (entryCssFile.inlined && !ctx.parsedRequestHeaders.isRSCRequest) {
       return (
         <style
           key={index}

diff --git a/test/e2e/app-dir/app-inline-css/app/a/page.tsx b/test/e2e/app-dir/app-inline-css/app/a/page.tsx
@@ -0,0 +1,11 @@
+import './styles.css'
+
+export default function Page() {
+  return (
+    <div className="page" id="page-a">
+      Page A
+    </div>
+  )
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/test/e2e/app-dir/app-inline-css/app/a/styles.css b/test/e2e/app-dir/app-inline-css/app/a/styles.css
@@ -0,0 +1,3 @@
+.page {
+  font-size: 100px;
+}
diff --git a/test/e2e/app-dir/app-inline-css/app/b/page.tsx b/test/e2e/app-dir/app-inline-css/app/b/page.tsx
@@ -0,0 +1,11 @@
+import '../global.css' // duplicate global.css to test it's consolidated by React Float
+
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return (
+    <div className="page" id="page-b">
+      Page B
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/app-inline-css/app/layout.tsx b/test/e2e/app-dir/app-inline-css/app/layout.tsx
@@ -1,9 +1,25 @@
+import Link from 'next/link'
 import './global.css'
 
 export default function RootLayout({ children }) {
   return (
     <html>
-      <body>{children}</body>
+      <body>
+        <nav>
+          <Link href="/" prefetch={false}>
+            Home
+          </Link>
+          {' | '}
+          <Link href="/a" id="link-a" prefetch={false}>
+            Page A
+          </Link>
+          {' | '}
+          <Link href="/b" id="link-b" prefetch={false}>
+            Page B
+          </Link>
+        </nav>
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/test/e2e/app-dir/app-inline-css/index.test.ts b/test/e2e/app-dir/app-inline-css/index.test.ts
@@ -1,5 +1,4 @@
 import { nextTestSetup } from 'e2e-utils'
-
 describe('app dir - css - experimental inline css', () => {
   const { next, isNextDev } = nextTestSetup({
     files: __dirname,
@@ -15,5 +14,42 @@ describe('app dir - css - experimental inline css', () => {
       const p = await browser.elementByCss('p')
       expect(await p.getComputedCss('color')).toBe('rgb(255, 255, 0)') // yellow
     })
+
+    it('should not return rsc payload with inlined style as a dynamic client nav', async () => {
+      const rscPayload = await (
+        await next.fetch('/a', {
+          method: 'GET',
+          headers: {
+            rsc: '1',
+          },
+        })
+      ).text()
+
+      const style = 'font-size'
+
+      expect(rscPayload).toContain('__PAGE__') // sanity check
+      expect(rscPayload).not.toContain(style)
+
+      expect(
+        await (
+          await next.fetch('/a', {
+            method: 'GET',
+          })
+        ).text()
+      ).toContain(style) // sanity check that HTML has the style
+    })
+
+    it('should have only one style tag when navigating from page with inlining to page without inlining', async () => {
+      const browser = await next.browser('/')
+
+      await browser.waitForElementByCss('#link-b').click()
+      await browser.waitForElementByCss('#page-b')
+
+      const styleTags = await browser.elementsByCss('style')
+      const linkTags = await browser.elementsByCss('link[rel="stylesheet"]')
+
+      expect(styleTags).toHaveLength(1)
+      expect(linkTags).toHaveLength(0)
+    })
   })
 })