diff --git a/code/frameworks/nextjs/src/css/webpack.ts b/code/frameworks/nextjs/src/css/webpack.ts index 75718527e7dd..a2723529e2fd 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/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); }