From 3ac4dd3dcc872e9322510e5ebe14d8b8c8505e59 Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Tue, 19 Nov 2024 15:00:10 -0500
Subject: [PATCH 1/9] v1

---
 .../webpack/plugins/flight-manifest-plugin.ts | 16 ++++++-
 packages/next/src/export/index.ts             |  1 +
 .../next/src/server/app-render/app-render.tsx |  3 +-
 .../create-component-styles-and-scripts.tsx   | 12 +++--
 .../app-render/create-component-tree.tsx      |  5 ++-
 .../app-render/get-css-inlined-link-tags.tsx  | 11 +++--
 .../server/app-render/get-layer-assets.tsx    | 44 ++++++++++++++-----
 packages/next/src/server/app-render/types.ts  |  2 +
 .../walk-tree-with-flight-router-state.tsx    |  3 +-
 packages/next/src/server/base-server.ts       |  2 +
 packages/next/src/server/config-schema.ts     |  1 +
 packages/next/src/server/config-shared.ts     |  6 +++
 .../e2e/app-dir/app-inline-css/app/global.css |  3 ++
 .../e2e/app-dir/app-inline-css/app/layout.tsx |  9 ++++
 test/e2e/app-dir/app-inline-css/app/page.tsx  |  3 ++
 test/e2e/app-dir/app-inline-css/index.test.ts | 17 +++++++
 .../e2e/app-dir/app-inline-css/next.config.js |  5 +++
 17 files changed, 119 insertions(+), 24 deletions(-)
 create mode 100644 test/e2e/app-dir/app-inline-css/app/global.css
 create mode 100644 test/e2e/app-dir/app-inline-css/app/layout.tsx
 create mode 100644 test/e2e/app-dir/app-inline-css/app/page.tsx
 create mode 100644 test/e2e/app-dir/app-inline-css/index.test.ts
 create mode 100644 test/e2e/app-dir/app-inline-css/next.config.js

diff --git a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
index 55664a13e537c..3acf5352aae71 100644
--- a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
@@ -83,6 +83,11 @@ export interface ClientReferenceManifestForRsc {
   }
 }
 
