updateHtmlClassName() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 4 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ updateHtmlClassName() — ui Function Reference

Dependency Diagram

graph TD
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973["updateHtmlClassName()"]
  b169f1bf_76c5_e7c9_f493_15fe0f296591["update-fonts.ts"]
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973 -->|defined in| b169f1bf_76c5_e7c9_f493_15fe0f296591
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a["transformLayoutFonts()"]
  fb488c27_d35b_ddbe_26c7_6bfb5c38105a -->|calls| 97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973
  9fb1fec8_3fb3_6827_21d6_834692552dea["ensureCnImport()"]
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973 -->|calls| 9fb1fec8_3fb3_6827_21d6_834692552dea
  96763b82_563e_5515_7de3_537d2d1d1e84["removeFontVariablesFromCn()"]
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973 -->|calls| 96763b82_563e_5515_7de3_537d2d1d1e84
  72afa979_2860_4314_2fdd_07eb0b3174a9["insertFontVariablesIntoCn()"]
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973 -->|calls| 72afa979_2860_4314_2fdd_07eb0b3174a9
  15f2fe89_6dc3_a459_ce8f_eacfbfed6026["parseTemplateLiteralToCnArgs()"]
  97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973 -->|calls| 15f2fe89_6dc3_a459_ce8f_eacfbfed6026
  style 97bdf019_6ec8_1cbd_1fbb_ed4acd2cc973 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-fonts.ts lines 336–450

function updateHtmlClassName(
  sourceFile: ReturnType<Project["createSourceFile"]>,
  fontVariableNames: string[]
) {
  // Find the <html> JSX element.
  const jsxElements = sourceFile.getDescendantsOfKind(
    SyntaxKind.JsxOpeningElement
  )

  for (const element of jsxElements) {
    const tagName = element.getTagNameNode().getText()
    if (tagName !== "html") continue

    const classNameAttr = element.getAttribute("className")
    if (!classNameAttr) {
      // Add className attribute with font variables.
      const variableExpressions = fontVariableNames
        .map((name) => `${name}.variable`)
        .join(", ")

      if (fontVariableNames.length === 1) {
        element.addAttribute({
          name: "className",
          initializer: `{${variableExpressions}}`,
        })
      } else {
        // Need to use cn() for multiple fonts.
        ensureCnImport(sourceFile)
        element.addAttribute({
          name: "className",
          initializer: `{cn(${variableExpressions})}`,
        })
      }
      return
    }

    // Handle existing className.
    if (classNameAttr.getKind() !== SyntaxKind.JsxAttribute) {
      return
    }

    const jsxAttr = classNameAttr.asKindOrThrow(SyntaxKind.JsxAttribute)
    const initializer = jsxAttr.getInitializer()

    if (!initializer) return

    // Build the new variable expressions.
    const newVarExpressions = fontVariableNames.map(
      (name) => `${name}.variable`
    )

    if (initializer.getKind() === SyntaxKind.StringLiteral) {
      // className="some-class" -> className={cn("some-class", font.variable)}
      const currentValue = initializer.getText().slice(1, -1) // Remove quotes.
      ensureCnImport(sourceFile)
      jsxAttr.setInitializer(
        `{cn("${currentValue}", ${newVarExpressions.join(", ")})}`
      )
    } else if (initializer.getKind() === SyntaxKind.JsxExpression) {
      // className={...} - need to analyze the expression.
      const jsxExpr = initializer.asKindOrThrow(SyntaxKind.JsxExpression)
      const expr = jsxExpr.getExpression()
      if (!expr) return

      const exprText = expr.getText()

      // Check if it's already using cn().
      if (exprText.startsWith("cn(")) {
        // Check if cn() already has exactly our font variables.
        const hasAllFontVars = newVarExpressions.every((v) =>
          exprText.includes(v)
        )
        if (hasAllFontVars) {
          // Already has our font variables, skip.
          continue
        }

        // Remove existing font variables and add new ones.
        const cleanedExpr = removeFontVariablesFromCn(exprText)
        const newExpr = insertFontVariablesIntoCn(
          cleanedExpr,