addTailwindConfigTheme() — ui Function Reference

Architecture documentation for the addTailwindConfigTheme() function in update-tailwind-config.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 3 called by 1

Entity Profile

FrameworkTooling→ CLICore→ addTailwindConfigTheme() — ui Function Reference

Dependency Diagram

graph TD
  c25108fa_c2e6_295b_b5ed_e67e55e05d20["addTailwindConfigTheme()"]
  ef3e192c_eced_bc46_1021_689faf6b7065["update-tailwind-config.ts"]
  c25108fa_c2e6_295b_b5ed_e67e55e05d20 -->|defined in| ef3e192c_eced_bc46_1021_689faf6b7065
  bcd6344c_3146_377d_9fd0_f68ae594bdfb["transformTailwindConfig()"]
  bcd6344c_3146_377d_9fd0_f68ae594bdfb -->|calls| c25108fa_c2e6_295b_b5ed_e67e55e05d20
  07fc0309_c10f_8b0d_c1ac_97cd8f9a1f5a["nestSpreadProperties()"]
  c25108fa_c2e6_295b_b5ed_e67e55e05d20 -->|calls| 07fc0309_c10f_8b0d_c1ac_97cd8f9a1f5a
  c5708093_d860_eaff_f0d3_0bcb8e1daa1e["parseObjectLiteral()"]
  c25108fa_c2e6_295b_b5ed_e67e55e05d20 -->|calls| c5708093_d860_eaff_f0d3_0bcb8e1daa1e
  d2e241ac_3cd3_c229_69bf_7b66b84a8b58["unnestSpreadProperties()"]
  c25108fa_c2e6_295b_b5ed_e67e55e05d20 -->|calls| d2e241ac_3cd3_c229_69bf_7b66b84a8b58
  style c25108fa_c2e6_295b_b5ed_e67e55e05d20 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-tailwind-config.ts lines 186–227

async function addTailwindConfigTheme(
  configObject: ObjectLiteralExpression,
  theme: UpdaterTailwindConfig["theme"]
) {
  // Ensure there is a theme property.
  if (!configObject.getProperty("theme")) {
    configObject.addPropertyAssignment({
      name: "theme",
      initializer: "{}",
    })
  }

  // Nest all spread properties.
  nestSpreadProperties(configObject)

  const themeProperty = configObject
    .getPropertyOrThrow("theme")
    ?.asKindOrThrow(SyntaxKind.PropertyAssignment)

  const themeInitializer = themeProperty.getInitializer()
  if (themeInitializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
    const themeObjectString = themeInitializer.getText()
    const themeObject = await parseObjectLiteral(themeObjectString)
    const result = deepmerge(themeObject, theme, {
      arrayMerge: (dst, src) => src,
    })
    const resultString = objectToString(result)
      .replace(/\'\.\.\.(.*)\'/g, "...$1") // Remove quote around spread element
      .replace(/\'\"/g, "'") // Replace `\" with "
      .replace(/\"\'/g, "'") // Replace `\" with "
      .replace(/\'\[/g, "[") // Replace `[ with [
      .replace(/\]\'/g, "]") // Replace `] with ]
      .replace(/\'\\\'/g, "'") // Replace `\' with '
      .replace(/\\\'/g, "'") // Replace \' with '
      .replace(/\\\'\'/g, "'")
      .replace(/\'\'/g, "'")
    themeInitializer.replaceWithText(resultString)
  }

  // Unnest all spread properties.
  unnestSpreadProperties(configObject)
}