From cc9ccee0575557602b11c52158fa6ec4e6c0a6a2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 29 Nov 2023 20:44:56 +0100 Subject: [PATCH] Next.js: Fix next/font/local usage in babel mode --- .../loader/local/get-font-face-declarations.ts | 12 ++++++++---- .../webpack/loader/storybook-nextjs-font-loader.ts | 4 +++- 2 files changed, 11 insertions(+), 5 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 d7d26ae55a37..b37e1b5f5a45 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 @@ -8,13 +8,17 @@ import type { LoaderOptions } from '../types'; type LocalFontSrc = string | Array<{ path: string; weight?: string; style?: string }>; -export async function getFontFaceDeclarations(options: LoaderOptions, rootContext: string) { +export async function getFontFaceDeclarations( + options: LoaderOptions, + rootContext: string, + swcMode: boolean +) { const localFontSrc = options.props.src as LocalFontSrc; // Parent folder relative to the root context - const parentFolder = path - .dirname(path.join(getProjectRoot(), options.filename)) - .replace(rootContext, ''); + const parentFolder = swcMode + ? path.dirname(path.join(getProjectRoot(), options.filename)).replace(rootContext, '') + : path.dirname(options.filename).replace(rootContext, ''); const { validateData } = require('../utils/local-font-utils'); const { weight, style, variable } = validateData('', options.props); diff --git a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts index 8b7c08894f72..2110701aae61 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts @@ -15,6 +15,7 @@ type FontFaceDeclaration = { export default async function storybookNextjsFontLoader(this: any) { const loaderOptions = this.getOptions() as LoaderOptions; + let swcMode = false; let options; if (Object.keys(loaderOptions).length > 0) { @@ -23,6 +24,7 @@ export default async function storybookNextjsFontLoader(this: any) { } else { // handles SWC mode const importQuery = JSON.parse(this.resourceQuery.slice(1)); + swcMode = true; options = { filename: importQuery.path, @@ -42,7 +44,7 @@ export default async function storybookNextjsFontLoader(this: any) { } if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) { - fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx); + fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx, swcMode); } if (typeof fontFaceDeclaration !== 'undefined') {