From d60ed40802b1e0f95169279b72641c11f103bb74 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 11 Aug 2023 15:52:10 +0200
Subject: [PATCH 01/13] Fix not found css not being preloaded while navigation

---
 package.json                                  |  1 +
 .../next/src/server/app-render/app-render.tsx |  1 +
 pnpm-lock.yaml                                | 18 ++++--------
 .../app-dir/app-css/app/navigate/404/page.js  |  5 ++++
 .../app/navigate/button/not-found-button.js   | 12 ++++++++
 .../button/not-found-button.module.css        |  7 +++++
 .../app-dir/app-css/app/navigate/not-found.js | 22 ++++++++++++++
 test/e2e/app-dir/app-css/app/navigate/page.js | 20 +++++++++++++
 test/e2e/app-dir/app-css/index.test.ts        | 29 +++++++++++++++++++
 9 files changed, 102 insertions(+), 13 deletions(-)
 create mode 100644 test/e2e/app-dir/app-css/app/navigate/404/page.js
 create mode 100644 test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js
 create mode 100644 test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css
 create mode 100644 test/e2e/app-dir/app-css/app/navigate/not-found.js
 create mode 100644 test/e2e/app-dir/app-css/app/navigate/page.js

diff --git a/package.json b/package.json
index 867a9d10d3f917..1222cc1ae11a30 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,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",
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 4567619a071920..3aaf6fe633278e 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -651,6 +651,7 @@ export async function renderToHTMLOrFlight(
 
       const [NotFound, notFoundStyles] = notFound
         ? await createComponentAndStyles({
+            shouldPreload: true,
             filePath: notFound[1],
             getComponent: notFound[0],
             injectedCSS: injectedCSSWithCurrentLayout,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3798e1a7622fa5..ae6a08863d6737 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       '@opentelemetry/api':
         specifier: 1.4.1
         version: 1.4.1
+      '@picocss/pico':
+        specifier: 1.5.10
+        version: 1.5.10
       '@svgr/webpack':
         specifier: 5.5.0
         version: 5.5.0
@@ -7277,19 +7280,8 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /@opentelemetry/core@1.15.2(@opentelemetry/api@1.4.1):
-    resolution: {integrity: sha512-+gBv15ta96WqkHZaPpcDHiaz0utiiHZVfm2YOYSqFGrUaJpPkMoSuLBB58YFQGi6Rsb9EHos84X6X5+9JspmLw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
-    dependencies:
-      '@opentelemetry/api': 1.4.1
-      '@opentelemetry/semantic-conventions': 1.15.2
-    dev: true
-
-  /@opentelemetry/semantic-conventions@1.15.2:
-    resolution: {integrity: sha512-CjbOKwk2s+3xPIMcd5UNYQzsf+v94RczbdNix9/kQh38WiQkM90sUOi3if8eyHFgiBjBjhwXrA7W3ydiSQP9mw==}
-    engines: {node: '>=14'}
+  /@picocss/pico@1.5.10:
+    resolution: {integrity: sha512-+LafMsrwPxXQMk6sI///TmSInCwwZmq+K7SikyL3N/4GhhwzyPC+TQLUEqmrLyjluR+uIpFFcqjty30Rtr6GxQ==}
     dev: true
 
   /@pkgr/utils@2.3.1:
diff --git a/test/e2e/app-dir/app-css/app/navigate/404/page.js b/test/e2e/app-dir/app-css/app/navigate/404/page.js
new file mode 100644
index 00000000000000..ebc0f638b324ec
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/404/page.js
@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function page() {
+  notFound()
+}
diff --git a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js
new file mode 100644
index 00000000000000..b6cddc503a5fa0
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.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>
+  )
+}
diff --git a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css
new file mode 100644
index 00000000000000..05ee13da1c75f7
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css
@@ -0,0 +1,7 @@
+.button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: rgb(0, 128, 0);
+  color: #fff;
+  padding: 8px 16px;
+}
diff --git a/test/e2e/app-dir/app-css/app/navigate/not-found.js b/test/e2e/app-dir/app-css/app/navigate/not-found.js
new file mode 100644
index 00000000000000..5cbec81b9ec60a
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/not-found.js
@@ -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
diff --git a/test/e2e/app-dir/app-css/app/navigate/page.js b/test/e2e/app-dir/app-css/app/navigate/page.js
new file mode 100644
index 00000000000000..3fa63bb3c97c3a
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/page.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>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index 457d9790c3ac09..d357ccebb8c99b 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -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(

From 220c865ee6c56a1c0e285580e21ac6ace711516a Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 13 Aug 2023 22:14:53 +0200
Subject: [PATCH 02/13] revert

---
 packages/next/src/server/app-render/app-render.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 3aaf6fe633278e..4567619a071920 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -651,7 +651,6 @@ export async function renderToHTMLOrFlight(
 
       const [NotFound, notFoundStyles] = notFound
         ? await createComponentAndStyles({
-            shouldPreload: true,
             filePath: notFound[1],
             getComponent: notFound[0],
             injectedCSS: injectedCSSWithCurrentLayout,

From 7467f7210c183c5103acab86d8da69abf1c6819e Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 14 Aug 2023 13:04:07 +0200
Subject: [PATCH 03/13] 404 page

---
 .../app-css/app/{navigate => }/404/page.js    |  0
 test/e2e/app-dir/app-css/app/layout.js        |  6 ++---
 .../app/{navigate => navigate-404}/page.js    |  8 +++----
 .../app-dir/app-css/app/navigate/not-found.js | 22 -------------------
 test/e2e/app-dir/app-css/app/not-found.js     |  8 ++++++-
 .../button/button.js}                         |  2 +-
 .../button/button.module.css}                 |  0
 .../components/navigate-404-section.js        | 20 +++++++++++++++++
 8 files changed, 35 insertions(+), 31 deletions(-)
 rename test/e2e/app-dir/app-css/app/{navigate => }/404/page.js (100%)
 rename test/e2e/app-dir/app-css/app/{navigate => navigate-404}/page.js (60%)
 delete mode 100644 test/e2e/app-dir/app-css/app/navigate/not-found.js
 rename test/e2e/app-dir/app-css/{app/navigate/button/not-found-button.js => components/button/button.js} (78%)
 rename test/e2e/app-dir/app-css/{app/navigate/button/not-found-button.module.css => components/button/button.module.css} (100%)
 create mode 100644 test/e2e/app-dir/app-css/components/navigate-404-section.js

diff --git a/test/e2e/app-dir/app-css/app/navigate/404/page.js b/test/e2e/app-dir/app-css/app/404/page.js
similarity index 100%
rename from test/e2e/app-dir/app-css/app/navigate/404/page.js
rename to test/e2e/app-dir/app-css/app/404/page.js
diff --git a/test/e2e/app-dir/app-css/app/layout.js b/test/e2e/app-dir/app-css/app/layout.js
index 3445981d81aabb..9f0760ce6055cd 100644
--- a/test/e2e/app-dir/app-css/app/layout.js
+++ b/test/e2e/app-dir/app-css/app/layout.js
@@ -1,7 +1,7 @@
-import '../styles/global.css'
-import './style.css'
+// import '../styles/global.css'
+// import './style.css'
 
-export const revalidate = 0
+// export const revalidate = 0
 
 export default function Root({ children }) {
   return (
diff --git a/test/e2e/app-dir/app-css/app/navigate/page.js b/test/e2e/app-dir/app-css/app/navigate-404/page.js
similarity index 60%
rename from test/e2e/app-dir/app-css/app/navigate/page.js
rename to test/e2e/app-dir/app-css/app/navigate-404/page.js
index 3fa63bb3c97c3a..3e11ebc34900fe 100644
--- a/test/e2e/app-dir/app-css/app/navigate/page.js
+++ b/test/e2e/app-dir/app-css/app/navigate-404/page.js
@@ -1,20 +1,20 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { Button as NotFoundButton } from './button/not-found-button'
+import { Button } from '../../components/button/button'
 
 export default function Page() {
   const router = useRouter()
   return (
     <>
-      <NotFoundButton
+      <Button
         id="nav-button"
         onClick={() => {
-          router.push('/navigate/404')
+          router.push('/404')
         }}
       >
         Not Found
-      </NotFoundButton>
+      </Button>
     </>
   )
 }
diff --git a/test/e2e/app-dir/app-css/app/navigate/not-found.js b/test/e2e/app-dir/app-css/app/navigate/not-found.js
deleted file mode 100644
index 5cbec81b9ec60a..00000000000000
--- a/test/e2e/app-dir/app-css/app/navigate/not-found.js
+++ /dev/null
@@ -1,22 +0,0 @@
-'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
diff --git a/test/e2e/app-dir/app-css/app/not-found.js b/test/e2e/app-dir/app-css/app/not-found.js
index 7e4bec08aea969..9bd8aa5bd41e3f 100644
--- a/test/e2e/app-dir/app-css/app/not-found.js
+++ b/test/e2e/app-dir/app-css/app/not-found.js
@@ -1,5 +1,11 @@
 import styles from './not-found.module.css'
+import Navigate404Section from '../components/navigate-404-section'
 
 export default function RootNotFound() {
-  return <h1 className={'not-found ' + styles.blackBg}>Root not found</h1>
+  return (
+    <>
+      <h1 className={'not-found ' + styles.blackBg}>Root not found</h1>
+      <Navigate404Section />
+    </>
+  )
 }
diff --git a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js b/test/e2e/app-dir/app-css/components/button/button.js
similarity index 78%
rename from test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js
rename to test/e2e/app-dir/app-css/components/button/button.js
index b6cddc503a5fa0..0873c1e83eab58 100644
--- a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js
+++ b/test/e2e/app-dir/app-css/components/button/button.js
@@ -1,6 +1,6 @@
 'use client'
 
-import styles from './not-found-button.module.css'
+import styles from './button.module.css'
 import React from 'react'
 
 export const Button = ({ children, ...props }) => {
diff --git a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css b/test/e2e/app-dir/app-css/components/button/button.module.css
similarity index 100%
rename from test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css
rename to test/e2e/app-dir/app-css/components/button/button.module.css
diff --git a/test/e2e/app-dir/app-css/components/navigate-404-section.js b/test/e2e/app-dir/app-css/components/navigate-404-section.js
new file mode 100644
index 00000000000000..dfd54f0eb8ac8b
--- /dev/null
+++ b/test/e2e/app-dir/app-css/components/navigate-404-section.js
@@ -0,0 +1,20 @@
+'use client'
+
+import { Button } from './button/button'
+import { useRouter } from 'next/navigation'
+
+export default function Navigate404Section() {
+  const router = useRouter()
+  return (
+    <p>
+      <Button
+        id="go-to-navigate-404"
+        onClick={() => {
+          router.push('/navigate-404')
+        }}
+      >
+        Go to /navigate-404
+      </Button>
+    </p>
+  )
+}

From 10e847c46a400016eb429413c39743a5e3c0e3e6 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 15 Aug 2023 12:19:14 +0200
Subject: [PATCH 04/13] mark all as precedence=next

---
 packages/next/src/server/app-render/app-render.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 4567619a071920..93c4fadf9e4b05 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -406,7 +406,7 @@ export async function renderToHTMLOrFlight(
     }: {
       filePath: string
       getComponent: () => any
-      shouldPreload?: boolean
+      shouldPreload: boolean
       injectedCSS: Set<string>
     }): Promise<any> => {
       const cssHrefs = getCssInlinedLinkTags(
@@ -622,6 +622,7 @@ export async function renderToHTMLOrFlight(
       const [ErrorComponent, errorStyles] = error
         ? await createComponentAndStyles({
             filePath: error[1],
+            shouldPreload: true,
             getComponent: error[0],
             injectedCSS: injectedCSSWithCurrentLayout,
           })
@@ -630,6 +631,7 @@ export async function renderToHTMLOrFlight(
       const [Loading, loadingStyles] = loading
         ? await createComponentAndStyles({
             filePath: loading[1],
+            shouldPreload: true,
             getComponent: loading[0],
             injectedCSS: injectedCSSWithCurrentLayout,
           })
@@ -652,6 +654,7 @@ export async function renderToHTMLOrFlight(
       const [NotFound, notFoundStyles] = notFound
         ? await createComponentAndStyles({
             filePath: notFound[1],
+            shouldPreload: true,
             getComponent: notFound[0],
             injectedCSS: injectedCSSWithCurrentLayout,
           })

From ea052d618ee65e4c274692ea38cd48d9ca8d5e60 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 15 Aug 2023 12:22:27 +0200
Subject: [PATCH 05/13] move test case

---
 test/e2e/app-dir/app-css/app/not-found.js                 | 8 +-------
 .../{app-css => not-found/css-precedence}/app/404/page.js | 0
 .../css-precedence}/app/navigate-404/page.js              | 2 +-
 .../css-precedence}/components/button/button.js           | 0
 .../css-precedence}/components/button/button.module.css   | 0
 .../css-precedence}/components/navigate-404-section.js    | 0
 6 files changed, 2 insertions(+), 8 deletions(-)
 rename test/e2e/app-dir/{app-css => not-found/css-precedence}/app/404/page.js (100%)
 rename test/e2e/app-dir/{app-css => not-found/css-precedence}/app/navigate-404/page.js (81%)
 rename test/e2e/app-dir/{app-css => not-found/css-precedence}/components/button/button.js (100%)
 rename test/e2e/app-dir/{app-css => not-found/css-precedence}/components/button/button.module.css (100%)
 rename test/e2e/app-dir/{app-css => not-found/css-precedence}/components/navigate-404-section.js (100%)

diff --git a/test/e2e/app-dir/app-css/app/not-found.js b/test/e2e/app-dir/app-css/app/not-found.js
index 9bd8aa5bd41e3f..7e4bec08aea969 100644
--- a/test/e2e/app-dir/app-css/app/not-found.js
+++ b/test/e2e/app-dir/app-css/app/not-found.js
@@ -1,11 +1,5 @@
 import styles from './not-found.module.css'
-import Navigate404Section from '../components/navigate-404-section'
 
 export default function RootNotFound() {
-  return (
-    <>
-      <h1 className={'not-found ' + styles.blackBg}>Root not found</h1>
-      <Navigate404Section />
-    </>
-  )
+  return <h1 className={'not-found ' + styles.blackBg}>Root not found</h1>
 }
diff --git a/test/e2e/app-dir/app-css/app/404/page.js b/test/e2e/app-dir/not-found/css-precedence/app/404/page.js
similarity index 100%
rename from test/e2e/app-dir/app-css/app/404/page.js
rename to test/e2e/app-dir/not-found/css-precedence/app/404/page.js
diff --git a/test/e2e/app-dir/app-css/app/navigate-404/page.js b/test/e2e/app-dir/not-found/css-precedence/app/navigate-404/page.js
similarity index 81%
rename from test/e2e/app-dir/app-css/app/navigate-404/page.js
rename to test/e2e/app-dir/not-found/css-precedence/app/navigate-404/page.js
index 3e11ebc34900fe..1f89e205ec7395 100644
--- a/test/e2e/app-dir/app-css/app/navigate-404/page.js
+++ b/test/e2e/app-dir/not-found/css-precedence/app/navigate-404/page.js
@@ -1,7 +1,7 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { Button } from '../../components/button/button'
+import { Button } from '../../../../app-css/components/button/button'
 
 export default function Page() {
   const router = useRouter()
diff --git a/test/e2e/app-dir/app-css/components/button/button.js b/test/e2e/app-dir/not-found/css-precedence/components/button/button.js
similarity index 100%
rename from test/e2e/app-dir/app-css/components/button/button.js
rename to test/e2e/app-dir/not-found/css-precedence/components/button/button.js
diff --git a/test/e2e/app-dir/app-css/components/button/button.module.css b/test/e2e/app-dir/not-found/css-precedence/components/button/button.module.css
similarity index 100%
rename from test/e2e/app-dir/app-css/components/button/button.module.css
rename to test/e2e/app-dir/not-found/css-precedence/components/button/button.module.css
diff --git a/test/e2e/app-dir/app-css/components/navigate-404-section.js b/test/e2e/app-dir/not-found/css-precedence/components/navigate-404-section.js
similarity index 100%
rename from test/e2e/app-dir/app-css/components/navigate-404-section.js
rename to test/e2e/app-dir/not-found/css-precedence/components/navigate-404-section.js

From 9ec12227397293ca79cea533db2e3d7c48f6158f Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 15 Aug 2023 12:27:01 +0200
Subject: [PATCH 06/13] update test

---
 .../not-found/css-precedence/app/404/page.js  |  5 -----
 .../not-found/css-precedence/app/layout.js    |  7 ++++++
 .../not-found/css-precedence/app/not-found.js | 22 +++++++++++++++++++
 .../app/{navigate-404 => }/page.js            |  2 +-
 4 files changed, 30 insertions(+), 6 deletions(-)
 delete mode 100644 test/e2e/app-dir/not-found/css-precedence/app/404/page.js
 create mode 100644 test/e2e/app-dir/not-found/css-precedence/app/layout.js
 create mode 100644 test/e2e/app-dir/not-found/css-precedence/app/not-found.js
 rename test/e2e/app-dir/not-found/css-precedence/app/{navigate-404 => }/page.js (81%)

diff --git a/test/e2e/app-dir/not-found/css-precedence/app/404/page.js b/test/e2e/app-dir/not-found/css-precedence/app/404/page.js
deleted file mode 100644
index ebc0f638b324ec..00000000000000
--- a/test/e2e/app-dir/not-found/css-precedence/app/404/page.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { notFound } from 'next/navigation'
-
-export default function page() {
-  notFound()
-}
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/layout.js b/test/e2e/app-dir/not-found/css-precedence/app/layout.js
new file mode 100644
index 00000000000000..750eb927b19801
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/not-found.js b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
new file mode 100644
index 00000000000000..e3b9418ad63e10
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
@@ -0,0 +1,22 @@
+'use client'
+
+import { Button } from '../components/button/button'
+import { useRouter } from 'next/navigation'
+
+function NotFound() {
+  const router = useRouter()
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <Button
+        onClick={() => {
+          router.push('/')
+        }}
+      >
+        Home
+      </Button>
+    </div>
+  )
+}
+
+export default NotFound
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/navigate-404/page.js b/test/e2e/app-dir/not-found/css-precedence/app/page.js
similarity index 81%
rename from test/e2e/app-dir/not-found/css-precedence/app/navigate-404/page.js
rename to test/e2e/app-dir/not-found/css-precedence/app/page.js
index 1f89e205ec7395..ca23f15675725d 100644
--- a/test/e2e/app-dir/not-found/css-precedence/app/navigate-404/page.js
+++ b/test/e2e/app-dir/not-found/css-precedence/app/page.js
@@ -1,7 +1,7 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { Button } from '../../../../app-css/components/button/button'
+import { Button } from '../components/button/button'
 
 export default function Page() {
   const router = useRouter()

From 774572b4ee8a2f70fd5db0c7d25d5e84e1d2931d Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 15 Aug 2023 12:33:42 +0200
Subject: [PATCH 07/13] update test

---
 test/e2e/app-dir/app-css/index.test.ts        | 29 -------------
 .../not-found/css-precedence/app/not-found.js |  1 +
 .../not-found/css-precedence/app/page.js      |  2 +-
 .../not-found/css-precedence/index.test.ts    | 43 +++++++++++++++++++
 4 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 test/e2e/app-dir/not-found/css-precedence/index.test.ts

diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index d357ccebb8c99b..457d9790c3ac09 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -215,35 +215,6 @@ 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(
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/not-found.js b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
index e3b9418ad63e10..16864ac3a16003 100644
--- a/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
+++ b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
@@ -9,6 +9,7 @@ function NotFound() {
     <div>
       <h1>404 - Page Not Found</h1>
       <Button
+        id="go-to-index"
         onClick={() => {
           router.push('/')
         }}
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/page.js b/test/e2e/app-dir/not-found/css-precedence/app/page.js
index ca23f15675725d..c72c992530b43b 100644
--- a/test/e2e/app-dir/not-found/css-precedence/app/page.js
+++ b/test/e2e/app-dir/not-found/css-precedence/app/page.js
@@ -8,7 +8,7 @@ export default function Page() {
   return (
     <>
       <Button
-        id="nav-button"
+        id="go-to-404"
         onClick={() => {
           router.push('/404')
         }}
diff --git a/test/e2e/app-dir/not-found/css-precedence/index.test.ts b/test/e2e/app-dir/not-found/css-precedence/index.test.ts
new file mode 100644
index 00000000000000..7c3bb44b004989
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/index.test.ts
@@ -0,0 +1,43 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'app dir css',
+  {
+    files: __dirname,
+    skipDeployment: true,
+    dependencies: {
+      sass: 'latest',
+    },
+  },
+  ({ next }) => {
+    it('should load css while navigation between not-found and page', async () => {
+      const browser = await next.browser('/')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-404')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+      await browser.elementByCss('#go-to-404').click()
+      await browser.waitForElementByCss('#go-to-index')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-index')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+      await browser.elementByCss('#go-to-index').click()
+      await browser.waitForElementByCss('#go-to-404')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-404')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+    })
+  }
+)

From cbb756ef5ff2afe468abea5cf7634a7f373abbe8 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 15 Aug 2023 12:35:22 +0200
Subject: [PATCH 08/13] revert

---
 test/e2e/app-dir/app-css/app/layout.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/app-dir/app-css/app/layout.js b/test/e2e/app-dir/app-css/app/layout.js
index 9f0760ce6055cd..3445981d81aabb 100644
--- a/test/e2e/app-dir/app-css/app/layout.js
+++ b/test/e2e/app-dir/app-css/app/layout.js
@@ -1,7 +1,7 @@
-// import '../styles/global.css'
-// import './style.css'
+import '../styles/global.css'
+import './style.css'
 
-// export const revalidate = 0
+export const revalidate = 0
 
 export default function Root({ children }) {
   return (

From 89a0335a18a47efbc8372b38ba0de9bd69a8e54c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 22 Aug 2023 22:13:30 +0200
Subject: [PATCH 09/13] fix resolution

---
 pnpm-lock.yaml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae6a08863d6737..128e5bf4de7a9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7280,6 +7280,21 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
+  /@opentelemetry/core@1.15.2(@opentelemetry/api@1.4.1):
+    resolution: {integrity: sha512-+gBv15ta96WqkHZaPpcDHiaz0utiiHZVfm2YOYSqFGrUaJpPkMoSuLBB58YFQGi6Rsb9EHos84X6X5+9JspmLw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+    dependencies:
+      '@opentelemetry/api': 1.4.1
+      '@opentelemetry/semantic-conventions': 1.15.2
+    dev: true
+
+  /@opentelemetry/semantic-conventions@1.15.2:
+    resolution: {integrity: sha512-CjbOKwk2s+3xPIMcd5UNYQzsf+v94RczbdNix9/kQh38WiQkM90sUOi3if8eyHFgiBjBjhwXrA7W3ydiSQP9mw==}
+    engines: {node: '>=14'}
+    dev: true
+
   /@picocss/pico@1.5.10:
     resolution: {integrity: sha512-+LafMsrwPxXQMk6sI///TmSInCwwZmq+K7SikyL3N/4GhhwzyPC+TQLUEqmrLyjluR+uIpFFcqjty30Rtr6GxQ==}
     dev: true

From 6e459e6defbd7b72e9c10032d90ed9d86d356a2f Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Aug 2023 00:46:38 +0200
Subject: [PATCH 10/13] always use next precedence, update tests

---
 packages/next/src/server/app-render/app-render.tsx | 12 +-----------
 test/e2e/app-dir/app-css/index.test.ts             | 11 ++++++-----
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 93c4fadf9e4b05..1494da7e5674d4 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -401,12 +401,10 @@ export async function renderToHTMLOrFlight(
     const createComponentAndStyles = async ({
       filePath,
       getComponent,
-      shouldPreload,
       injectedCSS,
     }: {
       filePath: string
       getComponent: () => any
-      shouldPreload: boolean
       injectedCSS: Set<string>
     }): Promise<any> => {
       const cssHrefs = getCssInlinedLinkTags(
@@ -433,11 +431,7 @@ export async function renderToHTMLOrFlight(
             // During HMR, it's critical to use different `precedence` values
             // for different stylesheets, so their order will be kept.
             // https://github.com/facebook/react/pull/25060
-            const precedence = shouldPreload
-              ? process.env.NODE_ENV === 'development'
-                ? 'next_' + href
-                : 'next'
-              : undefined
+            const precedence = 'next'
 
             return (
               <link
@@ -614,7 +608,6 @@ export async function renderToHTMLOrFlight(
         ? await createComponentAndStyles({
             filePath: template[1],
             getComponent: template[0],
-            shouldPreload: true,
             injectedCSS: injectedCSSWithCurrentLayout,
           })
         : [React.Fragment]
@@ -622,7 +615,6 @@ export async function renderToHTMLOrFlight(
       const [ErrorComponent, errorStyles] = error
         ? await createComponentAndStyles({
             filePath: error[1],
-            shouldPreload: true,
             getComponent: error[0],
             injectedCSS: injectedCSSWithCurrentLayout,
           })
@@ -631,7 +623,6 @@ export async function renderToHTMLOrFlight(
       const [Loading, loadingStyles] = loading
         ? await createComponentAndStyles({
             filePath: loading[1],
-            shouldPreload: true,
             getComponent: loading[0],
             injectedCSS: injectedCSSWithCurrentLayout,
           })
@@ -654,7 +645,6 @@ export async function renderToHTMLOrFlight(
       const [NotFound, notFoundStyles] = notFound
         ? await createComponentAndStyles({
             filePath: notFound[1],
-            shouldPreload: true,
             getComponent: notFound[0],
             injectedCSS: injectedCSSWithCurrentLayout,
           })
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index 457d9790c3ac09..b2b327206dcf5f 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -175,11 +175,12 @@ createNextDescribe(
 
       describe('special entries', () => {
         it('should include css imported in loading.js', async () => {
-          const html = await next.render('/loading-bug/hi')
-          // The link tag should be included together with loading
-          expect(html).toMatch(
-            /<link rel="stylesheet" href="(.+)\.css(\?v=\d+)?"\/><h2>Loading...<\/h2>/
-          )
+          const $ = await next.render$('/loading-bug/hi')
+          // The link tag should be included together with loading with "next" precedence
+
+          expect($('link[data-precedence="next"]').length).toBe(1)
+
+          expect($('body h2').text()).toBe('Loading...')
         })
 
         it('should include css imported in client template.js', async () => {

From 51bac0247f280902f6c29eae4a8bd87c0fcbc69c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Aug 2023 00:51:57 +0200
Subject: [PATCH 11/13] fix

---
 packages/next/src/server/app-render/app-render.tsx | 3 +--
 test/e2e/app-dir/app-css/index.test.ts             | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 1494da7e5674d4..a2ee85cc3b8be2 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -515,8 +515,7 @@ export async function renderToHTMLOrFlight(
             // During HMR, it's critical to use different `precedence` values
             // for different stylesheets, so their order will be kept.
             // https://github.com/facebook/react/pull/25060
-            const precedence =
-              process.env.NODE_ENV === 'development' ? 'next_' + href : 'next'
+            const precedence = 'next'
 
             ComponentMod.preloadStyle(fullHref)
 
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index b2b327206dcf5f..61cb1e90d3c343 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -177,8 +177,7 @@ createNextDescribe(
         it('should include css imported in loading.js', async () => {
           const $ = await next.render$('/loading-bug/hi')
           // The link tag should be included together with loading with "next" precedence
-
-          expect($('link[data-precedence="next"]').length).toBe(1)
+          expect($('link[data-precedence="next"]').length).toBe(2)
 
           expect($('body h2').text()).toBe('Loading...')
         })

From 1fa808c357d7cb8d13f4cff3ea55d6993f40142a Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Aug 2023 01:10:09 +0200
Subject: [PATCH 12/13] revert dev precedence

---
 packages/next/src/server/app-render/app-render.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index a2ee85cc3b8be2..851634a17edfcb 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -431,7 +431,8 @@ export async function renderToHTMLOrFlight(
             // During HMR, it's critical to use different `precedence` values
             // for different stylesheets, so their order will be kept.
             // https://github.com/facebook/react/pull/25060
-            const precedence = 'next'
+            const precedence =
+              process.env.NODE_ENV === 'development' ? 'next_' + href : 'next'
 
             return (
               <link
@@ -515,7 +516,8 @@ export async function renderToHTMLOrFlight(
             // During HMR, it's critical to use different `precedence` values
             // for different stylesheets, so their order will be kept.
             // https://github.com/facebook/react/pull/25060
-            const precedence = 'next'
+            const precedence =
+              process.env.NODE_ENV === 'development' ? 'next_' + href : 'next'
 
             ComponentMod.preloadStyle(fullHref)
 

From f7e562e25d37ab8d185f7d4abac781e7df45ac44 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Aug 2023 01:24:54 +0200
Subject: [PATCH 13/13] fix test

---
 test/e2e/app-dir/app-css/index.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index 61cb1e90d3c343..4b160a299c8971 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -176,8 +176,8 @@ createNextDescribe(
       describe('special entries', () => {
         it('should include css imported in loading.js', async () => {
           const $ = await next.render$('/loading-bug/hi')
-          // The link tag should be included together with loading with "next" precedence
-          expect($('link[data-precedence="next"]').length).toBe(2)
+          // The link tag should be hoist into head with precedence properties
+          expect($('head link[data-precedence]').length).toBe(2)
 
           expect($('body h2').text()).toBe('Loading...')
         })