fix Head rendering when parallel routes are present

vercel · May 29, 2024 · 66254e1 · 66254e1
1 parent 99eb03d
commit 66254e1
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 2 deletions.
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -661,7 +661,7 @@ function Router({
   let content = (
     <RedirectBoundary>
       {head}
-      {/* {cache.layerAssets} */}
+      {cache.layerAssets}
       {cache.rsc}
       <AppRouterAnnouncer tree={tree} />
     </RedirectBoundary>

diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx
@@ -467,7 +467,7 @@ function InnerLayoutRouter({
         loading: childNode.loading,
       }}
     >
-      {/* {childNode.layerAssets} */}
+      {childNode.layerAssets}
       {resolvedRsc}
     </LayoutRouterContext.Provider>
   )

diff --git a/test/e2e/app-dir/parallel-routes-css/app/@foo/[...catchAll]/page.tsx b/test/e2e/app-dir/parallel-routes-css/app/@foo/[...catchAll]/page.tsx
@@ -0,0 +1,9 @@
+import styles from './style.module.css'
+
+export default function Page() {
+  return (
+    <div className={styles.bgRed} id="slot">
+      Slot
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/parallel-routes-css/app/@foo/[...catchAll]/style.module.css b/test/e2e/app-dir/parallel-routes-css/app/@foo/[...catchAll]/style.module.css
@@ -0,0 +1,3 @@
+.bgRed {
+  background-color: red;
+}
diff --git a/test/e2e/app-dir/parallel-routes-css/app/@foo/default.tsx b/test/e2e/app-dir/parallel-routes-css/app/@foo/default.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
diff --git a/test/e2e/app-dir/parallel-routes-css/app/layout.tsx b/test/e2e/app-dir/parallel-routes-css/app/layout.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+const RootLayout = ({
+  children,
+  foo,
+}: {
+  children: ReactNode
+  foo: ReactNode
+}) => {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        {foo}
+      </body>
+    </html>
+  )
+}
+
+export default RootLayout
diff --git a/test/e2e/app-dir/parallel-routes-css/app/nested/page.tsx b/test/e2e/app-dir/parallel-routes-css/app/nested/page.tsx
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+export const metadata = {
+  title: 'Nested Page',
+}
+
+export default function Page() {
+  return (
+    <div className="sub">
+      <p>Sub</p>
+      <Link href="/">Home</Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/parallel-routes-css/app/page.tsx b/test/e2e/app-dir/parallel-routes-css/app/page.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import styles from './style.module.css'
+
+export const metadata = {
+  title: 'Home Page',
+}
+
+export default function Home() {
+  return (
+    <main id="main" className={styles.bgBlue}>
+      <p>Main</p>
+      <Link href="/nested">Nested Page</Link>
+    </main>
+  )
+}
diff --git a/test/e2e/app-dir/parallel-routes-css/app/style.module.css b/test/e2e/app-dir/parallel-routes-css/app/style.module.css
@@ -0,0 +1,3 @@
+.bgBlue {
+  background-color: blue;
+}
diff --git a/test/e2e/app-dir/parallel-routes-css/parallel-routes-css.test.ts b/test/e2e/app-dir/parallel-routes-css/parallel-routes-css.test.ts
@@ -0,0 +1,50 @@
+import { nextTestSetup } from 'e2e-utils'
+import type { BrowserInterface } from 'next-webdriver'
+
+describe('parallel-routes-catchall-css', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  async function getChildrenBackgroundColor(browser: BrowserInterface) {
+    return browser.eval(
+      `window.getComputedStyle(document.getElementById('main')).backgroundColor`
+    )
+  }
+
+  async function getSlotBackgroundColor(browser: BrowserInterface) {
+    return browser.eval(
+      `window.getComputedStyle(document.getElementById('slot')).backgroundColor`
+    )
+  }
+
+  it('should properly load the Head content from multiple leaf segments', async () => {
+    const browser = await next.browser('/')
+
+    // the page background should be blue
+    expect(await getChildrenBackgroundColor(browser)).toBe('rgb(0, 0, 255)')
+
+    expect(await browser.elementByCss('title').text()).toBe('Home Page')
+    expect(await browser.elementsByCss('title')).toHaveLength(1)
+
+    // navigate to the page that matches a parallel route
+    await browser.elementByCss("[href='/nested']").click()
+    await browser.waitForElementByCss('#slot')
+
+    // the slot's background color should be red
+    expect(await getSlotBackgroundColor(browser)).toBe('rgb(255, 0, 0)')
+
+    // there should no longer be a main element
+    expect(await browser.hasElementByCssSelector('#main')).toBeFalsy()
+
+    // the slot background should still be red on a fresh load
+    await browser.refresh()
+    expect(await getSlotBackgroundColor(browser)).toBe('rgb(255, 0, 0)')
+
+    // when we navigate from the route that matched the catch-all, we should see the CSS for the main element
+    await browser.elementByCss("[href='/']").click()
+    await browser.waitForElementByCss('#main')
+
+    expect(await getChildrenBackgroundColor(browser)).toBe('rgb(0, 0, 255)')
+  })
+})
diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json
@@ -2415,6 +2415,15 @@
       "flakey": [],
       "runtimeError": false
     },
+    "test/e2e/app-dir/parallel-routes-css/parallel-routes-css.test.ts": {
+      "passed": [],
+      "failed": [
+        "parallel-routes-catchall-css should properly load CSS from multiple leaf segments"
+      ],
+      "pending": [],
+      "flakey": [],
+      "runtimeError": false
+    },
     "test/e2e/app-dir/parallel-routes-layouts/parallel-routes-layouts.test.ts": {
       "passed": [
         "parallel-routes-layouts should properly render layouts for multiple slots"