updateCssVars() — ui Function Reference

Architecture documentation for the updateCssVars() function in update-css-vars.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 1

Entity Profile

FrameworkTooling→ CLICore→ updateCssVars() — ui Function Reference

Dependency Diagram

graph TD
  8e9a17b5_2e3d_8a10_a4c5_8adbc5c2a2c3["updateCssVars()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  8e9a17b5_2e3d_8a10_a4c5_8adbc5c2a2c3 -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  8e9a17b5_2e3d_8a10_a4c5_8adbc5c2a2c3 -->|calls| 4b9d28e9_450c_12b3_5ef0_44434fa9535b
  style 8e9a17b5_2e3d_8a10_a4c5_8adbc5c2a2c3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 18–63

export async function updateCssVars(
  cssVars: z.infer<typeof registryItemCssVarsSchema> | undefined,
  config: Config,
  options: {
    cleanupDefaultNextStyles?: boolean
    overwriteCssVars?: boolean
    initIndex?: boolean
    silent?: boolean
    tailwindVersion?: TailwindVersion
    tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
  }
) {
  if (!config.resolvedPaths.tailwindCss || !Object.keys(cssVars ?? {}).length) {
    return
  }

  options = {
    cleanupDefaultNextStyles: false,
    silent: false,
    tailwindVersion: "v3",
    overwriteCssVars: false,
    initIndex: true,
    ...options,
  }
  const cssFilepath = config.resolvedPaths.tailwindCss
  const cssFilepathRelative = path.relative(
    config.resolvedPaths.cwd,
    cssFilepath
  )
  const cssVarsSpinner = spinner(
    `Updating CSS variables in ${highlighter.info(cssFilepathRelative)}`,
    {
      silent: options.silent,
    }
  ).start()
  const raw = await fs.readFile(cssFilepath, "utf8")
  let output = await transformCssVars(raw, cssVars ?? {}, config, {
    cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
    tailwindVersion: options.tailwindVersion,
    tailwindConfig: options.tailwindConfig,
    overwriteCssVars: options.overwriteCssVars,
    initIndex: options.initIndex,
  })
  await fs.writeFile(cssFilepath, output, "utf8")
  cssVarsSpinner.succeed()
}