From 6e96b10c5d18cceba7752bee4f8a3b43d4bf9f80 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 1 Apr 2024 17:18:25 +0200
Subject: [PATCH] Merge pull request #26700 from
 storybookjs/valentin/fix-next-font-on-windows

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

(cherry picked from commit b50c2416ee693148c8fc1ecac085aa4956736645)
---
 code/frameworks/nextjs/src/css/webpack.ts           |  2 +-
 .../nextjs/src/font/webpack/configureNextFont.ts    |  2 +-
 .../loader/local/get-font-face-declarations.ts      |  8 ++------
 .../webpack/loader/storybook-nextjs-font-loader.ts  | 13 +++++++++++--
 4 files changed, 15 insertions(+), 10 deletions(-)

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);
   }