fix: add ?dpl to fonts in /_next/static/media part 2 (#82488)

This is a follow up to PR https://github.com/vercel/next.js/pull/82384
which fixed it for `<link>` but not for `next/font` that embeds local
fonts in css.


https://nextjs.org/docs/14/app/building-your-application/deploying#version-skew

packages/font/src/google/loader.test.ts

@@ -124,6 +124,7 @@ describe('next/font/google loader', () => {
         mockFetchResource.mockResolvedValue(Buffer.from('OK'))
         const { css } = await nextFontGoogleFontLoader({
           functionName,
+          deploymentId: undefined,
           data: [
             {
               adjustFontFallback: false,

packages/font/src/local/loader.test.ts

@@ -5,6 +5,7 @@ describe('next/font/local loader', () => {
     test('Default CSS', async () => {
       const { css } = await nextFontLocalFontLoader({
         functionName: '',
+        deploymentId: undefined,
         data: [{ src: './my-font.woff2' }],
         emitFontFile: () => '/_next/static/media/my-font.woff2',
         resolve: jest.fn(),
@@ -28,9 +29,37 @@ describe('next/font/local loader', () => {
       `)
     })
 
+    test('with dpl query string', async () => {
+      const { css } = await nextFontLocalFontLoader({
+        functionName: '',
+        deploymentId: 'dpl_123',
+        data: [{ src: './my-font.woff2' }],
+        emitFontFile: () => '/_next/static/media/my-font.woff2',
+        resolve: jest.fn(),
+        isDev: false,
+        isServer: true,
+        variableName: 'myFont',
+        loaderContext: {
+          fs: {
+            readFile: (_: string, cb: any) => cb(null, 'fontdata'),
+          },
+        } as any,
+      })
+
+      expect(css).toMatchInlineSnapshot(`
+        "@font-face {
+        font-family: myFont;
+        src: url(/_next/static/media/my-font.woff2?dpl=dpl_123) format('woff2');
+        font-display: swap;
+        }
+        "
+      `)
+    })
+
     test('Weight and style', async () => {
       const { css } = await nextFontLocalFontLoader({
         functionName: '',
+        deploymentId: undefined,
         data: [{ src: './my-font.woff2', weight: '100 900', style: 'italic' }],
         emitFontFile: () => '/_next/static/media/my-font.woff2',
         resolve: jest.fn(),
@@ -59,6 +88,7 @@ describe('next/font/local loader', () => {
     test('Other properties', async () => {
       const { css } = await nextFontLocalFontLoader({
         functionName: '',
+        deploymentId: undefined,
         data: [
           {
             src: './my-font.woff2',
@@ -95,6 +125,7 @@ describe('next/font/local loader', () => {
     test('Multiple weights default style', async () => {
       const { css } = await nextFontLocalFontLoader({
         functionName: '',
+        deploymentId: undefined,
         data: [
           {
             style: 'italic',
@@ -171,6 +202,7 @@ describe('next/font/local loader', () => {
     test('Multiple styles default weight', async () => {
       const { css } = await nextFontLocalFontLoader({
         functionName: '',
+        deploymentId: undefined,
         data: [
           {
             weight: '400',
@@ -233,6 +265,7 @@ describe('next/font/local loader', () => {
     test('Custom font-family in declarations', async () => {
       const { css } = await nextFontLocalFontLoader({
         functionName: '',
+        deploymentId: undefined,
         data: [
           {
             src: './my-font.woff2',

packages/font/src/local/loader.ts

@@ -19,6 +19,7 @@ const nextFontLocalFontLoader: FontLoader = async ({
   data,
   emitFontFile,
   resolve,
+  deploymentId,
   loaderContext,
 }) => {
   const {
@@ -45,6 +46,10 @@ const nextFontLocalFontLoader: FontLoader = async ({
         preload,
         typeof adjustFontFallback === 'undefined' || !!adjustFontFallback
       )
+      // Should match behavior in get-asset-query-string.ts
+      const qs = deploymentId
+        ? `${fontUrl.includes('?') ? '&' : '?'}dpl=${deploymentId}`
+        : ''
 
       // Try to load font metadata from the font file using fontkit.
       // The data is used to calculate the fallback font override values.
@@ -66,7 +71,7 @@ const nextFontLocalFontLoader: FontLoader = async ({
           ? declarations.map(({ prop, value }) => [prop, value])
           : []),
         ...(hasCustomFontFamily ? [] : [['font-family', variableName]]),
-        ['src', `url(${fontUrl}) format('${format}')`],
+        ['src', `url(${fontUrl + qs}) format('${format}')`],
         ['font-display', display],
         ...(weight ?? defaultWeight
           ? [['font-weight', weight ?? defaultWeight]]

packages/next/font/index.d.ts

@@ -19,6 +19,7 @@ export type FontLoader = (options: {
   resolve: (src: string) => string
   isDev: boolean
   isServer: boolean
+  deploymentId: string | undefined
   loaderContext: any
 }) => Promise<{
   css: string

packages/next/src/build/webpack-config.ts

@@ -2454,6 +2454,7 @@ export default async function getBaseWebpackConfig(
     isEdgeRuntime: isEdgeServer,
     targetWeb: isClient || isEdgeServer,
     assetPrefix: config.assetPrefix || '',
+    deploymentId: config.deploymentId,
     sassOptions: config.sassOptions,
     productionBrowserSourceMaps: config.productionBrowserSourceMaps,
     future: config.future,

packages/next/src/build/webpack/config/blocks/css/loaders/next-font.ts

@@ -62,6 +62,7 @@ export function getNextFontLoader(
       isDev: ctx.isDevelopment,
       isServer: ctx.isServer,
       assetPrefix: ctx.assetPrefix,
+      deploymentId: ctx.deploymentId,
       fontLoaderPath,
       postcss,
     },

packages/next/src/build/webpack/config/index.ts

@@ -19,6 +19,7 @@ export async function buildConfiguration(
     isEdgeRuntime,
     targetWeb,
     assetPrefix,
+    deploymentId,
     sassOptions,
     productionBrowserSourceMaps,
     future,
@@ -36,6 +37,7 @@ export async function buildConfiguration(
     isEdgeRuntime: boolean
     targetWeb: boolean
     assetPrefix: string
+    deploymentId: string | undefined
     sassOptions: any
     productionBrowserSourceMaps: boolean
     transpilePackages: NextConfigComplete['transpilePackages']
@@ -61,6 +63,7 @@ export async function buildConfiguration(
         ? assetPrefix.slice(0, -1)
         : assetPrefix
       : '',
+    deploymentId,
     sassOptions,
     productionBrowserSourceMaps,
     transpilePackages,

packages/next/src/build/webpack/config/utils.ts

@@ -19,6 +19,7 @@ export type ConfigurationContext = {
   targetWeb: boolean
 
   assetPrefix: string
+  deploymentId: string | undefined
 
   sassOptions: any
   productionBrowserSourceMaps: boolean

packages/next/src/build/webpack/loaders/next-font-loader/index.ts

@@ -45,6 +45,7 @@ export default async function nextFontLoader(this: any) {
       assetPrefix,
       fontLoaderPath,
       postcss: getPostcss,
+      deploymentId,
     } = this.getOptions()
 
     if (assetPrefix && !/^\/|https?:\/\//.test(assetPrefix)) {
@@ -66,7 +67,7 @@ export default async function nextFontLoader(this: any) {
      * NextFontManifestPlugin uses this to see if fallback fonts are being used.
      * This is used to collect stats on fallback fonts usage by the Google Aurora team.
      */
-    const emitFontFile = (
+    const emitFontFile: Parameters<FontLoader>[0]['emitFontFile'] = (
       content: Buffer,
       ext: string,
       preload: boolean,
@@ -109,6 +110,7 @@ export default async function nextFontLoader(this: any) {
               ),
             isDev,
             isServer,
+            deploymentId,
             loaderContext: this,
           })
         )