From 1222fb390127a4d8596ba3f2c28a7c793ad266be Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Fri, 23 Oct 2026 19:12:04 +0200
Subject: [PATCH] fix(studio): import Big Shoulders Display by its export name,
 which takes no .css

---
 client/src/components/Studio/bookFontFaces.ts | 22 +++++++++++--------
 .../tests/unit/studio/bookFontFaces.test.ts   |  4 ++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Studio/bookFontFaces.ts b/client/src/components/Studio/bookFontFaces.ts
index e01f0c189..cb61022aa 100644
--- a/client/src/components/Studio/bookFontFaces.ts
+++ b/client/src/components/Studio/bookFontFaces.ts
@@ -23,6 +23,10 @@
  * Real italics for the serifs, where the browser's slant reads as a mistake;
  * the sans faces keep the synthetic oblique they always had, which saves a
  * second file per weight nobody would tell apart.
+ *
+ * Big Shoulders Display is imported without `.css`: its package maps `./*` to
+ * `./*.css` and has no `./*.css` entry of its own, so `100.css` would resolve
+ * to `100.css.css` and fail the build.
  */
 import '@fontsource/poppins/100.css'
 import '@fontsource/poppins/200.css'
@@ -141,15 +145,15 @@ import '@fontsource/oswald/700.css'
 
 import '@fontsource/league-gothic/400.css'
 
-import '@fontsource/big-shoulders-display/100.css'
-import '@fontsource/big-shoulders-display/200.css'
-import '@fontsource/big-shoulders-display/300.css'
-import '@fontsource/big-shoulders-display/400.css'
-import '@fontsource/big-shoulders-display/500.css'
-import '@fontsource/big-shoulders-display/600.css'
-import '@fontsource/big-shoulders-display/700.css'
-import '@fontsource/big-shoulders-display/800.css'
-import '@fontsource/big-shoulders-display/900.css'
+import '@fontsource/big-shoulders-display/100'
+import '@fontsource/big-shoulders-display/200'
+import '@fontsource/big-shoulders-display/300'
+import '@fontsource/big-shoulders-display/400'
+import '@fontsource/big-shoulders-display/500'
+import '@fontsource/big-shoulders-display/600'
+import '@fontsource/big-shoulders-display/700'
+import '@fontsource/big-shoulders-display/800'
+import '@fontsource/big-shoulders-display/900'
 
 import '@fontsource/archivo-black/400.css'
 
diff --git a/client/tests/unit/studio/bookFontFaces.test.ts b/client/tests/unit/studio/bookFontFaces.test.ts
index 883956a8f..5111c548a 100644
--- a/client/tests/unit/studio/bookFontFaces.test.ts
+++ b/client/tests/unit/studio/bookFontFaces.test.ts
@@ -23,9 +23,9 @@ const STUDIO = 'src/components/Studio/bookFontFaces.ts'
 // Vitest runs with the client package as its root, so cwd is stable here.
 const read = (rel: string) => readFileSync(resolve(process.cwd(), rel), 'utf8')
 
-/** Every `@fontsource/<package>/<weight>[-italic].css` a file imports. */
+/** Every `@fontsource/<package>/<weight>[-italic][.css]` a file imports (see bookFontFaces.ts for the bare form). */
 function facesIn(rel: string): string[] {
-  return [...read(rel).matchAll(/@fontsource\/([a-z0-9-]+)\/(\d+(?:-italic)?)\.css/g)]
+  return [...read(rel).matchAll(/@fontsource\/([a-z0-9-]+)\/(\d+(?:-italic)?)(?:\.css)?'/g)]
     .map(m => `${m[1]}/${m[2]}`)
 }