+export interface EntryCssFile {
+  path: string
+  content: string
+}
+
 export interface ClientReferenceManifest extends ClientReferenceManifestForRsc {
   readonly moduleLoading: {
     prefix: string
@@ -95,7 +100,7 @@ export interface ClientReferenceManifest extends ClientReferenceManifestForRsc {
     [moduleId: string]: ManifestNode
   }
   entryCSSFiles: {
-    [entry: string]: string[]
+    [entry: string]: EntryCssFile[]
   }
   entryJSFiles?: {
     [entry: string]: string[]
@@ -296,9 +301,18 @@ export class ClientReferenceManifestPlugin {
         /[\\/]/g,
         path.sep
       )
+
       manifest.entryCSSFiles[chunkEntryName] = entrypoint
         .getFiles()
         .filter((f) => !f.startsWith('static/css/pages/') && f.endsWith('.css'))
+        .map((file) => {
+          const source = compilation.assets[file].source()
+          // TODO: only do this when inlineCss is enabled
+          return {
+            path: file,
+            content: typeof source === 'string' ? source : source.toString(),
+          }
+        })
 
       const requiredChunks = getAppPathRequiredChunks(entrypoint, rootMainFiles)
       const recordModule = (modId: ModuleId, mod: webpack.NormalModule) => {
diff --git a/packages/next/src/export/index.ts b/packages/next/src/export/index.ts
index 66bd9af69eab7..7d346dc174d4a 100644
--- a/packages/next/src/export/index.ts
+++ b/packages/next/src/export/index.ts
@@ -358,6 +358,7 @@ async function exportAppImpl(
       expireTime: nextConfig.expireTime,
       after: nextConfig.experimental.after ?? false,
       dynamicIO: nextConfig.experimental.dynamicIO ?? false,
+      inlineCss: nextConfig.experimental.inlineCss ?? false,
     },
     reactMaxHeadersLength: nextConfig.reactMaxHeadersLength,
   }
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index afcdd59e2ed59..e83a90867a764 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -21,6 +21,7 @@ import type { LoaderTree } from '../lib/app-dir-module'
 import type { AppPageModule } from '../route-modules/app-page/module'
 import type {
   ClientReferenceManifest,
+  EntryCssFile,
   ManifestNode,
 } from '../../build/webpack/plugins/flight-manifest-plugin'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
@@ -695,7 +696,7 @@ async function getRSCPayload(
   ctx: AppRenderContext,
   is404: boolean
 ): Promise<InitialRSCPayload & { P: React.ReactNode }> {
-  const injectedCSS = new Set<string>()
+  const injectedCSS = new Set<EntryCssFile>()
   const injectedJS = new Set<string>()
   const injectedFontPreloadTags = new Set<string>()
   let missingSlots: Set<string> | undefined
diff --git a/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx b/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
index b3273c97b2cdb..c70124bc3a892 100644
--- a/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
+++ b/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
@@ -4,7 +4,9 @@ import { getLinkAndScriptTags } from './get-css-inlined-link-tags'
 import type { AppRenderContext } from './app-render'
 import { getAssetQueryString } from './get-asset-query-string'
 import { encodeURIPath } from '../../shared/lib/encode-uri-path'
+import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
 
+// [STEP 1] TODO: consolidate this with get-layer-assets.tsx
 export async function createComponentStylesAndScripts({
   filePath,
   getComponent,
@@ -14,7 +16,7 @@ export async function createComponentStylesAndScripts({
 }: {
   filePath: string
   getComponent: () => any
-  injectedCSS: Set<string>
+  injectedCSS: Set<EntryCssFile>
   injectedJS: Set<string>
   ctx: AppRenderContext
 }): Promise<[React.ComponentType<any>, React.ReactNode, React.ReactNode]> {
@@ -26,9 +28,9 @@ export async function createComponentStylesAndScripts({
   )
 
   const styles = cssHrefs
-    ? cssHrefs.map((href, index) => {
+    ? cssHrefs.map((entryCssFile, index) => {
         const fullHref = `${ctx.assetPrefix}/_next/${encodeURIPath(
-          href
+          entryCssFile.path
         )}${getAssetQueryString(ctx, true)}`
 
         // `Precedence` is an opt-in signal for React to handle resource
@@ -38,7 +40,9 @@ export async function createComponentStylesAndScripts({
         // 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'
+          process.env.NODE_ENV === 'development'
+            ? 'next_' + entryCssFile.path
+            : 'next'
 
         return (
           <link
diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx
index aae3045113d99..bc5022da9fa13 100644
--- a/packages/next/src/server/app-render/create-component-tree.tsx
+++ b/packages/next/src/server/app-render/create-component-tree.tsx
@@ -22,6 +22,7 @@ import type { LoadingModuleData } from '../../shared/lib/app-router-context.shar
 import type { Params } from '../request/params'
 import { workUnitAsyncStorage } from './work-unit-async-storage.external'
 import { OUTLET_BOUNDARY_NAME } from '../../lib/metadata/metadata-constants'
+import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 /**
  * Use the provided loader tree to create the React Component tree.
@@ -32,7 +33,7 @@ export function createComponentTree(props: {
   parentParams: Params
   rootLayoutIncluded: boolean
   firstItem?: boolean
-  injectedCSS: Set<string>
+  injectedCSS: Set<EntryCssFile>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   getMetadataReady: () => Promise<void>
@@ -80,7 +81,7 @@ async function createComponentTreeInternal({
   parentParams: Params
   rootLayoutIncluded: boolean
   firstItem?: boolean
-  injectedCSS: Set<string>
+  injectedCSS: Set<EntryCssFile>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   getMetadataReady: () => Promise<void>
diff --git a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
index b177883e371fa..506d2887814d1 100644
--- a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
+++ b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
@@ -1,4 +1,7 @@
-import type { ClientReferenceManifest } from '../../build/webpack/plugins/flight-manifest-plugin'
+import type {
+  ClientReferenceManifest,
+  EntryCssFile,
+} from '../../build/webpack/plugins/flight-manifest-plugin'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 
 /**
@@ -7,12 +10,12 @@ import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 export function getLinkAndScriptTags(
   clientReferenceManifest: DeepReadonly<ClientReferenceManifest>,
   filePath: string,
-  injectedCSS: Set<string>,
+  injectedCSS: Set<EntryCssFile>,
   injectedScripts: Set<string>,
   collectNewImports?: boolean
-): { styles: string[]; scripts: string[] } {
+): { styles: EntryCssFile[]; scripts: string[] } {
   const filePathWithoutExt = filePath.replace(/\.[^.]+$/, '')
-  const cssChunks = new Set<string>()
+  const cssChunks = new Set<EntryCssFile>()
   const jsChunks = new Set<string>()
 
   const entryCSSFiles =
diff --git a/packages/next/src/server/app-render/get-layer-assets.tsx b/packages/next/src/server/app-render/get-layer-assets.tsx
index b69483e01bf60..9d922338b90cf 100644
--- a/packages/next/src/server/app-render/get-layer-assets.tsx
+++ b/packages/next/src/server/app-render/get-layer-assets.tsx
@@ -5,6 +5,7 @@ import type { AppRenderContext } from './app-render'
 import { getAssetQueryString } from './get-asset-query-string'
 import { encodeURIPath } from '../../shared/lib/encode-uri-path'
 import type { PreloadCallbacks } from './types'
+import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 export function getLayerAssets({
   ctx,
@@ -15,7 +16,7 @@ export function getLayerAssets({
   preloadCallbacks,
 }: {
   layoutOrPagePath: string | undefined
-  injectedCSS: Set<string>
+  injectedCSS: Set<EntryCssFile>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   ctx: AppRenderContext
@@ -73,7 +74,18 @@ export function getLayerAssets({
   }
 
   const styles = styleTags
-    ? styleTags.map((href, index) => {
+    ? styleTags.map((entryCssFile, index) => {
+        // `Precedence` is an opt-in signal for React to handle resource
+        // loading and deduplication, etc. It's also used as the key to sort
+        // resources so they will be injected in the correct order.
+        // 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_' + entryCssFile.path
+            : 'next'
+
         // In dev, Safari and Firefox will cache the resource during HMR:
         // - https://github.com/vercel/next.js/issues/5860
         // - https://bugs.webkit.org/show_bug.cgi?id=187726
@@ -81,17 +93,26 @@ export function getLayerAssets({
         // development. We need to also make sure that the number is always
         // increasing.
         const fullHref = `${ctx.assetPrefix}/_next/${encodeURIPath(
-          href
+          entryCssFile.path
         )}${getAssetQueryString(ctx, true)}`
 
-        // `Precedence` is an opt-in signal for React to handle resource
-        // loading and deduplication, etc. It's also used as the key to sort
-        // resources so they will be injected in the correct order.
-        // 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'
+        if (
+          process.env.NEXT_RUNTIME !== 'edge' &&
+          ctx.renderOpts.experimental.inlineCss
+        ) {
+          return (
+            <style
+              key={index}
+              dangerouslySetInnerHTML={{
+                __html: entryCssFile.content,
+              }}
+              nonce={ctx.nonce}
+              // @ts-ignore
+              precedence={precedence}
+              href={fullHref}
+            />
+          )
+        }
 
         preloadCallbacks.push(() => {
           ctx.componentMod.preloadStyle(
@@ -100,6 +121,7 @@ export function getLayerAssets({
             ctx.nonce
           )
         })
+
         return (
           <link
             rel="stylesheet"
diff --git a/packages/next/src/server/app-render/types.ts b/packages/next/src/server/app-render/types.ts
index ce503eca5e511..148b6cb3706c7 100644
--- a/packages/next/src/server/app-render/types.ts
+++ b/packages/next/src/server/app-render/types.ts
@@ -132,6 +132,7 @@ export type ServerOnInstrumentationRequestError = (
 ) => void | Promise<void>
 
 export interface RenderOptsPartial {
+  distDir?: string
   previewProps: __ApiPreviewProps | undefined
   err?: Error | null
   dev?: boolean
@@ -182,6 +183,7 @@ export interface RenderOptsPartial {
     clientTraceMetadata: string[] | undefined
     after: boolean
     dynamicIO: boolean
+    inlineCss: boolean
   }
   postponed?: string
 
diff --git a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
index bf32e6bfbac29..8941db6b0046d 100644
--- a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
+++ b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
@@ -21,6 +21,7 @@ import {
   addSearchParamsIfPageSegment,
 } from '../../shared/lib/segment'
 import { createComponentTree } from './create-component-tree'
+import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 /**
  * Use router state to decide at what common layout to render the page.
@@ -49,7 +50,7 @@ export async function walkTreeWithFlightRouterState({
   flightRouterState?: FlightRouterState
   parentRendered?: boolean
   rscPayloadHead: React.ReactNode
-  injectedCSS: Set<string>
+  injectedCSS: Set<EntryCssFile>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   rootLayoutIncluded: boolean
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index 0ec3d24faf2e1..1a16559df469f 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -593,6 +593,7 @@ export default abstract class Server<
         clientTraceMetadata: this.nextConfig.experimental.clientTraceMetadata,
         after: this.nextConfig.experimental.after ?? false,
         dynamicIO: this.nextConfig.experimental.dynamicIO ?? false,
+        inlineCss: this.nextConfig.experimental.inlineCss ?? false,
       },
       onInstrumentationRequestError:
         this.instrumentationOnRequestError.bind(this),
@@ -2443,6 +2444,7 @@ export default abstract class Server<
         onAfterTaskError: undefined,
         // only available in dev
         setAppIsrStatus: (this as any).setAppIsrStatus,
+        distDir: this.distDir,
       }
 
       if (isDebugStaticShell || isDebugDynamicAccesses) {
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index ace53d76eb274..4467cc378f8b3 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -293,6 +293,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         disableOptimizedLoading: z.boolean().optional(),
         disablePostcssPresetEnv: z.boolean().optional(),
         dynamicIO: z.boolean().optional(),
+        inlineCss: z.boolean().optional(),
         esmExternals: z.union([z.boolean(), z.literal('loose')]).optional(),
         serverActions: z
           .object({
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 49fece7e9c7c1..276aec908cee4 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -556,6 +556,12 @@ export interface ExperimentalConfig {
    * unless explicitly cached.
    */
   dynamicIO?: boolean
+
+  /**
+   * Render <style> tags inline in the HTML for imported CSS assets.
+   * This is always disabled in the edge runtime.
+   */
+  inlineCss?: boolean
 }
 
 export type ExportPathMap = {
diff --git a/test/e2e/app-dir/app-inline-css/app/global.css b/test/e2e/app-dir/app-inline-css/app/global.css
new file mode 100644
index 0000000000000..fbc7687d6af9c
--- /dev/null
+++ b/test/e2e/app-dir/app-inline-css/app/global.css
@@ -0,0 +1,3 @@
+p {
+  color: yellow;
+}
diff --git a/test/e2e/app-dir/app-inline-css/app/layout.tsx b/test/e2e/app-dir/app-inline-css/app/layout.tsx
new file mode 100644
index 0000000000000..88b88a590290d
--- /dev/null
+++ b/test/e2e/app-dir/app-inline-css/app/layout.tsx
@@ -0,0 +1,9 @@
+import './global.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/app-inline-css/app/page.tsx b/test/e2e/app-dir/app-inline-css/app/page.tsx
new file mode 100644
index 0000000000000..c303be8817213
--- /dev/null
+++ b/test/e2e/app-dir/app-inline-css/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <p>Home</p>
+}
diff --git a/test/e2e/app-dir/app-inline-css/index.test.ts b/test/e2e/app-dir/app-inline-css/index.test.ts
new file mode 100644
index 0000000000000..70c35eb77baea
--- /dev/null
+++ b/test/e2e/app-dir/app-inline-css/index.test.ts
@@ -0,0 +1,17 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('app dir - css - experimental inline css', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should render page with correct styles', async () => {
+    const browser = await next.browser('/')
+
+    const inlineStyleTag = await browser.elementByCss('style')
+    expect(await inlineStyleTag.text()).toContain('color')
+
+    const p = await browser.elementByCss('p')
+    expect(await p.getComputedCss('color')).toBe('rgb(255, 255, 0)') // yellow
+  })
+})
diff --git a/test/e2e/app-dir/app-inline-css/next.config.js b/test/e2e/app-dir/app-inline-css/next.config.js
new file mode 100644
index 0000000000000..f136f2f97af65
--- /dev/null
+++ b/test/e2e/app-dir/app-inline-css/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    inlineCss: true,
+  },
+}

From aeb7bc00fe9d20686b8e4df00328895165a57f6e Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Tue, 19 Nov 2024 16:47:03 -0500
Subject: [PATCH 2/9] polish

---
 packages/next/src/build/webpack-config.ts     |  1 +
 .../webpack/plugins/flight-manifest-plugin.ts | 25 ++++++-
 .../next/src/server/app-render/app-render.tsx |  4 +-
 .../create-component-styles-and-scripts.tsx   | 38 ++--------
 .../app-render/create-component-tree.tsx      |  6 +-
 .../app-render/get-css-inlined-link-tags.tsx  |  8 +-
 .../server/app-render/get-layer-assets.tsx    | 68 +----------------
 .../server/app-render/render-css-resource.tsx | 74 +++++++++++++++++++
 .../walk-tree-with-flight-router-state.tsx    |  4 +-
 packages/next/src/server/config-shared.ts     |  1 +
 10 files changed, 117 insertions(+), 112 deletions(-)
 create mode 100644 packages/next/src/server/app-render/render-css-resource.tsx

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index fd9e9f0661840..b36da1033e656 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -1895,6 +1895,7 @@ export default async function getBaseWebpackConfig(
           ? new ClientReferenceManifestPlugin({
               dev,
               appDir,
+              experimentalInlineCss: !!config.experimental.inlineCss,
             })
           : new FlightClientEntryPlugin({
               appDir,
diff --git a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
index 3acf5352aae71..ebdc43c1987f9 100644
--- a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
@@ -32,6 +32,7 @@ import type { ModuleInfo } from './flight-client-entry-plugin'
 interface Options {
   dev: boolean
   appDir: string
+  experimentalInlineCss: boolean
 }
 
 /**
@@ -83,11 +84,19 @@ export interface ClientReferenceManifestForRsc {
   }
 }
 
-export interface EntryCssFile {
+export type CssResource = InlinedCssFile | UninlinedCssFile
+
+interface InlinedCssFile {
   path: string
+  inlined: true
   content: string
 }
 
+interface UninlinedCssFile {
+  path: string
+  inlined: false
+}
+
 export interface ClientReferenceManifest extends ClientReferenceManifestForRsc {
   readonly moduleLoading: {
     prefix: string
@@ -100,7 +109,7 @@ export interface ClientReferenceManifest extends ClientReferenceManifestForRsc {
     [moduleId: string]: ManifestNode
   }
   entryCSSFiles: {
-    [entry: string]: EntryCssFile[]
+    [entry: string]: CssResource[]
   }
   entryJSFiles?: {
     [entry: string]: string[]
@@ -205,11 +214,13 @@ export class ClientReferenceManifestPlugin {
   dev: Options['dev'] = false
   appDir: Options['appDir']
   appDirBase: string
+  experimentalInlineCss: Options['experimentalInlineCss']
 
   constructor(options: Options) {
     this.dev = options.dev
     this.appDir = options.appDir
     this.appDirBase = path.dirname(this.appDir) + path.sep
+    this.experimentalInlineCss = options.experimentalInlineCss
   }
 
   apply(compiler: webpack.Compiler) {
@@ -307,10 +318,16 @@ export class ClientReferenceManifestPlugin {
         .filter((f) => !f.startsWith('static/css/pages/') && f.endsWith('.css'))
         .map((file) => {
           const source = compilation.assets[file].source()
-          // TODO: only do this when inlineCss is enabled
+          if (this.experimentalInlineCss) {
+            return {
+              inlined: true,
+              path: file,
+              content: typeof source === 'string' ? source : source.toString(),
+            }
+          }
           return {
+            inlined: false,
             path: file,
-            content: typeof source === 'string' ? source : source.toString(),
           }
         })
 
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index e83a90867a764..faf7ae0b3f079 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -21,7 +21,7 @@ import type { LoaderTree } from '../lib/app-dir-module'
 import type { AppPageModule } from '../route-modules/app-page/module'
 import type {
   ClientReferenceManifest,
-  EntryCssFile,
+  CssResource,
   ManifestNode,
 } from '../../build/webpack/plugins/flight-manifest-plugin'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
@@ -696,7 +696,7 @@ async function getRSCPayload(
   ctx: AppRenderContext,
   is404: boolean
 ): Promise<InitialRSCPayload & { P: React.ReactNode }> {
-  const injectedCSS = new Set<EntryCssFile>()
+  const injectedCSS = new Set<CssResource>()
   const injectedJS = new Set<string>()
   const injectedFontPreloadTags = new Set<string>()
   let missingSlots: Set<string> | undefined
diff --git a/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx b/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
index c70124bc3a892..ea296f709cb0e 100644
--- a/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
+++ b/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
@@ -4,9 +4,9 @@ import { getLinkAndScriptTags } from './get-css-inlined-link-tags'
 import type { AppRenderContext } from './app-render'
 import { getAssetQueryString } from './get-asset-query-string'
 import { encodeURIPath } from '../../shared/lib/encode-uri-path'
-import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
+import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
+import { renderCssResource } from './render-css-resource'
 
-// [STEP 1] TODO: consolidate this with get-layer-assets.tsx
 export async function createComponentStylesAndScripts({
   filePath,
   getComponent,
@@ -16,46 +16,18 @@ export async function createComponentStylesAndScripts({
 }: {
   filePath: string
   getComponent: () => any
-  injectedCSS: Set<EntryCssFile>
+  injectedCSS: Set<CssResource>
   injectedJS: Set<string>
   ctx: AppRenderContext
 }): Promise<[React.ComponentType<any>, React.ReactNode, React.ReactNode]> {
-  const { styles: cssHrefs, scripts: jsHrefs } = getLinkAndScriptTags(
+  const { styles: entryCssFiles, scripts: jsHrefs } = getLinkAndScriptTags(
     ctx.clientReferenceManifest,
     filePath,
     injectedCSS,
     injectedJS
   )
 
-  const styles = cssHrefs
-    ? cssHrefs.map((entryCssFile, index) => {
-        const fullHref = `${ctx.assetPrefix}/_next/${encodeURIPath(
-          entryCssFile.path
-        )}${getAssetQueryString(ctx, true)}`
-
-        // `Precedence` is an opt-in signal for React to handle resource
-        // loading and deduplication, etc. It's also used as the key to sort
-        // resources so they will be injected in the correct order.
-        // 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_' + entryCssFile.path
-            : 'next'
-
-        return (
-          <link
-            rel="stylesheet"
-            href={fullHref}
-            // @ts-ignore
-            precedence={precedence}
-            crossOrigin={ctx.renderOpts.crossOrigin}
-            key={`style-${index}`}
-          />
-        )
-      })
-    : null
+  const styles = renderCssResource(entryCssFiles, ctx)
 
   const scripts = jsHrefs
     ? jsHrefs.map((href, index) => (
diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx
index bc5022da9fa13..2dbba9725e408 100644
--- a/packages/next/src/server/app-render/create-component-tree.tsx
+++ b/packages/next/src/server/app-render/create-component-tree.tsx
@@ -22,7 +22,7 @@ import type { LoadingModuleData } from '../../shared/lib/app-router-context.shar
 import type { Params } from '../request/params'
 import { workUnitAsyncStorage } from './work-unit-async-storage.external'
 import { OUTLET_BOUNDARY_NAME } from '../../lib/metadata/metadata-constants'
-import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
+import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 /**
  * Use the provided loader tree to create the React Component tree.
@@ -33,7 +33,7 @@ export function createComponentTree(props: {
   parentParams: Params
   rootLayoutIncluded: boolean
   firstItem?: boolean
-  injectedCSS: Set<EntryCssFile>
+  injectedCSS: Set<CssResource>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   getMetadataReady: () => Promise<void>
@@ -81,7 +81,7 @@ async function createComponentTreeInternal({
   parentParams: Params
   rootLayoutIncluded: boolean
   firstItem?: boolean
-  injectedCSS: Set<EntryCssFile>
+  injectedCSS: Set<CssResource>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   getMetadataReady: () => Promise<void>
diff --git a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
index 506d2887814d1..b8136413812b8 100644
--- a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
+++ b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
@@ -1,6 +1,6 @@
 import type {
   ClientReferenceManifest,
-  EntryCssFile,
+  CssResource,
 } from '../../build/webpack/plugins/flight-manifest-plugin'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 
@@ -10,12 +10,12 @@ import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 export function getLinkAndScriptTags(
   clientReferenceManifest: DeepReadonly<ClientReferenceManifest>,
   filePath: string,
-  injectedCSS: Set<EntryCssFile>,
+  injectedCSS: Set<CssResource>,
   injectedScripts: Set<string>,
   collectNewImports?: boolean
-): { styles: EntryCssFile[]; scripts: string[] } {
+): { styles: CssResource[]; scripts: string[] } {
   const filePathWithoutExt = filePath.replace(/\.[^.]+$/, '')
-  const cssChunks = new Set<EntryCssFile>()
+  const cssChunks = new Set<CssResource>()
   const jsChunks = new Set<string>()
 
   const entryCSSFiles =
diff --git a/packages/next/src/server/app-render/get-layer-assets.tsx b/packages/next/src/server/app-render/get-layer-assets.tsx
index 9d922338b90cf..b6e4324b23199 100644
--- a/packages/next/src/server/app-render/get-layer-assets.tsx
+++ b/packages/next/src/server/app-render/get-layer-assets.tsx
@@ -5,7 +5,8 @@ import type { AppRenderContext } from './app-render'
 import { getAssetQueryString } from './get-asset-query-string'
 import { encodeURIPath } from '../../shared/lib/encode-uri-path'
 import type { PreloadCallbacks } from './types'
-import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
+import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
+import { renderCssResource } from './render-css-resource'
 
 export function getLayerAssets({
   ctx,
@@ -16,7 +17,7 @@ export function getLayerAssets({
   preloadCallbacks,
 }: {
   layoutOrPagePath: string | undefined
-  injectedCSS: Set<EntryCssFile>
+  injectedCSS: Set<CssResource>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   ctx: AppRenderContext
@@ -73,68 +74,7 @@ export function getLayerAssets({
     }
   }
 
-  const styles = styleTags
-    ? styleTags.map((entryCssFile, index) => {
-        // `Precedence` is an opt-in signal for React to handle resource
-        // loading and deduplication, etc. It's also used as the key to sort
-        // resources so they will be injected in the correct order.
-        // 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_' + entryCssFile.path
-            : 'next'
-
-        // In dev, Safari and Firefox will cache the resource during HMR:
-        // - https://github.com/vercel/next.js/issues/5860
-        // - https://bugs.webkit.org/show_bug.cgi?id=187726
-        // Because of this, we add a `?v=` query to bypass the cache during
-        // development. We need to also make sure that the number is always
-        // increasing.
-        const fullHref = `${ctx.assetPrefix}/_next/${encodeURIPath(
-          entryCssFile.path
-        )}${getAssetQueryString(ctx, true)}`
-
-        if (
-          process.env.NEXT_RUNTIME !== 'edge' &&
-          ctx.renderOpts.experimental.inlineCss
-        ) {
-          return (
-            <style
-              key={index}
-              dangerouslySetInnerHTML={{
-                __html: entryCssFile.content,
-              }}
-              nonce={ctx.nonce}
-              // @ts-ignore
-              precedence={precedence}
-              href={fullHref}
-            />
-          )
-        }
-
-        preloadCallbacks.push(() => {
-          ctx.componentMod.preloadStyle(
-            fullHref,
-            ctx.renderOpts.crossOrigin,
-            ctx.nonce
-          )
-        })
-
-        return (
-          <link
-            rel="stylesheet"
-            href={fullHref}
-            // @ts-ignore
-            precedence={precedence}
-            crossOrigin={ctx.renderOpts.crossOrigin}
-            key={index}
-            nonce={ctx.nonce}
-          />
-        )
-      })
-    : []
+  const styles = renderCssResource(styleTags, ctx, preloadCallbacks)
 
   const scripts = scriptTags
     ? scriptTags.map((href, index) => {
diff --git a/packages/next/src/server/app-render/render-css-resource.tsx b/packages/next/src/server/app-render/render-css-resource.tsx
new file mode 100644
index 0000000000000..15bb8b9e89449
--- /dev/null
+++ b/packages/next/src/server/app-render/render-css-resource.tsx
@@ -0,0 +1,74 @@
+import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
+import { encodeURIPath } from '../../shared/lib/encode-uri-path'
+import type { AppRenderContext } from './app-render'
+import { getAssetQueryString } from './get-asset-query-string'
+import type { PreloadCallbacks } from './types'
+
+/**
+ * Abstracts the rendering of CSS files based on whether they are inlined or not.
+ * For inlined CSS, renders a <style> tag with the CSS content directly embedded.
+ * For external CSS files, renders a <link> tag pointing to the CSS file.
+ */
+export function renderCssResource(
+  entryCssFiles: CssResource[],
+  ctx: AppRenderContext,
+  preloadCallbacks?: PreloadCallbacks
+) {
+  return entryCssFiles.map((entryCssFile, index) => {
+    // `Precedence` is an opt-in signal for React to handle resource
+    // loading and deduplication, etc. It's also used as the key to sort
+    // resources so they will be injected in the correct order.
+    // 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_' + entryCssFile.path
+        : 'next'
+
+    // In dev, Safari and Firefox will cache the resource during HMR:
+    // - https://github.com/vercel/next.js/issues/5860
+    // - https://bugs.webkit.org/show_bug.cgi?id=187726
+    // Because of this, we add a `?v=` query to bypass the cache during
+    // development. We need to also make sure that the number is always
+    // increasing.
+    const fullHref = `${ctx.assetPrefix}/_next/${encodeURIPath(
+      entryCssFile.path
+    )}${getAssetQueryString(ctx, true)}`
+
+    if (entryCssFile.inlined) {
+      return (
+        <style
+          key={index}
+          dangerouslySetInnerHTML={{
+            __html: entryCssFile.content,
+          }}
+          nonce={ctx.nonce}
+          // @ts-ignore
+          precedence={precedence}
+          href={fullHref}
+        />
+      )
+    }
+
+    preloadCallbacks?.push(() => {
+      ctx.componentMod.preloadStyle(
+        fullHref,
+        ctx.renderOpts.crossOrigin,
+        ctx.nonce
+      )
+    })
+
+    return (
+      <link
+        key={index}
+        rel="stylesheet"
+        href={fullHref}
+        // @ts-ignore
+        precedence={precedence}
+        crossOrigin={ctx.renderOpts.crossOrigin}
+        nonce={ctx.nonce}
+      />
+    )
+  })
+}
diff --git a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
index 8941db6b0046d..ce76bddb8c8f0 100644
--- a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
+++ b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
@@ -21,7 +21,7 @@ import {
   addSearchParamsIfPageSegment,
 } from '../../shared/lib/segment'
 import { createComponentTree } from './create-component-tree'
-import type { EntryCssFile } from '../../build/webpack/plugins/flight-manifest-plugin'
+import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 /**
  * Use router state to decide at what common layout to render the page.
@@ -50,7 +50,7 @@ export async function walkTreeWithFlightRouterState({
   flightRouterState?: FlightRouterState
   parentRendered?: boolean
   rscPayloadHead: React.ReactNode
-  injectedCSS: Set<EntryCssFile>
+  injectedCSS: Set<CssResource>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   rootLayoutIncluded: boolean
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 276aec908cee4..cbabbc9bfd77a 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -1166,6 +1166,7 @@ export const defaultConfig: NextConfig = {
     staticGenerationMaxConcurrency: 8,
     staticGenerationMinPagesPerWorker: 25,
     dynamicIO: false,
+    inlineCss: false,
   },
   bundlePagesRouterDependencies: false,
 }

From ccabae70145394b92a5dd1060ed31ad6be60e070 Mon Sep 17 00:00:00 2001
From: Benjamin Woodruff <benjamin.woodruff@vercel.com>
Date: Tue, 19 Nov 2024 16:36:25 -0800
Subject: [PATCH 3/9] turbopack inline css

---
 crates/next-core/src/next_config.rs           |  1 +
 .../client_reference_manifest.rs              | 59 +++++++++++++------
 crates/next-core/src/next_manifests/mod.rs    | 10 +++-
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/crates/next-core/src/next_config.rs b/crates/next-core/src/next_config.rs
index 55ef29cdd54f6..8a4ac6e876874 100644
--- a/crates/next-core/src/next_config.rs
+++ b/crates/next-core/src/next_config.rs
@@ -551,6 +551,7 @@ pub struct ExperimentalConfig {
     fully_specified: Option<bool>,
     gzip_size: Option<bool>,
 
+    pub inline_css: Option<bool>,
     instrumentation_hook: Option<bool>,
     client_trace_metadata: Option<Vec<String>>,
     large_page_data_bytes: Option<f64>,
diff --git a/crates/next-core/src/next_manifests/client_reference_manifest.rs b/crates/next-core/src/next_manifests/client_reference_manifest.rs
index 52904f3c6ee6e..692e05bc33a0e 100644
--- a/crates/next-core/src/next_manifests/client_reference_manifest.rs
+++ b/crates/next-core/src/next_manifests/client_reference_manifest.rs
@@ -4,7 +4,7 @@ use turbo_rcstr::RcStr;
 use turbo_tasks::{FxIndexSet, TryJoinIterExt, Value, ValueToString, Vc};
 use turbo_tasks_fs::{File, FileSystemPath};
 use turbopack_core::{
-    asset::AssetContent,
+    asset::{Asset, AssetContent},
     chunk::{
         availability_info::AvailabilityInfo, ChunkItem, ChunkItemExt, ChunkableModule,
         ChunkingContext, ModuleId as TurbopackModuleId,
@@ -14,7 +14,7 @@ use turbopack_core::{
 };
 use turbopack_ecmascript::utils::StringifyJs;
 
-use super::{ClientReferenceManifest, ManifestNode, ManifestNodeEntry, ModuleId};
+use super::{ClientReferenceManifest, CssResource, ManifestNode, ManifestNodeEntry, ModuleId};
 use crate::{
     next_app::ClientReferencesChunks,
     next_client_reference::{ClientReferenceGraphResult, ClientReferenceType},
@@ -241,40 +241,65 @@ impl ClientReferenceManifest {
         for (server_component, client_chunks) in
             client_references_chunks.layout_segment_client_chunks.iter()
         {
-            let client_chunks = &client_chunks.await?;
-
-            let client_chunks_paths = client_chunks
-                .iter()
-                .map(|chunk| chunk.ident().path())
-                .try_join()
-                .await?;
-
             let server_component_name = server_component
                 .server_path()
                 .with_extension("".into())
                 .to_string()
                 .await?;
 
-            let entry_css_files = entry_manifest
-                .entry_css_files
-                .entry(server_component_name.clone_value())
-                .or_default();
-
+            let mut entry_css_files_with_chunk = Vec::new();
             let entry_js_files = entry_manifest
                 .entry_js_files
                 .entry(server_component_name.clone_value())
                 .or_default();
 
-            for chunk_path in client_chunks_paths {
+            let client_chunks = &client_chunks.await?;
+            let client_chunks_with_path = client_chunks
+                .iter()
+                .map(|chunk| async move { Ok((chunk, chunk.ident().path().await?)) })
+                .try_join()
+                .await?;
+
+            for (chunk, chunk_path) in client_chunks_with_path {
                 if let Some(path) = client_relative_path.get_path_to(&chunk_path) {
                     let path = path.into();
                     if chunk_path.extension_ref() == Some("css") {
-                        entry_css_files.insert(path);
+                        entry_css_files_with_chunk.push((path, chunk));
                     } else {
                         entry_js_files.insert(path);
                     }
                 }
             }
+
+            let inlined = next_config.await?.experimental.inline_css.unwrap_or(false);
+            let entry_css_files_vec = entry_css_files_with_chunk
+                .into_iter()
+                .map(|(path, chunk)| async {
+                    let content = if inlined {
+                        if let Some(content_file) =
+                            chunk.content().file_content().await?.as_content()
+                        {
+                            Some(content_file.content().to_str()?.into())
+                        } else {
+                            Some("".into())
+                        }
+                    } else {
+                        None
+                    };
+                    Ok(CssResource {
+                        path,
+                        inlined,
+                        content,
+                    })
+                })
+                .try_join()
+                .await?;
+
+            let entry_css_files = entry_manifest
+                .entry_css_files
+                .entry(server_component_name.clone_value())
+                .or_default();
+            entry_css_files.extend(entry_css_files_vec);
         }
 
         let client_reference_manifest_json = serde_json::to_string(&entry_manifest).unwrap();
diff --git a/crates/next-core/src/next_manifests/mod.rs b/crates/next-core/src/next_manifests/mod.rs
index ca9b0b122c2cc..4e8eaac370469 100644
--- a/crates/next-core/src/next_manifests/mod.rs
+++ b/crates/next-core/src/next_manifests/mod.rs
@@ -355,12 +355,20 @@ pub struct ClientReferenceManifest {
     pub edge_rsc_module_mapping: HashMap<ModuleId, ManifestNode>,
     /// Mapping of server component path to required CSS client chunks.
     #[serde(rename = "entryCSSFiles")]
-    pub entry_css_files: HashMap<RcStr, FxIndexSet<RcStr>>,
+    pub entry_css_files: HashMap<RcStr, FxIndexSet<CssResource>>,
     /// Mapping of server component path to required JS client chunks.
     #[serde(rename = "entryJSFiles")]
     pub entry_js_files: HashMap<RcStr, FxIndexSet<RcStr>>,
 }
 
+#[derive(Serialize, Debug, Clone, Eq, Hash, PartialEq)]
+pub struct CssResource {
+    pub path: RcStr,
+    pub inlined: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub content: Option<RcStr>,
+}
+
 #[derive(Serialize, Default, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct ModuleLoading {

From 32a1710832c077b2e9cb1223417c8d2b1ccc58d0 Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Tue, 19 Nov 2024 20:24:29 -0500
Subject: [PATCH 4/9] polish

---
 packages/next/src/server/app-render/types.ts | 1 -
 packages/next/src/server/base-server.ts      | 1 -
 packages/next/src/server/config-shared.ts    | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/next/src/server/app-render/types.ts b/packages/next/src/server/app-render/types.ts
index 148b6cb3706c7..e05756be3c0e2 100644
--- a/packages/next/src/server/app-render/types.ts
+++ b/packages/next/src/server/app-render/types.ts
@@ -132,7 +132,6 @@ export type ServerOnInstrumentationRequestError = (
 ) => void | Promise<void>
 
 export interface RenderOptsPartial {
-  distDir?: string
   previewProps: __ApiPreviewProps | undefined
   err?: Error | null
   dev?: boolean
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index 1a16559df469f..a7846af902afd 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -2444,7 +2444,6 @@ export default abstract class Server<
         onAfterTaskError: undefined,
         // only available in dev
         setAppIsrStatus: (this as any).setAppIsrStatus,
-        distDir: this.distDir,
       }
 
       if (isDebugStaticShell || isDebugDynamicAccesses) {
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index cbabbc9bfd77a..e6726f457c566 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -559,7 +559,7 @@ export interface ExperimentalConfig {
 
   /**
    * Render <style> tags inline in the HTML for imported CSS assets.
-   * This is always disabled in the edge runtime.
+   * Supports app-router only.
    */
   inlineCss?: boolean
 }

From 3a3c800a1a4b74cecc69552fd03803514e592b53 Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Tue, 19 Nov 2024 23:00:45 -0500
Subject: [PATCH 5/9] fix dedup

---
 packages/next/src/server/app-render/app-render.tsx     |  3 +--
 .../app-render/create-component-styles-and-scripts.tsx |  3 +--
 .../src/server/app-render/create-component-tree.tsx    |  5 ++---
 .../server/app-render/get-css-inlined-link-tags.tsx    | 10 +++++-----
 .../next/src/server/app-render/get-layer-assets.tsx    |  3 +--
 .../app-render/walk-tree-with-flight-router-state.tsx  |  3 +--
 6 files changed, 11 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 faf7ae0b3f079..afcdd59e2ed59 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -21,7 +21,6 @@ import type { LoaderTree } from '../lib/app-dir-module'
 import type { AppPageModule } from '../route-modules/app-page/module'
 import type {
   ClientReferenceManifest,
-  CssResource,
   ManifestNode,
 } from '../../build/webpack/plugins/flight-manifest-plugin'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
@@ -696,7 +695,7 @@ async function getRSCPayload(
   ctx: AppRenderContext,
   is404: boolean
 ): Promise<InitialRSCPayload & { P: React.ReactNode }> {
-  const injectedCSS = new Set<CssResource>()
+  const injectedCSS = new Set<string>()
   const injectedJS = new Set<string>()
   const injectedFontPreloadTags = new Set<string>()
   let missingSlots: Set<string> | undefined
diff --git a/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx b/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
index ea296f709cb0e..46d3c861df364 100644
--- a/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
+++ b/packages/next/src/server/app-render/create-component-styles-and-scripts.tsx
@@ -4,7 +4,6 @@ import { getLinkAndScriptTags } from './get-css-inlined-link-tags'
 import type { AppRenderContext } from './app-render'
 import { getAssetQueryString } from './get-asset-query-string'
 import { encodeURIPath } from '../../shared/lib/encode-uri-path'
-import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
 import { renderCssResource } from './render-css-resource'
 
 export async function createComponentStylesAndScripts({
@@ -16,7 +15,7 @@ export async function createComponentStylesAndScripts({
 }: {
   filePath: string
   getComponent: () => any
-  injectedCSS: Set<CssResource>
+  injectedCSS: Set<string>
   injectedJS: Set<string>
   ctx: AppRenderContext
 }): Promise<[React.ComponentType<any>, React.ReactNode, React.ReactNode]> {
diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx
index 2dbba9725e408..aae3045113d99 100644
--- a/packages/next/src/server/app-render/create-component-tree.tsx
+++ b/packages/next/src/server/app-render/create-component-tree.tsx
@@ -22,7 +22,6 @@ import type { LoadingModuleData } from '../../shared/lib/app-router-context.shar
 import type { Params } from '../request/params'
 import { workUnitAsyncStorage } from './work-unit-async-storage.external'
 import { OUTLET_BOUNDARY_NAME } from '../../lib/metadata/metadata-constants'
-import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 /**
  * Use the provided loader tree to create the React Component tree.
@@ -33,7 +32,7 @@ export function createComponentTree(props: {
   parentParams: Params
   rootLayoutIncluded: boolean
   firstItem?: boolean
-  injectedCSS: Set<CssResource>
+  injectedCSS: Set<string>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   getMetadataReady: () => Promise<void>
@@ -81,7 +80,7 @@ async function createComponentTreeInternal({
   parentParams: Params
   rootLayoutIncluded: boolean
   firstItem?: boolean
-  injectedCSS: Set<CssResource>
+  injectedCSS: Set<string>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   getMetadataReady: () => Promise<void>
diff --git a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
index b8136413812b8..cfb4ad9760eee 100644
--- a/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
+++ b/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx
@@ -10,7 +10,7 @@ import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 export function getLinkAndScriptTags(
   clientReferenceManifest: DeepReadonly<ClientReferenceManifest>,
   filePath: string,
-  injectedCSS: Set<CssResource>,
+  injectedCSS: Set<string>,
   injectedScripts: Set<string>,
   collectNewImports?: boolean
 ): { styles: CssResource[]; scripts: string[] } {
@@ -24,12 +24,12 @@ export function getLinkAndScriptTags(
     clientReferenceManifest.entryJSFiles?.[filePathWithoutExt] ?? []
 
   if (entryCSSFiles) {
-    for (const file of entryCSSFiles) {
-      if (!injectedCSS.has(file)) {
+    for (const css of entryCSSFiles) {
+      if (!injectedCSS.has(css.path)) {
         if (collectNewImports) {
-          injectedCSS.add(file)
+          injectedCSS.add(css.path)
         }
-        cssChunks.add(file)
+        cssChunks.add(css)
       }
     }
   }
diff --git a/packages/next/src/server/app-render/get-layer-assets.tsx b/packages/next/src/server/app-render/get-layer-assets.tsx
index b6e4324b23199..7d2b7485afd17 100644
--- a/packages/next/src/server/app-render/get-layer-assets.tsx
+++ b/packages/next/src/server/app-render/get-layer-assets.tsx
@@ -5,7 +5,6 @@ import type { AppRenderContext } from './app-render'
 import { getAssetQueryString } from './get-asset-query-string'
 import { encodeURIPath } from '../../shared/lib/encode-uri-path'
 import type { PreloadCallbacks } from './types'
-import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
 import { renderCssResource } from './render-css-resource'
 
 export function getLayerAssets({
@@ -17,7 +16,7 @@ export function getLayerAssets({
   preloadCallbacks,
 }: {
   layoutOrPagePath: string | undefined
-  injectedCSS: Set<CssResource>
+  injectedCSS: Set<string>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   ctx: AppRenderContext
diff --git a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
index ce76bddb8c8f0..bf32e6bfbac29 100644
--- a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
+++ b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
@@ -21,7 +21,6 @@ import {
   addSearchParamsIfPageSegment,
 } from '../../shared/lib/segment'
 import { createComponentTree } from './create-component-tree'
-import type { CssResource } from '../../build/webpack/plugins/flight-manifest-plugin'
 
 /**
  * Use router state to decide at what common layout to render the page.
@@ -50,7 +49,7 @@ export async function walkTreeWithFlightRouterState({
   flightRouterState?: FlightRouterState
   parentRendered?: boolean
   rscPayloadHead: React.ReactNode
-  injectedCSS: Set<CssResource>
+  injectedCSS: Set<string>
   injectedJS: Set<string>
   injectedFontPreloadTags: Set<string>
   rootLayoutIncluded: boolean

From 1d1912184cd95e53f14bc5b793e958e48e69e6d1 Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Wed, 20 Nov 2024 12:41:53 -0500
Subject: [PATCH 6/9] limit to production only, limit to canary only

---
 .../server/app-render/render-css-resource.tsx    |  7 ++++++-
 packages/next/src/server/config-shared.ts        |  2 +-
 packages/next/src/server/config.ts               |  2 ++
 test/e2e/app-dir/app-inline-css/index.test.ts    | 16 +++++++++-------
 4 files changed, 18 insertions(+), 9 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
index 15bb8b9e89449..01dfb77a16620 100644
--- 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,12 @@ export function renderCssResource(
       entryCssFile.path
     )}${getAssetQueryString(ctx, true)}`
 
-    if (entryCssFile.inlined) {
+    if (
+      entryCssFile.inlined &&
+      // Inline CSS currently does not work in Turbopack HMR, so we only inline
+      // CSS in production.
+      process.env.NODE_ENV === 'production'
+    ) {
       return (
         <style
           key={index}
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index e6726f457c566..551a9a55fa940 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -559,7 +559,7 @@ export interface ExperimentalConfig {
 
   /**
    * Render <style> tags inline in the HTML for imported CSS assets.
-   * Supports app-router only.
+   * Supports app-router in production mode only.
    */
   inlineCss?: boolean
 }
diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts
index 5563f5bdc8139..33e5568bdcdf9 100644
--- a/packages/next/src/server/config.ts
+++ b/packages/next/src/server/config.ts
@@ -251,6 +251,8 @@ function assignDefaults(
       throw new CanaryOnlyError('experimental.dynamicIO')
     } else if (result.experimental?.turbo?.unstablePersistentCaching) {
       throw new CanaryOnlyError('experimental.turbo.unstablePersistentCaching')
+    } else if (result.experimental?.inlineCss) {
+      throw new CanaryOnlyError('experimental.inlineCss')
     }
   }
 
diff --git a/test/e2e/app-dir/app-inline-css/index.test.ts b/test/e2e/app-dir/app-inline-css/index.test.ts
index 70c35eb77baea..6925fc945673c 100644
--- a/test/e2e/app-dir/app-inline-css/index.test.ts
+++ b/test/e2e/app-dir/app-inline-css/index.test.ts
@@ -1,17 +1,19 @@
 import { nextTestSetup } from 'e2e-utils'
 
 describe('app dir - css - experimental inline css', () => {
-  const { next } = nextTestSetup({
+  const { next, isNextDev } = nextTestSetup({
     files: __dirname,
   })
 
-  it('should render page with correct styles', async () => {
-    const browser = await next.browser('/')
+  ;(isNextDev ? describe.skip : describe)('Production only', () => {
+    it('should render page with correct styles', async () => {
+      const browser = await next.browser('/')
 
-    const inlineStyleTag = await browser.elementByCss('style')
-    expect(await inlineStyleTag.text()).toContain('color')
+      const inlineStyleTag = await browser.elementByCss('style')
+      expect(await inlineStyleTag.text()).toContain('color')
 
-    const p = await browser.elementByCss('p')
-    expect(await p.getComputedCss('color')).toBe('rgb(255, 255, 0)') // yellow
+      const p = await browser.elementByCss('p')
+      expect(await p.getComputedCss('color')).toBe('rgb(255, 255, 0)') // yellow
+    })
   })
 })

From ef3254109a74ed6e77866fc8c34ca777282606bd Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Wed, 20 Nov 2024 13:21:28 -0500
Subject: [PATCH 7/9] neat

---
 .../next/src/server/app-render/render-css-resource.tsx     | 7 +++----
 1 file changed, 3 insertions(+), 4 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
index 01dfb77a16620..cf175d6b3ed94 100644
--- a/packages/next/src/server/app-render/render-css-resource.tsx
+++ b/packages/next/src/server/app-render/render-css-resource.tsx
@@ -45,14 +45,13 @@ export function renderCssResource(
       return (
         <style
           key={index}
-          dangerouslySetInnerHTML={{
-            __html: entryCssFile.content,
-          }}
           nonce={ctx.nonce}
           // @ts-ignore
           precedence={precedence}
           href={fullHref}
-        />
+        >
+          {entryCssFile.content}
+        </style>
       )
     }
 

From 4cbdddd04219ea653df32cdadf9992afcaef7ce1 Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Wed, 20 Nov 2024 14:41:27 -0500
Subject: [PATCH 8/9] disable inline at source

---
 crates/next-api/src/app.rs                                 | 1 +
 .../src/next_manifests/client_reference_manifest.rs        | 5 ++++-
 .../src/build/webpack/plugins/flight-manifest-plugin.ts    | 7 ++++++-
 .../next/src/server/app-render/render-css-resource.tsx     | 7 +------
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/crates/next-api/src/app.rs b/crates/next-api/src/app.rs
index 8f52c25f35926..df2876bea5f48 100644
--- a/crates/next-api/src/app.rs
+++ b/crates/next-api/src/app.rs
@@ -1190,6 +1190,7 @@ impl AppEndpoint {
                     ssr_chunking_context,
                     this.app_project.project().next_config(),
                     runtime,
+                    this.app_project.project().next_mode(),
                 )
                 .to_resolved()
                 .await?;
diff --git a/crates/next-core/src/next_manifests/client_reference_manifest.rs b/crates/next-core/src/next_manifests/client_reference_manifest.rs
index 692e05bc33a0e..3ad123c852dcf 100644
--- a/crates/next-core/src/next_manifests/client_reference_manifest.rs
+++ b/crates/next-core/src/next_manifests/client_reference_manifest.rs
@@ -16,6 +16,7 @@ use turbopack_ecmascript::utils::StringifyJs;
 
 use super::{ClientReferenceManifest, CssResource, ManifestNode, ManifestNodeEntry, ModuleId};
 use crate::{
+    mode::NextMode,
     next_app::ClientReferencesChunks,
     next_client_reference::{ClientReferenceGraphResult, ClientReferenceType},
     next_config::NextConfig,
@@ -37,6 +38,7 @@ impl ClientReferenceManifest {
         ssr_chunking_context: Option<Vc<Box<dyn ChunkingContext>>>,
         next_config: Vc<NextConfig>,
         runtime: NextRuntime,
+        mode: Vc<NextMode>,
     ) -> Result<Vc<Box<dyn OutputAsset>>> {
         let mut entry_manifest: ClientReferenceManifest = Default::default();
         let mut references = FxIndexSet::default();
@@ -271,7 +273,8 @@ impl ClientReferenceManifest {
                 }
             }
 
-            let inlined = next_config.await?.experimental.inline_css.unwrap_or(false);
+            let inlined = next_config.await?.experimental.inline_css.unwrap_or(false)
+                && mode.await?.is_production();
             let entry_css_files_vec = entry_css_files_with_chunk
                 .into_iter()
                 .map(|(path, chunk)| async {
diff --git a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
index ebdc43c1987f9..81f7f944329f7 100644
--- a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
@@ -318,7 +318,12 @@ export class ClientReferenceManifestPlugin {
         .filter((f) => !f.startsWith('static/css/pages/') && f.endsWith('.css'))
         .map((file) => {
           const source = compilation.assets[file].source()
-          if (this.experimentalInlineCss) {
+          if (
+            this.experimentalInlineCss &&
+            // Inline CSS currently does not work in Turbopack HMR, so we only inline
+            // CSS in production.
+            process.env.NODE_ENV === 'production'
+          ) {
             return {
               inlined: true,
               path: file,
diff --git a/packages/next/src/server/app-render/render-css-resource.tsx b/packages/next/src/server/app-render/render-css-resource.tsx
index cf175d6b3ed94..9ed009fa6c991 100644
--- a/packages/next/src/server/app-render/render-css-resource.tsx
+++ b/packages/next/src/server/app-render/render-css-resource.tsx
@@ -36,12 +36,7 @@ export function renderCssResource(
       entryCssFile.path
     )}${getAssetQueryString(ctx, true)}`
 
-    if (
-      entryCssFile.inlined &&
-      // Inline CSS currently does not work in Turbopack HMR, so we only inline
-      // CSS in production.
-      process.env.NODE_ENV === 'production'
-    ) {
+    if (entryCssFile.inlined) {
       return (
         <style
           key={index}

From 3ec0b7c7aa7a11ebbfc7701d344743fc90204ec8 Mon Sep 17 00:00:00 2001
From: Jude Gao <jude.gao@vercel.com>
Date: Wed, 20 Nov 2024 14:51:21 -0500
Subject: [PATCH 9/9] Update flight-manifest-plugin.ts

Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
---
 .../src/build/webpack/plugins/flight-manifest-plugin.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
index 81f7f944329f7..7dd4e7a945771 100644
--- a/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts
@@ -320,9 +320,9 @@ export class ClientReferenceManifestPlugin {
           const source = compilation.assets[file].source()
           if (
             this.experimentalInlineCss &&
-            // Inline CSS currently does not work in Turbopack HMR, so we only inline
-            // CSS in production.
-            process.env.NODE_ENV === 'production'
+            // Inline CSS currently does not work properly with HMR, so we only
+            // inline CSS in production.
+            !this.dev
           ) {
             return {
               inlined: true,