update-fonts.ts — ui Source File

Source Code

import { existsSync, promises as fs } from "fs"
import path from "path"
import { RegistryFontItem, registryResolvedItemsTreeSchema } from "@/src/schema"
import { Config } from "@/src/utils/get-config"
import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
import { highlighter } from "@/src/utils/highlighter"
import { spinner } from "@/src/utils/spinner"
import {
  CallExpression,
  Project,
  ScriptKind,
  SyntaxKind,
  VariableDeclarationKind,
} from "ts-morph"
import z from "zod"

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

// ... (466 more lines)