Merge pull request #24983 from MauricioRobayo/next-font-local-declara…

…tions-support

Next.js: Add next/font/local declarations support

(cherry picked from commit 0327b57)

code/frameworks/nextjs/README.md

@@ -268,7 +268,6 @@ The following features are not supported (yet). Support for these features might
 - [Support font loaders configuration in next.config.js](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)
 - [fallback](https://nextjs.org/docs/api-reference/next/font#fallback) option
 - [adjustFontFallback](https://nextjs.org/docs/api-reference/next/font#adjustfontfallback) option
-- [declarations](https://nextjs.org/docs/api-reference/next/font#declarations) option
 - [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
 - [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
 

code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts

@@ -21,7 +21,7 @@ export async function getFontFaceDeclarations(
     : path.dirname(options.filename).replace(rootContext, '');
 
   const { validateData } = require('../utils/local-font-utils');
-  const { weight, style, variable } = validateData('', options.props);
+  const { weight, style, variable, declarations = [] } = validateData('', options.props);
 
   const id = `font-${loaderUtils.getHashDigest(
     Buffer.from(JSON.stringify(localFontSrc)),
@@ -30,6 +30,10 @@ export async function getFontFaceDeclarations(
     6
   )}`;
 
+  const fontDeclarations = declarations
+    .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`)
+    .join('\n');
+
   const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename);
   const cleanWin32Path = (pathString: string): string =>
     arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString;
@@ -41,6 +45,7 @@ export async function getFontFaceDeclarations(
       return `@font-face {
           font-family: ${id};
           src: url(.${localFontPath});
+          ${fontDeclarations}
       }`;
     }
     return localFontSrc
@@ -52,6 +57,7 @@ export async function getFontFaceDeclarations(
           src: url(.${localFontPath});
           ${font.weight ? `font-weight: ${font.weight};` : ''}
           ${font.style ? `font-style: ${font.style};` : ''}
+          ${fontDeclarations}
         }`;
       })
       .join('');