transformCssVars() — ui Function Reference

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

Function typescript FrameworkTooling CLICore calls 1

Entity Profile

FrameworkTooling→ CLICore→ transformCssVars() — ui Function Reference

Dependency Diagram

graph TD
  996de029_c32d_60aa_ca35_5c74fad9cbe8["transformCssVars()"]
  68902008_e67e_dfe4_353e_be9dad09e8d9["transform-css-vars.ts"]
  996de029_c32d_60aa_ca35_5c74fad9cbe8 -->|defined in| 68902008_e67e_dfe4_353e_be9dad09e8d9
  15235ae6_6a22_6fdf_a8f4_354a12d93b40["applyColorMapping()"]
  996de029_c32d_60aa_ca35_5c74fad9cbe8 -->|calls| 15235ae6_6a22_6fdf_a8f4_354a12d93b40
  style 996de029_c32d_60aa_ca35_5c74fad9cbe8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-css-vars.ts lines 6–42

export const transformCssVars: Transformer = async ({
  sourceFile,
  config,
  baseColor,
}) => {
  // No transform if using css variables.
  if (config.tailwind?.cssVariables || !baseColor?.inlineColors) {
    return sourceFile
  }

  // Find jsx attributes with the name className.
  // const openingElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement)
  // console.log(openingElements)
  // const jsxAttributes = sourceFile
  //   .getDescendantsOfKind(SyntaxKind.JsxAttribute)
  //   .filter((node) => node.getName() === "className")

  // for (const jsxAttribute of jsxAttributes) {
  //   const value = jsxAttribute.getInitializer()?.getText()
  //   if (value) {
  //     const valueWithColorMapping = applyColorMapping(
  //       value.replace(/"/g, ""),
  //       baseColor.inlineColors
  //     )
  //     jsxAttribute.setInitializer(`"${valueWithColorMapping}"`)
  //   }
  // }
  sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
    const raw = node.getLiteralText()
    const mapped = applyColorMapping(raw, baseColor.inlineColors).trim()
    if (mapped !== raw) {
      node.setLiteralValue(mapped)
    }
  })

  return sourceFile
}