ui Architecture Docs
Home / Function/ transformCssVars() — ui Function Reference

transformCssVars() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 10 called by 1

Entity Profile

Dependency Diagram

graph TD
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  8e9a17b5_2e3d_8a10_a4c5_8adbc5c2a2c3["updateCssVars()"]
  8e9a17b5_2e3d_8a10_a4c5_8adbc5c2a2c3 -->|calls| 4b9d28e9_450c_12b3_5ef0_44434fa9535b
  eaa1e229_af9a_45f5_064f_bf1836cd5445["updateCssVarsPlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| eaa1e229_af9a_45f5_064f_bf1836cd5445
  be472c6f_9599_a13c_545c_918b73c2bc3a["cleanupDefaultNextStylesPlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| be472c6f_9599_a13c_545c_918b73c2bc3a
  f42fda81_ab54_6da5_9ba8_8104540a417f["addCustomImport()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| f42fda81_ab54_6da5_9ba8_8104540a417f
  67605a1e_8b7f_382b_ac27_26a5c880a738["addCustomVariant()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 67605a1e_8b7f_382b_ac27_26a5c880a738
  b9266edd_762e_e91a_7f0a_fcd26e8e87a3["updateCssVarsPluginV4()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| b9266edd_762e_e91a_7f0a_fcd26e8e87a3
  9e221c92_a132_552e_5f2f_e0d1591df611["updateThemePlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 9e221c92_a132_552e_5f2f_e0d1591df611
  1029d41a_1898_ac6d_cce2_d39e226440cb["updateTailwindConfigPlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 1029d41a_1898_ac6d_cce2_d39e226440cb
  1662bbcf_2db2_62d6_ddb3_663c71236ffd["updateTailwindConfigAnimationPlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 1662bbcf_2db2_62d6_ddb3_663c71236ffd
  315344ca_3575_e78f_468b_3956823df10b["updateTailwindConfigKeyframesPlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 315344ca_3575_e78f_468b_3956823df10b
  d6b81cfa_28cd_7209_b6f9_160dfb9bb98e["updateBaseLayerPlugin()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| d6b81cfa_28cd_7209_b6f9_160dfb9bb98e
  style 4b9d28e9_450c_12b3_5ef0_44434fa9535b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 65–152

export async function transformCssVars(
  input: string,
  cssVars: z.infer<typeof registryItemCssVarsSchema>,
  config: Config,
  options: {
    cleanupDefaultNextStyles?: boolean
    tailwindVersion?: TailwindVersion
    tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
    overwriteCssVars?: boolean
    initIndex?: boolean
  } = {
    cleanupDefaultNextStyles: false,
    tailwindVersion: "v3",
    tailwindConfig: undefined,
    overwriteCssVars: false,
    initIndex: false,
  }
) {
  options = {
    cleanupDefaultNextStyles: false,
    tailwindVersion: "v3",
    tailwindConfig: undefined,
    overwriteCssVars: false,
    initIndex: false,
    ...options,
  }

  let plugins = [updateCssVarsPlugin(cssVars)]

  if (options.cleanupDefaultNextStyles) {
    plugins.push(cleanupDefaultNextStylesPlugin())
  }

  if (options.tailwindVersion === "v4") {
    plugins = []

    // Only add tw-animate-css if project does not have tailwindcss-animate
    if (config.resolvedPaths?.cwd) {
      const packageInfo = getPackageInfo(config.resolvedPaths.cwd)
      if (
        !packageInfo?.dependencies?.["tailwindcss-animate"] &&
        !packageInfo?.devDependencies?.["tailwindcss-animate"] &&
        options.initIndex
      ) {
        plugins.push(addCustomImport({ params: "tw-animate-css" }))
      }
    }

    plugins.push(addCustomVariant({ params: "dark (&:is(.dark *))" }))

    if (options.cleanupDefaultNextStyles) {
      plugins.push(cleanupDefaultNextStylesPlugin())
    }

    plugins.push(
      updateCssVarsPluginV4(cssVars, {
        overwriteCssVars: options.overwriteCssVars,
      })
    )
    plugins.push(updateThemePlugin(cssVars))

    if (options.tailwindConfig) {
      plugins.push(updateTailwindConfigPlugin(options.tailwindConfig))
      plugins.push(updateTailwindConfigAnimationPlugin(options.tailwindConfig))
      plugins.push(updateTailwindConfigKeyframesPlugin(options.tailwindConfig))
    }
  }

  if (config.tailwind.cssVariables && options.initIndex) {
    plugins.push(
      updateBaseLayerPlugin({ tailwindVersion: options.tailwindVersion })
    )
  }

  const result = await postcss(plugins).process(input, {
    from: undefined,
  })

  let output = result.css

  output = output.replace(/\/\* ---break--- \*\//g, "")

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does transformCssVars() do?
transformCssVars() is a function in the ui codebase, defined in packages/shadcn/src/utils/updaters/update-css-vars.ts.
Where is transformCssVars() defined?
transformCssVars() is defined in packages/shadcn/src/utils/updaters/update-css-vars.ts at line 65.
What does transformCssVars() call?
transformCssVars() calls 10 function(s): addCustomImport, addCustomVariant, cleanupDefaultNextStylesPlugin, updateBaseLayerPlugin, updateCssVarsPlugin, updateCssVarsPluginV4, updateTailwindConfigAnimationPlugin, updateTailwindConfigKeyframesPlugin, and 2 more.
What calls transformCssVars()?
transformCssVars() is called by 1 function(s): updateCssVars.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free