From ad99fc9a73424712426ff0c9e550f4ae51a0224f Mon Sep 17 00:00:00 2001 From: kapishdima Date: Mon, 9 Mar 2026 12:39:36 +0200 Subject: [PATCH] fix: added fountsource, @support ovveride when registry:font install, monorepo init --- packages/shadcn/src/templates/monorepo.ts | 17 ++- .../src/utils/updaters/update-fonts.test.ts | 141 ++++++++++++++++++ .../shadcn/src/utils/updaters/update-fonts.ts | 21 ++- 3 files changed, 170 insertions(+), 9 deletions(-) diff --git a/packages/shadcn/src/templates/monorepo.ts b/packages/shadcn/src/templates/monorepo.ts index eb7047b66..356b78786 100644 --- a/packages/shadcn/src/templates/monorepo.ts +++ b/packages/shadcn/src/templates/monorepo.ts @@ -80,22 +80,23 @@ export async function fontsourceMonorepoInit(options: TemplateInitOptions) { ) if (tree?.fonts?.length) { const [fontSans] = tree.fonts - // Add fontsource dependency. const fontName = fontSans.name.replace("font-", "") - const fontSourceDependency = `@fontsource-variable/${fontName}` + const fontSourceBase = `@fontsource/${fontName}` + const fontSourceVariable = `@fontsource-variable/${fontName}` await updateDependencies( - [fontSourceDependency], + [fontSourceBase, fontSourceVariable], [], resolvedPackagesUiConfig, { silent: true } ) // Add font CSS variable to @theme inline in packages/ui CSS. + const baseFamily = fontSans.font.family.replace(" Variable", "") await updateCssVars( { theme: { - [fontSans.font.variable]: fontSans.font.family, + [fontSans.font.variable]: baseFamily, }, }, resolvedPackagesUiConfig, @@ -109,7 +110,13 @@ export async function fontsourceMonorepoInit(options: TemplateInitOptions) { // Add fontsource import to packages/ui CSS. await updateCss( { - [`@import "${fontSourceDependency}"`]: {}, + [`@import "${fontSourceBase}"`]: {}, + [`@import "${fontSourceVariable}"`]: {}, + "@supports (font-variation-settings: normal)": { + ":root": { + [fontSans.font.variable]: fontSans.font.family, + }, + }, }, resolvedPackagesUiConfig, { diff --git a/packages/shadcn/src/utils/updaters/update-fonts.test.ts b/packages/shadcn/src/utils/updaters/update-fonts.test.ts index 98a6f59c7..0890efae9 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.test.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.test.ts @@ -1401,4 +1401,145 @@ describe("massageTreeForFonts", () => { "@apply font-heading": {}, }) }) + + + it("should add both base and variable fontsource dependencies", async () => { + const tree = { + fonts: [ + { + name: "font-inter", + type: "registry:font" as const, + font: { + family: "'Inter Variable', sans-serif", + provider: "google" as const, + import: "Inter", + variable: "--font-sans", + subsets: ["latin"], + }, + }, + ], + } as any + + const result = await massageTreeForFonts(tree, { + resolvedPaths: { cwd: "/test" }, + } as any) + + expect(result.dependencies).toContain("@fontsource/inter") + expect(result.dependencies).toContain("@fontsource-variable/inter") + }) + + it("should add both CSS imports", async () => { + const tree = { + fonts: [ + { + name: "font-inter", + type: "registry:font" as const, + font: { + family: "'Inter Variable', sans-serif", + provider: "google" as const, + import: "Inter", + variable: "--font-sans", + subsets: ["latin"], + }, + }, + ], + } as any + + const result = await massageTreeForFonts(tree, { + resolvedPaths: { cwd: "/test" }, + } as any) + + expect(result.css).toHaveProperty('@import "@fontsource/inter"') + expect(result.css).toHaveProperty('@import "@fontsource-variable/inter"') + }) + + it("should set base font family without Variable suffix in cssVars", async () => { + const tree = { + fonts: [ + { + name: "font-inter", + type: "registry:font" as const, + font: { + family: "'Inter Variable', sans-serif", + provider: "google" as const, + import: "Inter", + variable: "--font-sans", + subsets: ["latin"], + }, + }, + ], + } as any + + const result = await massageTreeForFonts(tree, { + resolvedPaths: { cwd: "/test" }, + } as any) + + expect(result.cssVars!.theme!["--font-sans"]).toBe("'Inter', sans-serif") + }) + + it("should add @supports block with variable font override", async () => { + const tree = { + fonts: [ + { + name: "font-inter", + type: "registry:font" as const, + font: { + family: "'Inter Variable', sans-serif", + provider: "google" as const, + import: "Inter", + variable: "--font-sans", + subsets: ["latin"], + }, + }, + ], + } as any + + const result = await massageTreeForFonts(tree, { + resolvedPaths: { cwd: "/test" }, + } as any) + + expect( + result.css!["@supports (font-variation-settings: normal)"][":root"][ + "--font-sans" + ] + ).toBe("'Inter Variable', sans-serif") + }) + + it("should accumulate multiple fonts in @supports block", async () => { + const tree = { + fonts: [ + { + name: "font-inter", + type: "registry:font" as const, + font: { + family: "'Inter Variable', sans-serif", + provider: "google" as const, + import: "Inter", + variable: "--font-sans", + subsets: ["latin"], + }, + }, + { + name: "font-lora", + type: "registry:font" as const, + font: { + family: "'Lora Variable', serif", + provider: "google" as const, + import: "Lora", + variable: "--font-serif", + subsets: ["latin"], + }, + }, + ], + } as any + + const result = await massageTreeForFonts(tree, { + resolvedPaths: { cwd: "/test" }, + } as any) + + const supportsRoot = + result.css!["@supports (font-variation-settings: normal)"][":root"] + expect(supportsRoot["--font-sans"]).toBe("'Inter Variable', sans-serif") + expect(supportsRoot["--font-serif"]).toBe("'Lora Variable', serif") + }) }) diff --git a/packages/shadcn/src/utils/updaters/update-fonts.ts b/packages/shadcn/src/utils/updaters/update-fonts.ts index e29480e83..5d96f09fd 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.ts @@ -44,12 +44,25 @@ export async function massageTreeForFonts( } else { // Other frameworks will use fontsource for now. const fontName = font.name.replace("font-", "") - const fontSourceDependency = `@fontsource-variable/${fontName}` + const fontSourceBase = `@fontsource/${fontName}` + const fontSourceVariable = `@fontsource-variable/${fontName}` + tree.dependencies ??= [] - tree.dependencies.push(fontSourceDependency) + tree.dependencies.push(fontSourceBase) + tree.dependencies.push(fontSourceVariable) + tree.css ??= {} - tree.css[`@import "${fontSourceDependency}"`] = {} - tree.cssVars.theme[font.font.variable] = font.font.family + tree.css[`@import "${fontSourceBase}"`] = {} + tree.css[`@import "${fontSourceVariable}"`] = {} + + const baseFamily = font.font.family.replace(" Variable", "") + tree.cssVars.theme[font.font.variable] = baseFamily + + tree.css["@supports (font-variation-settings: normal)"] ??= {} + tree.css["@supports (font-variation-settings: normal)"][":root"] ??= {} + tree.css["@supports (font-variation-settings: normal)"][":root"][ + font.font.variable + ] = font.font.family } }