From 090556691cb7e20204c06b523b91785894ee759e Mon Sep 17 00:00:00 2001 From: shadcn Date: Sat, 14 Mar 2026 15:33:15 +0400 Subject: [PATCH 1/3] Revert "fix: added fountsource, @support ovveride when registry:font install, monorepo init" This reverts commit ad99fc9a73424712426ff0c9e550f4ae51a0224f. --- 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, 9 insertions(+), 170 deletions(-) diff --git a/packages/shadcn/src/templates/monorepo.ts b/packages/shadcn/src/templates/monorepo.ts index ca3dc60517..48c27b04ff 100644 --- a/packages/shadcn/src/templates/monorepo.ts +++ b/packages/shadcn/src/templates/monorepo.ts @@ -98,23 +98,22 @@ export async function fontsourceMonorepoInit(options: TemplateInitOptions) { ) if (tree?.fonts?.length) { const [fontSans] = tree.fonts + // Add fontsource dependency. const fontName = fontSans.name.replace("font-", "") - const fontSourceBase = `@fontsource/${fontName}` - const fontSourceVariable = `@fontsource-variable/${fontName}` + const fontSourceDependency = `@fontsource-variable/${fontName}` await updateDependencies( - [fontSourceBase, fontSourceVariable], + [fontSourceDependency], [], 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]: baseFamily, + [fontSans.font.variable]: fontSans.font.family, }, }, resolvedPackagesUiConfig, @@ -128,13 +127,7 @@ export async function fontsourceMonorepoInit(options: TemplateInitOptions) { // Add fontsource import to packages/ui CSS. await updateCss( { - [`@import "${fontSourceBase}"`]: {}, - [`@import "${fontSourceVariable}"`]: {}, - "@supports (font-variation-settings: normal)": { - ":root": { - [fontSans.font.variable]: fontSans.font.family, - }, - }, + [`@import "${fontSourceDependency}"`]: {}, }, resolvedPackagesUiConfig, { diff --git a/packages/shadcn/src/utils/updaters/update-fonts.test.ts b/packages/shadcn/src/utils/updaters/update-fonts.test.ts index 0890efae96..98a6f59c74 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.test.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.test.ts @@ -1401,145 +1401,4 @@ 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 5d96f09fdb..e29480e83a 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.ts @@ -44,25 +44,12 @@ export async function massageTreeForFonts( } else { // Other frameworks will use fontsource for now. const fontName = font.name.replace("font-", "") - const fontSourceBase = `@fontsource/${fontName}` - const fontSourceVariable = `@fontsource-variable/${fontName}` - + const fontSourceDependency = `@fontsource-variable/${fontName}` tree.dependencies ??= [] - tree.dependencies.push(fontSourceBase) - tree.dependencies.push(fontSourceVariable) - + tree.dependencies.push(fontSourceDependency) tree.css ??= {} - 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 + tree.css[`@import "${fontSourceDependency}"`] = {} + tree.cssVars.theme[font.font.variable] = font.font.family } } From 1dc39e24844616413a3d89405f7526d1760d2fd4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sat, 14 Mar 2026 15:34:33 +0400 Subject: [PATCH 2/3] Add dependency field to font schema for explicit fontsource package control. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/v4/registry/fonts.ts | 17 ++++++ packages/shadcn/src/registry/schema.ts | 1 + packages/shadcn/src/templates/monorepo.ts | 3 +- .../src/utils/updaters/update-fonts.test.ts | 53 +++++++++++++++++++ .../shadcn/src/utils/updaters/update-fonts.ts | 3 +- 5 files changed, 75 insertions(+), 2 deletions(-) diff --git a/apps/v4/registry/fonts.ts b/apps/v4/registry/fonts.ts index 139d09079b..431d2570b8 100644 --- a/apps/v4/registry/fonts.ts +++ b/apps/v4/registry/fonts.ts @@ -11,6 +11,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Geist", + dependency: "@fontsource-variable/geist", }, }, { @@ -23,6 +24,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Inter", + dependency: "@fontsource-variable/inter", }, }, { @@ -34,6 +36,7 @@ export const fonts = [ provider: "google", variable: "--font-sans", import: "Noto_Sans", + dependency: "@fontsource-variable/noto-sans", }, }, { @@ -45,6 +48,7 @@ export const fonts = [ provider: "google", variable: "--font-sans", import: "Nunito_Sans", + dependency: "@fontsource-variable/nunito-sans", }, }, { @@ -57,6 +61,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Figtree", + dependency: "@fontsource-variable/figtree", }, }, { @@ -69,6 +74,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Roboto", + dependency: "@fontsource-variable/roboto", }, }, { @@ -81,6 +87,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Raleway", + dependency: "@fontsource-variable/raleway", }, }, { @@ -93,6 +100,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "DM_Sans", + dependency: "@fontsource-variable/dm-sans", }, }, { @@ -105,6 +113,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Public_Sans", + dependency: "@fontsource-variable/public-sans", }, }, { @@ -117,6 +126,7 @@ export const fonts = [ variable: "--font-sans", subsets: ["latin"], import: "Outfit", + dependency: "@fontsource-variable/outfit", }, }, { @@ -129,6 +139,7 @@ export const fonts = [ variable: "--font-mono", subsets: ["latin"], import: "JetBrains_Mono", + dependency: "@fontsource-variable/jetbrains-mono", }, }, { @@ -141,6 +152,7 @@ export const fonts = [ variable: "--font-mono", subsets: ["latin"], import: "Geist_Mono", + dependency: "@fontsource-variable/geist-mono", }, }, { @@ -153,6 +165,7 @@ export const fonts = [ variable: "--font-serif", subsets: ["latin"], import: "Noto_Serif", + dependency: "@fontsource-variable/noto-serif", }, }, { @@ -165,6 +178,7 @@ export const fonts = [ variable: "--font-serif", subsets: ["latin"], import: "Roboto_Slab", + dependency: "@fontsource-variable/roboto-slab", }, }, { @@ -177,6 +191,7 @@ export const fonts = [ variable: "--font-serif", subsets: ["latin"], import: "Merriweather", + dependency: "@fontsource-variable/merriweather", }, }, { @@ -189,6 +204,7 @@ export const fonts = [ variable: "--font-serif", subsets: ["latin"], import: "Lora", + dependency: "@fontsource-variable/lora", }, }, { @@ -201,6 +217,7 @@ export const fonts = [ variable: "--font-serif", subsets: ["latin"], import: "Playfair_Display", + dependency: "@fontsource-variable/playfair-display", }, }, ] satisfies RegistryItem[] diff --git a/packages/shadcn/src/registry/schema.ts b/packages/shadcn/src/registry/schema.ts index 7501eb2cdf..9bab2e84fe 100644 --- a/packages/shadcn/src/registry/schema.ts +++ b/packages/shadcn/src/registry/schema.ts @@ -151,6 +151,7 @@ export const registryItemFontSchema = z.object({ weight: z.array(z.string()).optional(), subsets: z.array(z.string()).optional(), selector: z.string().optional(), + dependency: z.string().optional(), }) // Common fields shared by all registry items. diff --git a/packages/shadcn/src/templates/monorepo.ts b/packages/shadcn/src/templates/monorepo.ts index 48c27b04ff..5168ff9ff7 100644 --- a/packages/shadcn/src/templates/monorepo.ts +++ b/packages/shadcn/src/templates/monorepo.ts @@ -101,7 +101,8 @@ export async function fontsourceMonorepoInit(options: TemplateInitOptions) { // Add fontsource dependency. const fontName = fontSans.name.replace("font-", "") - const fontSourceDependency = `@fontsource-variable/${fontName}` + const fontSourceDependency = + fontSans.font.dependency ?? `@fontsource-variable/${fontName}` await updateDependencies( [fontSourceDependency], [], diff --git a/packages/shadcn/src/utils/updaters/update-fonts.test.ts b/packages/shadcn/src/utils/updaters/update-fonts.test.ts index 98a6f59c74..f75e593906 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.test.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.test.ts @@ -1401,4 +1401,57 @@ describe("massageTreeForFonts", () => { "@apply font-heading": {}, }) }) + + it("should use font.dependency when specified", async () => { + const tree = { + fonts: [ + { + name: "font-lato", + type: "registry:font" as const, + font: { + family: "'Lato', sans-serif", + provider: "google" as const, + import: "Lato", + variable: "--font-sans", + weight: ["400", "700"], + dependency: "@fontsource/lato", + }, + }, + ], + } as any + + const result = await massageTreeForFonts(tree, { + resolvedPaths: { cwd: "/test" }, + } as any) + + expect(result.dependencies).toContain("@fontsource/lato") + expect(result.dependencies).not.toContain("@fontsource-variable/lato") + expect(result.css).toHaveProperty('@import "@fontsource/lato"') + expect(result.cssVars!.theme!["--font-sans"]).toBe("'Lato', sans-serif") + }) + + it("should fall back to @fontsource-variable when no dependency is specified", 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-variable/inter") + expect(result.css).toHaveProperty('@import "@fontsource-variable/inter"') + }) }) diff --git a/packages/shadcn/src/utils/updaters/update-fonts.ts b/packages/shadcn/src/utils/updaters/update-fonts.ts index e29480e83a..a4e3bd06fd 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.ts @@ -44,7 +44,8 @@ export async function massageTreeForFonts( } else { // Other frameworks will use fontsource for now. const fontName = font.name.replace("font-", "") - const fontSourceDependency = `@fontsource-variable/${fontName}` + const fontSourceDependency = + font.font.dependency ?? `@fontsource-variable/${fontName}` tree.dependencies ??= [] tree.dependencies.push(fontSourceDependency) tree.css ??= {} From 725ca574f65ec4f0a92f1bfed4bb6c6989f6f691 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sat, 14 Mar 2026 15:37:06 +0400 Subject: [PATCH 3/3] Rename test to clarify non-variable font coverage. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/shadcn/src/utils/updaters/update-fonts.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shadcn/src/utils/updaters/update-fonts.test.ts b/packages/shadcn/src/utils/updaters/update-fonts.test.ts index f75e593906..fd96686503 100644 --- a/packages/shadcn/src/utils/updaters/update-fonts.test.ts +++ b/packages/shadcn/src/utils/updaters/update-fonts.test.ts @@ -1402,7 +1402,7 @@ describe("massageTreeForFonts", () => { }) }) - it("should use font.dependency when specified", async () => { + it("should install non-variable font using dependency field", async () => { const tree = { fonts: [ {