substituteFunctionsInValue() — tailwindcss Function Reference

Architecture documentation for the substituteFunctionsInValue() function in migrate-preflight.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
  f0fec366_dab0_6cd4_1266_ed1e249ce89a["substituteFunctionsInValue()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0["migratePreflight()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 -->|calls| f0fec366_dab0_6cd4_1266_ed1e249ce89a
  c57928e0_95f9_bd68_c036_1186e1a4d345["toCss()"]
  f0fec366_dab0_6cd4_1266_ed1e249ce89a -->|calls| c57928e0_95f9_bd68_c036_1186e1a4d345
  bc876c03_53af_7efd_3822_7c65295dd62d["eventuallyUnquote()"]
  f0fec366_dab0_6cd4_1266_ed1e249ce89a -->|calls| bc876c03_53af_7efd_3822_7c65295dd62d
  e5eb2faf_45a2_ac47_3404_8bd4e7eb6817["parse()"]
  f0fec366_dab0_6cd4_1266_ed1e249ce89a -->|calls| e5eb2faf_45a2_ac47_3404_8bd4e7eb6817
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  f0fec366_dab0_6cd4_1266_ed1e249ce89a -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  style f0fec366_dab0_6cd4_1266_ed1e249ce89a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.ts lines 117–164

function substituteFunctionsInValue(
  ast: ValueParser.ValueAstNode[],
  handle: (value: string, fallback?: string) => string | null,
) {
  walk(ast, (node) => {
    if (node.kind === 'function' && node.value === 'theme') {
      if (node.nodes.length < 1) return

      // Ignore whitespace before the first argument
      if (node.nodes[0].kind === 'separator' && node.nodes[0].value.trim() === '') {
        node.nodes.shift()
      }

      let pathNode = node.nodes[0]
      if (pathNode.kind !== 'word') return

      let path = pathNode.value

      // For the theme function arguments, we require all separators to contain
      // comma (`,`), spaces alone should be merged into the previous word to
      // avoid splitting in this case:
      //
      // theme(--color-red-500 / 75%) theme(--color-red-500 / 75%, foo, bar)
      //
      // We only need to do this for the first node, as the fallback values are
      // passed through as-is.
      let skipUntilIndex = 1
      for (let i = skipUntilIndex; i < node.nodes.length; i++) {
        if (node.nodes[i].value.includes(',')) {
          break
        }
        path += ValueParser.toCss([node.nodes[i]])
        skipUntilIndex = i + 1
      }

      path = eventuallyUnquote(path)
      let fallbackValues = node.nodes.slice(skipUntilIndex + 1)

      let replacement =
        fallbackValues.length > 0 ? handle(path, ValueParser.toCss(fallbackValues)) : handle(path)
      if (replacement === null) return

      return WalkAction.Replace(ValueParser.parse(replacement))
    }
  })

  return ValueParser.toCss(ast)
}