substituteFunctionsInValue() — tailwindcss Function Reference

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

Function typescript Oxide PreProcessors calls 4 called by 1

Entity Profile

Oxide→ PreProcessors→ substituteFunctionsInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85["substituteFunctionsInValue()"]
  1648a493_13b2_8170_f86b_607e088d9565["css-functions.ts"]
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 -->|defined in| 1648a493_13b2_8170_f86b_607e088d9565
  6bed2e43_7855_2758_8396_9f9e9a11be52["substituteFunctions()"]
  6bed2e43_7855_2758_8396_9f9e9a11be52 -->|calls| 3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85
  49a8c506_c50e_ed4b_5a0e_0393edae2b6f["parse()"]
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"]
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  d6cf80a6_8130_7069_e60d_09156f156b67["toCss()"]
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 -->|calls| d6cf80a6_8130_7069_e60d_09156f156b67
  style 3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 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)
}