massageTreeForFonts() — ui Function Reference

Architecture documentation for the massageTreeForFonts() function in update-fonts.ts from the ui codebase.

Function typescript FrameworkTooling CLICore

Entity Profile

FrameworkTooling→ CLICore→ massageTreeForFonts() — ui Function Reference

Dependency Diagram

graph TD
  43ebef94_39ab_d49f_9a37_4fb9002a9d1f["massageTreeForFonts()"]
  b169f1bf_76c5_e7c9_f493_15fe0f296591["update-fonts.ts"]
  43ebef94_39ab_d49f_9a37_4fb9002a9d1f -->|defined in| b169f1bf_76c5_e7c9_f493_15fe0f296591
  style 43ebef94_39ab_d49f_9a37_4fb9002a9d1f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-fonts.ts lines 17–76

export async function massageTreeForFonts(
  tree: z.infer<typeof registryResolvedItemsTreeSchema>,
  config: Config
) {
  if (!tree.fonts?.length) {
    return tree
  }

  const projectInfo = await getProjectInfo(config.resolvedPaths.cwd)

  if (!projectInfo) {
    return tree
  }

  const [fontSans] = tree.fonts
  tree.cssVars ??= {}
  tree.cssVars.theme ??= {}

  if (
    projectInfo.framework.name === "next-app" ||
    projectInfo.framework.name === "next-pages"
  ) {
    tree.cssVars.theme[
      fontSans.font.variable
    ] = `var(${fontSans.font.variable})`
    return tree
  }

  // Other frameworks will use fontsource for now.
  const fontName = fontSans.name.replace("font-", "")
  const fontSourceDependency = `@fontsource-variable/${fontName}`
  tree.dependencies ??= []
  tree.dependencies.push(fontSourceDependency)
  tree.css ??= {}
  tree.css[`@import "${fontSourceDependency}"`] = {}
  tree.css["@layer base"] ??= {}
  tree.css["@layer base"].html = {
    "@apply font-sans": {},
  }
  tree.css["@layer base"].body = {
    "@apply font-sans bg-background text-foreground": {},
  }
  tree.cssVars.theme[fontSans.font.variable] = fontSans.font.family

  //   tree.docs += `## Fonts
  // The ${highlighter.info(
  //     fontSans.title ?? ""
  //   )} font has been added to your project.

  // If you have existing font-family declarations, you may need to update them to use the new ${highlighter.info(
  //     fontSans.font.variable
  //   )} variable.

  // @theme inline {
  //   ${fontSans.font.variable}: ${fontSans.font.family};
  // }
  //   `

  return tree
}