diff --git a/code/frameworks/nextjs/src/css/webpack.ts b/code/frameworks/nextjs/src/css/webpack.ts index 75718527e7dd..f6c7d7838f0a 100644 --- a/code/frameworks/nextjs/src/css/webpack.ts +++ b/code/frameworks/nextjs/src/css/webpack.ts @@ -36,7 +36,7 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig): ], // We transform the "target.css" files from next.js into Javascript // for Next.js to support fonts, so it should be ignored by the css-loader. - exclude: /next\/.*\/target.css$/, + exclude: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/, }; } }); diff --git a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts index b1e3851611d6..bd3f1640ff36 100644 --- a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts +++ b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts @@ -7,7 +7,7 @@ export function configureNextFont(baseConfig: Configuration, isSWC?: boolean) { if (isSWC) { baseConfig.module?.rules?.push({ - test: /next\/.*\/target.css$/, + test: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/, loader: fontLoaderPath, }); } else { 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 f3f35c2fc065..e980d15b0e3d 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 @@ -39,13 +39,9 @@ export async function getFontFaceDeclarations( .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; - const getFontFaceCSS = () => { if (typeof localFontSrc === 'string') { - const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc)); + const localFontPath = path.join(parentFolder, localFontSrc).replaceAll('\\', '/'); return `@font-face { font-family: ${id}; @@ -55,7 +51,7 @@ export async function getFontFaceDeclarations( } return localFontSrc .map((font) => { - const localFontPath = cleanWin32Path(path.join(parentFolder, font.path)); + const localFontPath = path.join(parentFolder, font.path).replaceAll('\\', '/'); return `@font-face { font-family: ${id}; 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 2110701aae61..055d934f57a4 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 @@ -3,6 +3,7 @@ import { getFontFaceDeclarations as getLocalFontFaceDeclarations } from './local import type { LoaderOptions } from './types'; import { getCSSMeta } from './utils/get-css-meta'; import { setFontDeclarationsInHead } from './utils/set-font-declarations-in-head'; +import path from 'path'; type FontFaceDeclaration = { id: string; @@ -39,11 +40,19 @@ export default async function storybookNextjsFontLoader(this: any) { let fontFaceDeclaration: FontFaceDeclaration | undefined; - if (options.source.endsWith('next/font/google') || options.source.endsWith('@next/font/google')) { + const pathSep = path.sep; + + if ( + options.source.endsWith(`next${pathSep}font${pathSep}google`) || + options.source.endsWith(`@next${pathSep}font${pathSep}google`) + ) { fontFaceDeclaration = await getGoogleFontFaceDeclarations(options); } - if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) { + if ( + options.source.endsWith(`next${pathSep}font${pathSep}local`) || + options.source.endsWith(`@next${pathSep}font${pathSep}local`) + ) { fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx, swcMode); }