fix: added fountsource, @support ovveride when registry:font install, monorepo init

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,
       {

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")
+  })
 })

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