Skip to content

Commit

Permalink
Merge pull request #26700 from storybookjs/valentin/fix-next-font-on-…
Browse files Browse the repository at this point in the history
…windows

Next.js: Fix next/font usage on Windows machines

(cherry picked from commit b50c241)
  • Loading branch information
valentinpalkovic authored and storybook-bot committed Apr 5, 2024
1 parent 6af31bf commit 31d5e2c
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 10 deletions.
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/css/webpack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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$/,
};
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}

Expand Down

0 comments on commit 31d5e2c

Please sign in to comment.