From 146672c04f86a99312ee8cf9a04ed2153f5a08b6 Mon Sep 17 00:00:00 2001 From: Mauricio Robayo Date: Sat, 25 Nov 2023 15:00:26 +0000 Subject: [PATCH 1/6] add next-font-local-declarations-support --- .../font/webpack/loader/local/get-font-face-declarations.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index d7d26ae55a37..d42691116c88 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -26,6 +26,10 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex 6 )}`; + const declarations = (options.props.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; @@ -37,6 +41,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex return `@font-face { font-family: ${id}; src: url(.${localFontPath}); + ${declarations} }`; } return localFontSrc @@ -48,6 +53,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex src: url(.${localFontPath}); ${font.weight ? `font-weight: ${font.weight};` : ''} ${font.style ? `font-style: ${font.style};` : ''} + ${declarations} }`; }) .join(''); From 3958c6df959b3c617cc0bc657eb820858457b579 Mon Sep 17 00:00:00 2001 From: Mauricio Robayo Date: Sat, 25 Nov 2023 15:07:23 +0000 Subject: [PATCH 2/6] update docs --- code/frameworks/nextjs/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 2a834fb7ee4a..5770a6a328a4 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -1,4 +1,4 @@ -# Storybook for Next.js +****# Storybook for Next.js ## Table of Contents @@ -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. From 8c1ffcce15f5f41f3ddea117e9c4f2c30c866672 Mon Sep 17 00:00:00 2001 From: Mauricio Robayo Date: Sat, 25 Nov 2023 15:10:29 +0000 Subject: [PATCH 3/6] restore unwanted changes --- code/frameworks/nextjs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 5770a6a328a4..0324b8d81367 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -1,4 +1,4 @@ -****# Storybook for Next.js +# Storybook for Next.js ## Table of Contents From 279967cfbe0f58cf07ce266d712f44363a17b4de Mon Sep 17 00:00:00 2001 From: Mauricio Robayo Date: Sat, 25 Nov 2023 15:14:40 +0000 Subject: [PATCH 4/6] use validateData --- .../webpack/loader/local/get-font-face-declarations.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index d42691116c88..7edbbbadaf19 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -17,7 +17,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex .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)), @@ -26,7 +26,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex 6 )}`; - const declarations = (options.props.declarations || []) + const fontDeclarations = (declarations || []) .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`) .join('\n'); @@ -41,7 +41,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex return `@font-face { font-family: ${id}; src: url(.${localFontPath}); - ${declarations} + ${fontDeclarations} }`; } return localFontSrc @@ -53,7 +53,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex src: url(.${localFontPath}); ${font.weight ? `font-weight: ${font.weight};` : ''} ${font.style ? `font-style: ${font.style};` : ''} - ${declarations} + ${fontDeclarations} }`; }) .join(''); From d9b0f463b662ac0dd905e6f7d7f3a4110359a7d1 Mon Sep 17 00:00:00 2001 From: Mauricio Robayo Date: Sat, 25 Nov 2023 15:15:51 +0000 Subject: [PATCH 5/6] proper undefined check --- .../src/font/webpack/loader/local/get-font-face-declarations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index 7edbbbadaf19..97cf2b172a2a 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -26,7 +26,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex 6 )}`; - const fontDeclarations = (declarations || []) + const fontDeclarations = (declarations ?? []) .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`) .join('\n'); From 7e63c1d6863f16aa29d4706eae9555524297eab2 Mon Sep 17 00:00:00 2001 From: Mauricio Robayo Date: Sat, 25 Nov 2023 15:32:25 +0000 Subject: [PATCH 6/6] default value at destructuring --- .../font/webpack/loader/local/get-font-face-declarations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index 97cf2b172a2a..082b143b5366 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -17,7 +17,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex .replace(rootContext, ''); const { validateData } = require('../utils/local-font-utils'); - const { weight, style, variable, declarations } = validateData('', options.props); + const { weight, style, variable, declarations = [] } = validateData('', options.props); const id = `font-${loaderUtils.getHashDigest( Buffer.from(JSON.stringify(localFontSrc)), @@ -26,7 +26,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex 6 )}`; - const fontDeclarations = (declarations ?? []) + const fontDeclarations = declarations .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`) .join('\n');