App font loader tree shaking (vercel#41384)

Fixes tree shaking for font loaders in server components.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/build/webpack-config.ts

@@ -1967,12 +1967,10 @@ export default async function getBaseWebpackConfig(
         (isClient
           ? new FlightManifestPlugin({
               dev,
-              fontLoaderTargets,
             })
           : new FlightClientEntryPlugin({
               dev,
               isEdgeServer,
-              fontLoaderTargets,
             })),
       !dev &&
         isClient &&

packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts

@@ -1,5 +1,6 @@
 import { RSC_MODULE_TYPES } from '../../../shared/lib/constants'
 import { getModuleBuildInfo } from './get-module-build-info'
+import { regexCSS } from './utils'
 
 export type ClientComponentImports = string[]
 export type CssImports = Record<string, string[]>
@@ -22,7 +23,7 @@ export default async function transformSource(this: any): Promise<string> {
   const requests = modules as string[]
   const code = requests
     // Filter out css files on the server
-    .filter((request) => (isServer ? !request.endsWith('.css') : true))
+    .filter((request) => (isServer ? !regexCSS.test(request) : true))
     .map((request) =>
       request.endsWith('.css')
         ? `(() => import(/* webpackMode: "lazy" */ ${JSON.stringify(request)}))`

packages/next/build/webpack/loaders/utils.ts

@@ -10,3 +10,6 @@ export function isClientComponentModule(mod: {
   const hasClientDirective = mod.buildInfo.rsc?.type === RSC_MODULE_TYPES.client
   return hasClientDirective || imageRegex.test(mod.resource)
 }
+
+// TODO-APP: ensure .scss / .sass also works.
+export const regexCSS = /\.css(\?.*)?$/

packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -19,12 +19,11 @@ import {
 } from '../../../shared/lib/constants'
 import { FlightCSSManifest, traverseModules } from './flight-manifest-plugin'
 import { ASYNC_CLIENT_MODULES } from './flight-manifest-plugin'
-import { isClientComponentModule } from '../loaders/utils'
+import { isClientComponentModule, regexCSS } from '../loaders/utils'
 
 interface Options {
   dev: boolean
   isEdgeServer: boolean
-  fontLoaderTargets?: string[]
 }
 
 const PLUGIN_NAME = 'ClientEntryPlugin'
@@ -34,21 +33,16 @@ export const injectedClientEntries = new Map()
 export const serverModuleIds = new Map<string, string | number>()
 export const edgeServerModuleIds = new Map<string, string | number>()
 
-// TODO-APP: ensure .scss / .sass also works.
-const regexCSS = /\.css$/
-
 // TODO-APP: move CSS manifest generation to the flight manifest plugin.
 const flightCSSManifest: FlightCSSManifest = {}
 
 export class FlightClientEntryPlugin {
   dev: boolean
   isEdgeServer: boolean
-  fontLoaderTargets?: string[]
 
   constructor(options: Options) {
     this.dev = options.dev
     this.isEdgeServer = options.isEdgeServer
-    this.fontLoaderTargets = options.fontLoaderTargets
   }
 
   apply(compiler: webpack.Compiler) {
@@ -376,18 +370,14 @@ export class FlightClientEntryPlugin {
       // Request could be undefined or ''
       if (!rawRequest) return
 
-      const isFontLoader = this.fontLoaderTargets?.some((fontLoaderTarget) =>
-        mod.userRequest.startsWith(`${fontLoaderTarget}?`)
-      )
+      const isCSS = regexCSS.test(rawRequest)
       const modRequest: string | undefined =
-        !rawRequest.endsWith('.css') &&
+        !isCSS &&
         !rawRequest.startsWith('.') &&
         !rawRequest.startsWith('/') &&
         !rawRequest.startsWith(APP_DIR_ALIAS)
-          ? isFontLoader
-            ? mod.userRequest
-            : rawRequest
-          : mod.resourceResolveData?.path
+          ? rawRequest
+          : mod.resourceResolveData?.path + mod.resourceResolveData?.query
 
       // Ensure module is not walked again if it's already been visited
       if (!visitedBySegment[layoutOrPageRequest]) {
@@ -401,7 +391,6 @@ export class FlightClientEntryPlugin {
       }
       visitedBySegment[layoutOrPageRequest].add(modRequest)
 
-      const isCSS = isFontLoader || regexCSS.test(modRequest)
       const isClientComponent = isClientComponentModule(mod)
 
       if (isCSS) {

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -8,7 +8,7 @@
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 import { FLIGHT_MANIFEST } from '../../../shared/lib/constants'
 import { relative } from 'path'
-import { isClientComponentModule } from '../loaders/utils'
+import { isClientComponentModule, regexCSS } from '../loaders/utils'
 
 import {
   edgeServerModuleIds,
@@ -24,7 +24,6 @@ import {
 
 interface Options {
   dev: boolean
-  fontLoaderTargets?: string[]
 }
 
 /**
@@ -111,11 +110,9 @@ export function traverseModules(
 
 export class FlightManifestPlugin {
   dev: Options['dev'] = false
-  fontLoaderTargets?: Options['fontLoaderTargets']
 
   constructor(options: Options) {
     this.dev = options.dev
-    this.fontLoaderTargets = options.fontLoaderTargets
   }
 
   apply(compiler: webpack.Compiler) {
@@ -156,7 +153,6 @@ export class FlightManifestPlugin {
       __edge_ssr_module_mapping__: {},
     }
     const dev = this.dev
-    const fontLoaderTargets = this.fontLoaderTargets
 
     const clientRequestsSet = new Set()
 
@@ -181,12 +177,8 @@ export class FlightManifestPlugin {
         id: ModuleId,
         mod: webpack.NormalModule
       ) {
-        const isFontLoader = fontLoaderTargets?.some((fontLoaderTarget) =>
-          mod.resource?.startsWith(`${fontLoaderTarget}?`)
-        )
         const isCSSModule =
-          isFontLoader ||
-          mod.resource?.endsWith('.css') ||
+          regexCSS.test(mod.resource) ||
           mod.type === 'css/mini-extract' ||
           (!!mod.loaders &&
             (dev

packages/next/server/app-render.tsx

@@ -582,9 +582,8 @@ function getPreloadedFontFilesInlineLinkTags(
   const fontFiles = new Set<string>()
 
   for (const css of layoutOrPageCss) {
-    // We only include the CSS if it's a global CSS, or it is used by this
-    // entrypoint.
-    if (serverCSSForEntries.includes(css) || !/\.module\.css/.test(css)) {
+    // We only include the CSS if it is used by this entrypoint.
+    if (serverCSSForEntries.includes(css)) {
       const preloadedFontFiles = fontLoaderManifest.app[css]
       if (preloadedFontFiles) {
         for (const fontFile of preloadedFontFiles) {