transformLayoutFonts() — ui Function Reference

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

Function typescript FrameworkTooling CLICore calls 5 called by 1

Entity Profile

FrameworkTooling→ CLICore→ transformLayoutFonts() — ui Function Reference

Dependency Diagram

graph TD
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a["transformLayoutFonts()"]
  b169f1bf_76c5_e7c9_f493_15fe0f296591["update-fonts.ts"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|defined in| b169f1bf_76c5_e7c9_f493_15fe0f296591
  fef00f60_5066_884e_a811_e67807ebd0a0["updateNextFonts()"]
  fef00f60_5066_884e_a811_e67807ebd0a0 -->|calls| fb488c27_d35b_ddbe_26c7_6bfb5c38105a
  be054352_c049_f7d2_3c1b_6c75369c3aa8["toCamelCase()"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|calls| be054352_c049_f7d2_3c1b_6c75369c3aa8
  dd2b376b_da61_b89f_188a_4979b45c5421["buildFontOptions()"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|calls| dd2b376b_da61_b89f_188a_4979b45c5421
  9ba1007e_24de_419b_d022_c5f5ead52043["findFontVariableDeclaration()"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|calls| 9ba1007e_24de_419b_d022_c5f5ead52043
  dd0001b7_bb18_76c0_e7a0_4c48db4930b3["findInsertPosition()"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|calls| dd0001b7_bb18_76c0_e7a0_4c48db4930b3
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973["updateHtmlClassName()"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|calls| 97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973
  style fb488c27_d35b_ddbe_26c7_6bfb5c38105a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-fonts.ts lines 162–261

export async function transformLayoutFonts(
  input: string,
  fonts: RegistryFontItem[],
  _config: Config
) {
  const project = new Project({
    compilerOptions: {},
  })

  const sourceFile = project.createSourceFile("layout.tsx", input, {
    scriptKind: ScriptKind.TSX,
  })

  // Only process Google fonts for now.
  const googleFonts = fonts.filter((f) => f.font.provider === "google")

  // Track which font variables we're adding.
  const fontVariableNames: string[] = []

  // Process Google fonts.
  for (const font of googleFonts) {
    const importName = font.font.import
    if (!importName) {
      continue
    }

    // Check if import already exists.
    const existingImport = sourceFile.getImportDeclaration((decl) => {
      const moduleSpecifier = decl.getModuleSpecifierValue()
      return moduleSpecifier === "next/font/google"
    })

    if (existingImport) {
      // Check if this specific font is already imported.
      const namedImports = existingImport.getNamedImports()
      const hasImport = namedImports.some((imp) => imp.getName() === importName)

      if (hasImport) {
        // Font is already imported - skip this font entirely.
        // Assume the user already has it set up correctly.
        continue
      }

      existingImport.addNamedImport(importName)
    } else {
      // Add new import.
      sourceFile.addImportDeclaration({
        moduleSpecifier: "next/font/google",
        namedImports: [importName],
      })
    }

    // Generate a variable name from the import (e.g., "Inter" -> "inter", "Geist_Mono" -> "geistMono").
    const varName = toCamelCase(importName)

    // Build font options.
    const fontOptions = buildFontOptions(font)

    // Check if variable declaration already exists with same variable CSS property.
    const existingVarDecl = findFontVariableDeclaration(
      sourceFile,
      font.font.variable
    )

    if (existingVarDecl) {
      // Replace the initializer of the existing declaration.
      existingVarDecl.setInitializer(`${importName}(${fontOptions})`)
      // Update the variable name if different.
      if (existingVarDecl.getName() !== varName) {
        existingVarDecl.rename(varName)
      }
    } else {
      // Find the last import or existing font declaration to insert after.
      const insertPosition = findInsertPosition(sourceFile)

      // Add variable declaration.
      const statement = sourceFile.insertVariableStatement(insertPosition, {
        declarationKind: VariableDeclarationKind.Const,
        declarations: [
          {
            name: varName,