substituteFunctionsInValue() — tailwindcss Function Reference

Architecture documentation for the substituteFunctionsInValue() function in css-functions.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 4 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ substituteFunctionsInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  89ce828b_eda4_0d96_a1db_69d4d7bec86b["substituteFunctionsInValue()"]
  4bf7802a_6d99_1399_1f81_b8d1aa3ab685["substituteFunctions()"]
  4bf7802a_6d99_1399_1f81_b8d1aa3ab685 -->|calls| 89ce828b_eda4_0d96_a1db_69d4d7bec86b
  0638028e_f2f7_8e77_2f19_1bd2ce4b2d6a["parse()"]
  89ce828b_eda4_0d96_a1db_69d4d7bec86b -->|calls| 0638028e_f2f7_8e77_2f19_1bd2ce4b2d6a
  e9d556bc_f22d_356c_1bd2_27442c34b5c7["walk()"]
  89ce828b_eda4_0d96_a1db_69d4d7bec86b -->|calls| e9d556bc_f22d_356c_1bd2_27442c34b5c7
  2a20ea29_c850_cd61_5600_aeebbe3dda66["segment()"]
  89ce828b_eda4_0d96_a1db_69d4d7bec86b -->|calls| 2a20ea29_c850_cd61_5600_aeebbe3dda66
  f66dddcc_be1c_d082_4eb0_ec82ce3bf380["toCss()"]
  89ce828b_eda4_0d96_a1db_69d4d7bec86b -->|calls| f66dddcc_be1c_d082_4eb0_ec82ce3bf380
  style 89ce828b_eda4_0d96_a1db_69d4d7bec86b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/css-functions.ts lines 185–204

export function substituteFunctionsInValue(
  value: string,
  source: AstNode,
  designSystem: DesignSystem,
): string {
  let ast = ValueParser.parse(value)
  walk(ast, (node) => {
    if (node.kind === 'function' && node.value in CSS_FUNCTIONS) {
      let args = segment(ValueParser.toCss(node.nodes).trim(), ',').map((x) => x.trim())
      let result = CSS_FUNCTIONS[node.value as keyof typeof CSS_FUNCTIONS](
        designSystem,
        source,
        ...args,
      )
      return WalkAction.Replace(ValueParser.parse(result))
    }
  })

  return ValueParser.toCss(ast)
}