From f0e768e0a2a5d1a8f84e0f2bdad278c880a61d4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Wed, 2 Nov 2022 21:38:25 +0100 Subject: [PATCH] Local font family name (#42286) Use the name of the assigned const as the family name instead of trying to get it from the font file. That way we know we won't get any invalid characters in the font-family name. fixes #42264 ## 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 build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper --- packages/font/src/local/loader.ts | 4 +- packages/font/src/local/utils.ts | 6 --- .../font_imports_generator.rs | 14 +++++- .../next-font-loaders/export-let/output.js | 4 +- .../next-font-loaders/not-const/output.js | 4 +- .../options-object/output.js | 8 ++-- .../next-font-loaders/spread-arg/output.js | 2 +- .../default-import/output.js | 2 +- .../next-font-loaders/export-const/output.js | 4 +- .../next-font-loaders/exports/output.js | 4 +- .../next-font-loaders/font-options/output.js | 2 +- .../next-font-loaders/import-as/output.js | 2 +- .../next-font-loaders/many-args/output.js | 2 +- .../multiple-calls/output.js | 4 +- .../multiple-font-downloaders/output.js | 4 +- .../multiple-fonts/output.js | 4 +- .../multiple-imports/output.js | 4 +- .../next-font-loaders/no-args/output.js | 2 +- .../webpack/loaders/next-font-loader/index.ts | 2 + packages/next/font/index.d.ts | 1 + test/e2e/next-font/index.test.ts | 46 +++++++++---------- test/unit/google-font-loader.test.ts | 14 ++++++ test/unit/local-font-loader.test.ts | 33 +++++++++---- 23 files changed, 103 insertions(+), 69 deletions(-) diff --git a/packages/font/src/local/loader.ts b/packages/font/src/local/loader.ts index ebae82e89b18876..15bcb649409033d 100644 --- a/packages/font/src/local/loader.ts +++ b/packages/font/src/local/loader.ts @@ -53,13 +53,13 @@ function getDistanceFromNormalWeight(weight?: string) { const fetchFonts: FontLoader = async ({ functionName, + variableName, data, emitFontFile, resolve, fs, }) => { const { - family, src, display, fallback, @@ -88,7 +88,7 @@ const fetchFonts: FontLoader = async ({ ...(declarations ? declarations.map(({ prop, value }) => [prop, value]) : []), - ['font-family', `'${fontMetadata?.familyName ?? family}'`], + ['font-family', variableName], ['src', `url(${fontUrl}) format('${format}')`], ['font-display', display], ...(weight ?? defaultWeight diff --git a/packages/font/src/local/utils.ts b/packages/font/src/local/utils.ts index 8706cf9005df778..a244f797ffe36a0 100644 --- a/packages/font/src/local/utils.ts +++ b/packages/font/src/local/utils.ts @@ -12,7 +12,6 @@ const extToFormat = { } type FontOptions = { - family: string src: Array<{ path: string weight?: string @@ -65,15 +64,11 @@ export function validateData(functionName: string, fontData: any): FontOptions { } } - let family: string | undefined src = src.map((fontFile: any) => { const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile.path)?.[1] if (!ext) { throw new Error(`Unexpected file \`${fontFile.path}\``) } - if (!family) { - family = /(.*\/)?(.+?)\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile.path)![2] - } return { ...fontFile, @@ -99,7 +94,6 @@ export function validateData(functionName: string, fontData: any): FontOptions { } return { - family: family!, src, display, weight, diff --git a/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs b/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs index e6e123ec36fb160..d6a92447b833d54 100644 --- a/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs +++ b/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs @@ -11,7 +11,11 @@ pub struct FontImportsGenerator<'a> { } impl<'a> FontImportsGenerator<'a> { - fn check_call_expr(&mut self, call_expr: &CallExpr) -> Option { + fn check_call_expr( + &mut self, + call_expr: &CallExpr, + variable_name: &Result, + ) -> Option { if let Callee::Expr(callee_expr) = &call_expr.callee { if let Expr::Ident(ident) = &**callee_expr { if let Some(font_function) = self.state.font_functions.get(&ident.to_id()) { @@ -48,6 +52,12 @@ impl<'a> FontImportsGenerator<'a> { query_json_values .insert(String::from("import"), Value::String(function_name)); query_json_values.insert(String::from("arguments"), Value::Array(json)); + if let Ok(ident) = variable_name { + query_json_values.insert( + String::from("variableName"), + Value::String(ident.sym.to_string()), + ); + } let query_json = Value::Object(query_json_values); @@ -81,7 +91,7 @@ impl<'a> FontImportsGenerator<'a> { }; if let Some(expr) = &decl.init { if let Expr::Call(call_expr) = &**expr { - let import_decl = self.check_call_expr(call_expr); + let import_decl = self.check_call_expr(call_expr, &ident); if let Some(mut import_decl) = import_decl { match var_decl.kind { diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js index 9ddf24e3974096d..95d8ec34da54c88 100644 --- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js +++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js @@ -1,5 +1,5 @@ -import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}'; -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}'; +import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}'; import React from 'react'; export { firaCode }; export { inter }; diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js index f54f3cf2f821364..0bb18ca8d624d21 100644 --- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js +++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js @@ -1,4 +1,4 @@ -import inter1 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}]}'; -import inter2 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}]}'; +import inter1 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}],"variableName":"inter1"}'; +import inter2 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}],"variableName":"inter2"}'; var i = 10; var i2 = 20; diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js index a8c2866a10e41a9..7fac43692f14ad7 100644 --- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js +++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js @@ -1,7 +1,7 @@ -import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}'; -import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}'; -import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}'; -import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}'; +import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}'; +import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}'; +import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}'; +import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}'; const a = fn({ 10: 'hello' }); diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js index 07ff833332e63f4..20ca40247accdb7 100644 --- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js +++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js @@ -1,2 +1,2 @@ -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{},[]]}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{},[]],"variableName":"inter"}'; const a = fn(...{}, ...[]); diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js index d834e14dc28e6ce..3d993f6e21af634 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js @@ -1 +1 @@ -import font from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"","arguments":[{"prop":true}]}'; +import font from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"","arguments":[{"prop":true}],"variableName":"font"}'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js index 9ddf24e3974096d..95d8ec34da54c88 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js @@ -1,5 +1,5 @@ -import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}'; -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}'; +import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}'; import React from 'react'; export { firaCode }; export { inter }; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js index e011c842d8f2d5a..57f888312d33a2d 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js @@ -1,5 +1,5 @@ -import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}'; -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}'; +import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}'; import React from 'react'; export { firaCode }; export default inter; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js index a1a92848f288b0d..bf5f1094c6a92c8 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js @@ -1,3 +1,3 @@ -import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}]}'; +import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}],"variableName":"firaCode"}'; import React from 'react'; console.log(firaCode); diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js index b7dc24e494f83cf..a20154bf62db740 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js @@ -1,2 +1,2 @@ -import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}]}'; +import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}],"variableName":"acme1"}'; import React from 'react'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js index b79734b7ba114da..d492c40275e2f23 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js @@ -1 +1 @@ -import geo from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Geo","arguments":["test",[1.0],{"a":2.0},3.0]}'; +import geo from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Geo","arguments":["test",[1.0],{"a":2.0},3.0],"variableName":"geo"}'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js index 5541ae8803f1154..0131db587509ead 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js @@ -1,3 +1,3 @@ -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}'; -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}'; import React from 'react'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js index 3c6e3c26b2367ff..4f4bc102a82e07b 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js @@ -1,3 +1,3 @@ -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}]}'; -import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}]}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}'; +import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}'; import React from 'react'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js index 086c584518d4d79..64a37fd15b34115 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js @@ -1,3 +1,3 @@ -import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}]}'; -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}'; +import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}],"variableName":"firaCode"}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}'; import React from 'react'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js index 040502437700b87..8ba10144df1bf08 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js @@ -1,3 +1,3 @@ -import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}]}'; -import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}]}'; +import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}'; +import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}'; import React from 'react'; diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js index 389ee70328dd537..79cb8a45bd77e6f 100644 --- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js +++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js @@ -1 +1 @@ -import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[]}'; +import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[],"variableName":"fira"}'; diff --git a/packages/next/build/webpack/loaders/next-font-loader/index.ts b/packages/next/build/webpack/loaders/next-font-loader/index.ts index 9d15aa7454f9189..8750532db6ed4bc 100644 --- a/packages/next/build/webpack/loaders/next-font-loader/index.ts +++ b/packages/next/build/webpack/loaders/next-font-loader/index.ts @@ -57,6 +57,7 @@ export default async function nextFontLoader(this: any) { path: relativeFilePathFromRoot, import: functionName, arguments: data, + variableName, } = JSON.parse(this.resourceQuery.slice(1)) try { @@ -67,6 +68,7 @@ export default async function nextFontLoader(this: any) { let { css, fallbackFonts, adjustFontFallback, weight, style, variable } = await fontLoader({ functionName, + variableName, data, config: fontLoaderOptions, emitFontFile, diff --git a/packages/next/font/index.d.ts b/packages/next/font/index.d.ts index 85bdb05888a9291..ce4c25884e53e48 100644 --- a/packages/next/font/index.d.ts +++ b/packages/next/font/index.d.ts @@ -14,6 +14,7 @@ export type AdjustFontFallback = { export type FontLoader = (options: { functionName: string + variableName: string data: any[] config: any emitFontFile: (content: Buffer, ext: string, preload: boolean) => string diff --git a/test/e2e/next-font/index.test.ts b/test/e2e/next-font/index.test.ts index 2e40797aa232df8..8768d8a966a4f45 100644 --- a/test/e2e/next-font/index.test.ts +++ b/test/e2e/next-font/index.test.ts @@ -108,7 +108,7 @@ describe('@next/font/google', () => { className: expect.stringMatching(/__className_.{6}/), style: { fontFamily: expect.stringMatching( - /^'__Fraunces_.{6}', system-ui, '__Fraunces_Fallback_.{6}'$/ + /^'__myFont1_.{6}', system-ui, '__myFont1_Fallback_.{6}'$/ ), fontStyle: 'italic', fontWeight: 100, @@ -119,7 +119,7 @@ describe('@next/font/google', () => { variable: expect.stringMatching(/^__variable_.{6}$/), style: { fontFamily: expect.stringMatching( - /^'__Indie_Flower_.{6}', '__Indie_Flower_Fallback_.{6}'$/ + /^'__myFont2_.{6}', '__myFont2_Fallback_.{6}'$/ ), }, }) @@ -238,7 +238,7 @@ describe('@next/font/google', () => { ).not.toMatch(roboto100ItalicRegex) // Local font - const localFontRegex = /^__Fraunces_.{6}, __Fraunces_Fallback_.{6}$/ + const localFontRegex = /^__myFont_.{6}, __myFont_Fallback_.{6}$/ expect( await browser.eval( 'getComputedStyle(document.querySelector("#variables-local-font")).fontFamily' @@ -361,22 +361,22 @@ describe('@next/font/google', () => { const browser = await webdriver(next.url, '/with-local-fonts') const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).ascentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).ascentOverride' ) expect(ascentOverride).toBe('103.26%') const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).descentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).descentOverride' ) expect(descentOverride).toBe('51.94%') const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).lineGapOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).lineGapOverride' ) expect(lineGapOverride).toBe('0%') const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).sizeAdjust' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).sizeAdjust' ) expect(sizeAdjust).toBe('94%') }) @@ -385,22 +385,22 @@ describe('@next/font/google', () => { const browser = await webdriver(next.url, '/with-local-fonts') const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).ascentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).ascentOverride' ) expect(ascentOverride).toBe('84.71%') const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).descentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).descentOverride' ) expect(descentOverride).toBe('22.09%') const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).lineGapOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).lineGapOverride' ) expect(lineGapOverride).toBe('0%') const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).sizeAdjust' + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).sizeAdjust' ) expect(sizeAdjust).toBe('115.45%') }) @@ -409,22 +409,22 @@ describe('@next/font/google', () => { const browser = await webdriver(next.url, '/with-local-fonts') const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).ascentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).ascentOverride' ) expect(ascentOverride).toBe('92.49%') const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).descentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).descentOverride' ) expect(descentOverride).toBe('24.34%') const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).lineGapOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).lineGapOverride' ) expect(lineGapOverride).toBe('0%') const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).sizeAdjust' + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).sizeAdjust' ) expect(sizeAdjust).toBe('100.3%') }) @@ -433,22 +433,22 @@ describe('@next/font/google', () => { const browser = await webdriver(next.url, '/with-local-fonts') const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).ascentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).ascentOverride' ) expect(ascentOverride).toBe('92.49%') const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).descentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).descentOverride' ) expect(descentOverride).toBe('24.34%') const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).lineGapOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).lineGapOverride' ) expect(lineGapOverride).toBe('0%') const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).sizeAdjust' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).sizeAdjust' ) expect(sizeAdjust).toBe('100.3%') }) @@ -457,22 +457,22 @@ describe('@next/font/google', () => { const browser = await webdriver(next.url, '/with-local-fonts') const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).ascentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).ascentOverride' ) expect(ascentOverride).toBe('92.49%') const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).descentOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).descentOverride' ) expect(descentOverride).toBe('24.34%') const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).lineGapOverride' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).lineGapOverride' ) expect(lineGapOverride).toBe('0%') const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).sizeAdjust' + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).sizeAdjust' ) expect(sizeAdjust).toBe('100.3%') }) diff --git a/test/unit/google-font-loader.test.ts b/test/unit/google-font-loader.test.ts index 0348f44941209bb..cbd690989c8f003 100644 --- a/test/unit/google-font-loader.test.ts +++ b/test/unit/google-font-loader.test.ts @@ -86,6 +86,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) expect(css).toBe('OK\n') expect(fetch).toHaveBeenCalledTimes(1) @@ -112,6 +113,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) expect(css).toBe('1\n2\n3\n4\n5\n6\n') expect(fetch).toHaveBeenCalledTimes(6) @@ -163,6 +165,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Failed to fetch font \`Alkalami\`. @@ -180,6 +183,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot( `"@next/font/google has no default export"` @@ -196,6 +200,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot( `"Unknown font \`Unknown Font\`"` @@ -212,6 +217,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Unknown weight \`123\` for font \`Inter\`. @@ -229,6 +235,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Missing weight for font \`Abel\`. @@ -246,6 +253,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Unknown style \`normal\` for font \`Molle\`. @@ -263,6 +271,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Invalid display value \`invalid\` for font \`Inter\`. @@ -280,6 +289,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot( `"Axes can only be defined for variable fonts"` @@ -296,6 +306,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot( `"Font \`Lora\` has no definable \`axes\`"` @@ -312,6 +323,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Invalid axes value for font \`Inter\`, expected an array of axes. @@ -329,6 +341,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot(` "Invalid axes value \`INVALID\` for font \`Roboto Flex\`. @@ -346,6 +359,7 @@ describe('@next/font/google loader', () => { resolve: jest.fn(), fs: {} as any, isServer: true, + variableName: 'myFont', }) ).rejects.toThrowErrorMatchingInlineSnapshot( `"Unexpected \`variable\` in weight array for font \`Inter\`. You only need \`variable\`, it includes all available weights."` diff --git a/test/unit/local-font-loader.test.ts b/test/unit/local-font-loader.test.ts index 808da6c3a7254b4..3a1b38a1cda0c99 100644 --- a/test/unit/local-font-loader.test.ts +++ b/test/unit/local-font-loader.test.ts @@ -10,6 +10,7 @@ describe('@next/font/local', () => { emitFontFile: () => '/_next/static/media/my-font.woff2', resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (_, cb) => cb(null, 'fontdata'), }, @@ -17,7 +18,7 @@ describe('@next/font/local', () => { expect(css).toMatchInlineSnapshot(` "@font-face { - font-family: 'my-font'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; } @@ -33,6 +34,7 @@ describe('@next/font/local', () => { emitFontFile: () => '/_next/static/media/my-font.woff2', resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (_, cb) => cb(null, 'fontdata'), }, @@ -40,7 +42,7 @@ describe('@next/font/local', () => { expect(css).toMatchInlineSnapshot(` "@font-face { - font-family: 'my-font'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 100 900; @@ -66,6 +68,7 @@ describe('@next/font/local', () => { emitFontFile: () => '/_next/static/media/my-font.woff2', resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (_, cb) => cb(null, 'fontdata'), }, @@ -75,7 +78,7 @@ describe('@next/font/local', () => { "@font-face { font-feature-settings: \\"smcp\\" on; ascent-override: 90%; - font-family: 'my-font'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; } @@ -115,6 +118,7 @@ describe('@next/font/local', () => { emitFontFile: (buffer) => `/_next/static/media/my-font.woff2`, resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (path, cb) => cb(null, path), }, @@ -122,7 +126,7 @@ describe('@next/font/local', () => { expect(css).toMatchInlineSnapshot(` "@font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 100; @@ -130,7 +134,7 @@ describe('@next/font/local', () => { } @font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 400; @@ -138,7 +142,7 @@ describe('@next/font/local', () => { } @font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 700; @@ -146,7 +150,7 @@ describe('@next/font/local', () => { } @font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 400; @@ -183,6 +187,7 @@ describe('@next/font/local', () => { emitFontFile: (buffer) => `/_next/static/media/my-font.woff2`, resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (path, cb) => cb(null, path), }, @@ -190,7 +195,7 @@ describe('@next/font/local', () => { expect(css).toMatchInlineSnapshot(` "@font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 400; @@ -198,7 +203,7 @@ describe('@next/font/local', () => { } @font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 400; @@ -206,7 +211,7 @@ describe('@next/font/local', () => { } @font-face { - font-family: 'font1'; + font-family: myFont; src: url(/_next/static/media/my-font.woff2) format('woff2'); font-display: optional; font-weight: 700; @@ -226,6 +231,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: {}, }) ).rejects.toThrowErrorMatchingInlineSnapshot( @@ -242,6 +248,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: {}, }) ).rejects.toThrowErrorMatchingInlineSnapshot( @@ -258,6 +265,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn().mockResolvedValue(''), isServer: true, + variableName: 'myFont', fs: {}, }) ).rejects.toThrowErrorMatchingInlineSnapshot( @@ -274,6 +282,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: {}, }) ).rejects.toThrowErrorMatchingInlineSnapshot(` @@ -297,6 +306,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: {}, }) ).rejects.toThrowErrorMatchingInlineSnapshot( @@ -313,6 +323,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: {}, }) ).rejects.toThrowErrorMatchingInlineSnapshot( @@ -339,6 +350,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (path, cb) => cb(null, path) }, }) ).rejects.toThrowErrorMatchingInlineSnapshot(` @@ -366,6 +378,7 @@ describe('@next/font/local', () => { emitFontFile: jest.fn(), resolve: jest.fn(), isServer: true, + variableName: 'myFont', fs: { readFile: (path, cb) => cb(null, path) }, }) ).rejects.toThrowErrorMatchingInlineSnapshot(`