Skip to content

Commit e822c80

Browse files
authored
fix: add ?dpl to fonts in /_next/static/media part 2 (#82488)
This is a follow up to PR #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
1 parent ee8286f commit e822c80

File tree

9 files changed

+50
-2
lines changed

9 files changed

+50
-2
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ describe('next/font/google loader', () => {
124124
mockFetchResource.mockResolvedValue(Buffer.from('OK'))
125125
const { css } = await nextFontGoogleFontLoader({
126126
functionName,
127+
deploymentId: undefined,
127128
data: [
128129
{
129130
adjustFontFallback: false,

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ describe('next/font/local loader', () => {
55
test('Default CSS', async () => {
66
const { css } = await nextFontLocalFontLoader({
77
functionName: '',
8+
deploymentId: undefined,
89
data: [{ src: './my-font.woff2' }],
910
emitFontFile: () => '/_next/static/media/my-font.woff2',
1011
resolve: jest.fn(),
@@ -28,9 +29,37 @@ describe('next/font/local loader', () => {
2829
`)
2930
})
3031

32+
test('with dpl query string', async () => {
33+
const { css } = await nextFontLocalFontLoader({
34+
functionName: '',
35+
deploymentId: 'dpl_123',
36+
data: [{ src: './my-font.woff2' }],
37+
emitFontFile: () => '/_next/static/media/my-font.woff2',
38+
resolve: jest.fn(),
39+
isDev: false,
40+
isServer: true,
41+
variableName: 'myFont',
42+
loaderContext: {
43+
fs: {
44+
readFile: (_: string, cb: any) => cb(null, 'fontdata'),
45+
},
46+
} as any,
47+
})
48+
49+
expect(css).toMatchInlineSnapshot(`
50+
"@font-face {
51+
font-family: myFont;
52+
src: url(/_next/static/media/my-font.woff2?dpl=dpl_123) format('woff2');
53+
font-display: swap;
54+
}
55+
"
56+
`)
57+
})
58+
3159
test('Weight and style', async () => {
3260
const { css } = await nextFontLocalFontLoader({
3361
functionName: '',
62+
deploymentId: undefined,
3463
data: [{ src: './my-font.woff2', weight: '100 900', style: 'italic' }],
3564
emitFontFile: () => '/_next/static/media/my-font.woff2',
3665
resolve: jest.fn(),
@@ -59,6 +88,7 @@ describe('next/font/local loader', () => {
5988
test('Other properties', async () => {
6089
const { css } = await nextFontLocalFontLoader({
6190
functionName: '',
91+
deploymentId: undefined,
6292
data: [
6393
{
6494
src: './my-font.woff2',
@@ -95,6 +125,7 @@ describe('next/font/local loader', () => {
95125
test('Multiple weights default style', async () => {
96126
const { css } = await nextFontLocalFontLoader({
97127
functionName: '',
128+
deploymentId: undefined,
98129
data: [
99130
{
100131
style: 'italic',
@@ -171,6 +202,7 @@ describe('next/font/local loader', () => {
171202
test('Multiple styles default weight', async () => {
172203
const { css } = await nextFontLocalFontLoader({
173204
functionName: '',
205+
deploymentId: undefined,
174206
data: [
175207
{
176208
weight: '400',
@@ -233,6 +265,7 @@ describe('next/font/local loader', () => {
233265
test('Custom font-family in declarations', async () => {
234266
const { css } = await nextFontLocalFontLoader({
235267
functionName: '',
268+
deploymentId: undefined,
236269
data: [
237270
{
238271
src: './my-font.woff2',

packages/font/src/local/loader.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const nextFontLocalFontLoader: FontLoader = async ({
1919
data,
2020
emitFontFile,
2121
resolve,
22+
deploymentId,
2223
loaderContext,
2324
}) => {
2425
const {
@@ -45,6 +46,10 @@ const nextFontLocalFontLoader: FontLoader = async ({
4546
preload,
4647
typeof adjustFontFallback === 'undefined' || !!adjustFontFallback
4748
)
49+
// Should match behavior in get-asset-query-string.ts
50+
const qs = deploymentId
51+
? `${fontUrl.includes('?') ? '&' : '?'}dpl=${deploymentId}`
52+
: ''
4853

4954
// Try to load font metadata from the font file using fontkit.
5055
// The data is used to calculate the fallback font override values.
@@ -66,7 +71,7 @@ const nextFontLocalFontLoader: FontLoader = async ({
6671
? declarations.map(({ prop, value }) => [prop, value])
6772
: []),
6873
...(hasCustomFontFamily ? [] : [['font-family', variableName]]),
69-
['src', `url(${fontUrl}) format('${format}')`],
74+
['src', `url(${fontUrl + qs}) format('${format}')`],
7075
['font-display', display],
7176
...(weight ?? defaultWeight
7277
? [['font-weight', weight ?? defaultWeight]]

packages/next/font/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export type FontLoader = (options: {
1919
resolve: (src: string) => string
2020
isDev: boolean
2121
isServer: boolean
22+
deploymentId: string | undefined
2223
loaderContext: any
2324
}) => Promise<{
2425
css: string

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2454,6 +2454,7 @@ export default async function getBaseWebpackConfig(
24542454
isEdgeRuntime: isEdgeServer,
24552455
targetWeb: isClient || isEdgeServer,
24562456
assetPrefix: config.assetPrefix || '',
2457+
deploymentId: config.deploymentId,
24572458
sassOptions: config.sassOptions,
24582459
productionBrowserSourceMaps: config.productionBrowserSourceMaps,
24592460
future: config.future,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export function getNextFontLoader(
6262
isDev: ctx.isDevelopment,
6363
isServer: ctx.isServer,
6464
assetPrefix: ctx.assetPrefix,
65+
deploymentId: ctx.deploymentId,
6566
fontLoaderPath,
6667
postcss,
6768
},

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export async function buildConfiguration(
1919
isEdgeRuntime,
2020
targetWeb,
2121
assetPrefix,
22+
deploymentId,
2223
sassOptions,
2324
productionBrowserSourceMaps,
2425
future,
@@ -36,6 +37,7 @@ export async function buildConfiguration(
3637
isEdgeRuntime: boolean
3738
targetWeb: boolean
3839
assetPrefix: string
40+
deploymentId: string | undefined
3941
sassOptions: any
4042
productionBrowserSourceMaps: boolean
4143
transpilePackages: NextConfigComplete['transpilePackages']
@@ -61,6 +63,7 @@ export async function buildConfiguration(
6163
? assetPrefix.slice(0, -1)
6264
: assetPrefix
6365
: '',
66+
deploymentId,
6467
sassOptions,
6568
productionBrowserSourceMaps,
6669
transpilePackages,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export type ConfigurationContext = {
1919
targetWeb: boolean
2020

2121
assetPrefix: string
22+
deploymentId: string | undefined
2223

2324
sassOptions: any
2425
productionBrowserSourceMaps: boolean

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default async function nextFontLoader(this: any) {
4545
assetPrefix,
4646
fontLoaderPath,
4747
postcss: getPostcss,
48+
deploymentId,
4849
} = this.getOptions()
4950

5051
if (assetPrefix && !/^\/|https?:\/\//.test(assetPrefix)) {
@@ -66,7 +67,7 @@ export default async function nextFontLoader(this: any) {
6667
* NextFontManifestPlugin uses this to see if fallback fonts are being used.
6768
* This is used to collect stats on fallback fonts usage by the Google Aurora team.
6869
*/
69-
const emitFontFile = (
70+
const emitFontFile: Parameters<FontLoader>[0]['emitFontFile'] = (
7071
content: Buffer,
7172
ext: string,
7273
preload: boolean,
@@ -109,6 +110,7 @@ export default async function nextFontLoader(this: any) {
109110
),
110111
isDev,
111112
isServer,
113+
deploymentId,
112114
loaderContext: this,
113115
})
114116
)

0 commit comments

Comments
 (0)