Fix not found css not being preloaded while navigation

Author: huozhi

package.json

@@ -80,6 +80,7 @@
     "@next/swc": "workspace:*",
     "@next/third-parties": "workspace:*",
     "@opentelemetry/api": "1.4.1",
+    "@picocss/pico": "1.5.10",
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.3.55",

packages/next/src/server/app-render/app-render.tsx

@@ -694,6 +694,7 @@ export async function renderToHTMLOrFlight(
 
       const [NotFound, notFoundStyles] = notFound
         ? await createComponentAndStyles({
+            shouldPreload: true,
             filePath: notFound[1],
             getComponent: notFound[0],
             injectedCSS: injectedCSSWithCurrentLayout,

pnpm-lock.yaml

@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function page() {
+  notFound()
+}

test/e2e/app-dir/app-css/app/navigate/404/page.js

@@ -0,0 +1,12 @@
+'use client'
+
+import styles from './not-found-button.module.css'
+import React from 'react'
+
+export const Button = ({ children, ...props }) => {
+  return (
+    <button {...props} className={styles.button}>
+      {children}
+    </button>
+  )
+}

test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js

@@ -0,0 +1,7 @@
+.button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: rgb(0, 128, 0);
+  color: #fff;
+  padding: 8px 16px;
+}

test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css

@@ -0,0 +1,22 @@
+'use client'
+import { Button } from './button/not-found-button'
+import { useRouter } from 'next/navigation'
+
+function NotFound() {
+  const router = useRouter()
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <Button
+        id="back"
+        onClick={() => {
+          router.push('/navigate')
+        }}
+      >
+        Back
+      </Button>
+    </div>
+  )
+}
+
+export default NotFound

test/e2e/app-dir/app-css/app/navigate/not-found.js

@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { Button as NotFoundButton } from './button/not-found-button'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <NotFoundButton
+        id="nav-button"
+        onClick={() => {
+          router.push('/navigate/404')
+        }}
+      >
+        Not Found
+      </NotFoundButton>
+    </>
+  )
+}

test/e2e/app-dir/app-css/app/navigate/page.js

@@ -215,6 +215,35 @@ createNextDescribe(
           )
         })
 
+        it('should load css while navigation between not-found and page', async () => {
+          const browser = await next.browser('/navigate')
+          await check(
+            async () =>
+              await browser.eval(
+                `window.getComputedStyle(document.querySelector('#nav-button')).backgroundColor`
+              ),
+            'rgb(0, 128, 0)'
+          )
+          await browser.elementByCss('#nav-button').click()
+          await browser.waitForElementByCss('#back')
+          await check(
+            async () =>
+              await browser.eval(
+                `window.getComputedStyle(document.querySelector('#back')).backgroundColor`
+              ),
+            'rgb(0, 128, 0)'
+          )
+          await browser.elementByCss('#back').click()
+          await browser.waitForElementByCss('#nav-button')
+          await check(
+            async () =>
+              await browser.eval(
+                `window.getComputedStyle(document.querySelector('#nav-button')).backgroundColor`
+              ),
+            'rgb(0, 128, 0)'
+          )
+        })
+
         it('should include css imported in server not-found.js', async () => {
           const browser = await next.browser('/not-found/servercomponent')
           await check(