substituteFunctionsInValue() — tailwindcss Function Reference

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

Function typescript OxideCore Extractor calls 4 called by 1

Entity Profile

OxideCore→ Extractor→ substituteFunctionsInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  5f56996c_e87d_a997_67df_2ad202639ad3["substituteFunctionsInValue()"]
  6896eab3_60a4_7b0f_937b_8de4f4e9fe5a["substituteFunctions()"]
  6896eab3_60a4_7b0f_937b_8de4f4e9fe5a -->|calls| 5f56996c_e87d_a997_67df_2ad202639ad3
  e5eb2faf_45a2_ac47_3404_8bd4e7eb6817["parse()"]
  5f56996c_e87d_a997_67df_2ad202639ad3 -->|calls| e5eb2faf_45a2_ac47_3404_8bd4e7eb6817
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  5f56996c_e87d_a997_67df_2ad202639ad3 -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  03b8d706_a876_a776_0056_186ced5d6067["segment()"]
  5f56996c_e87d_a997_67df_2ad202639ad3 -->|calls| 03b8d706_a876_a776_0056_186ced5d6067
  c57928e0_95f9_bd68_c036_1186e1a4d345["toCss()"]
  5f56996c_e87d_a997_67df_2ad202639ad3 -->|calls| c57928e0_95f9_bd68_c036_1186e1a4d345
  style 5f56996c_e87d_a997_67df_2ad202639ad3 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)
}