constantFoldDeclaration() — tailwindcss Function Reference

Architecture documentation for the constantFoldDeclaration() function in constant-fold-declaration.ts from the tailwindcss codebase.

Function typescript OxideCore PreProcessors calls 5 called by 2

Entity Profile

OxideCore→ PreProcessors→ constantFoldDeclaration() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3a1a48b0_f593_6ef7_a2a2_e2d97f76468f["constantFoldDeclaration()"]
  0043d7b5_bba3_2709_5125_355abd3b6888["createSpacingCache()"]
  0043d7b5_bba3_2709_5125_355abd3b6888 -->|calls| 3a1a48b0_f593_6ef7_a2a2_e2d97f76468f
  3c29a5ca_8e68_4fa2_4e91_392cf24c5a01["canonicalizeAst()"]
  3c29a5ca_8e68_4fa2_4e91_392cf24c5a01 -->|calls| 3a1a48b0_f593_6ef7_a2a2_e2d97f76468f
  e5eb2faf_45a2_ac47_3404_8bd4e7eb6817["parse()"]
  3a1a48b0_f593_6ef7_a2a2_e2d97f76468f -->|calls| e5eb2faf_45a2_ac47_3404_8bd4e7eb6817
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  3a1a48b0_f593_6ef7_a2a2_e2d97f76468f -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  402c27db_98ae_66ad_97f7_0dfc728cf588["canonicalizeDimension()"]
  3a1a48b0_f593_6ef7_a2a2_e2d97f76468f -->|calls| 402c27db_98ae_66ad_97f7_0dfc728cf588
  e4baa46a_9648_577b_0f40_0474174b16a4["word()"]
  3a1a48b0_f593_6ef7_a2a2_e2d97f76468f -->|calls| e4baa46a_9648_577b_0f40_0474174b16a4
  c57928e0_95f9_bd68_c036_1186e1a4d345["toCss()"]
  3a1a48b0_f593_6ef7_a2a2_e2d97f76468f -->|calls| c57928e0_95f9_bd68_c036_1186e1a4d345
  style 3a1a48b0_f593_6ef7_a2a2_e2d97f76468f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/constant-fold-declaration.ts lines 8–115

export function constantFoldDeclaration(input: string, rem: number | null = null): string {
  let folded = false
  let valueAst = ValueParser.parse(input)

  walk(valueAst, {
    exit(valueNode) {
      // Canonicalize dimensions to their simplest form. This includes:
      // - Convert `-0`, `+0`, `0.0`, … to `0`
      // - Convert `-0px`, `+0em`, `0.0rem`, … to `0`
      // - Convert units to an equivalent unit
      if (
        valueNode.kind === 'word' &&
        valueNode.value !== '0' // Already `0`, nothing to do
      ) {
        let canonical = canonicalizeDimension(valueNode.value, rem)
        if (canonical === null) return // Couldn't be canonicalized, nothing to do
        if (canonical === valueNode.value) return // Already in canonical form, nothing to do

        folded = true
        return WalkAction.ReplaceSkip(ValueParser.word(canonical))
      }

      // Constant fold `calc()` expressions with two operands and one operator
      else if (
        valueNode.kind === 'function' &&
        (valueNode.value === 'calc' || valueNode.value === '')
      ) {
        // [
        //   { kind: 'word', value: '0.25rem' },            0
        //   { kind: 'separator', value: ' ' },             1
        //   { kind: 'word', value: '*' },                  2
        //   { kind: 'separator', value: ' ' },             3
        //   { kind: 'word', value: '256' }                 4
        // ]
        if (valueNode.nodes.length !== 5) return

        let lhs = dimensions.get(valueNode.nodes[0].value)
        let operator = valueNode.nodes[2].value
        let rhs = dimensions.get(valueNode.nodes[4].value)

        // Nullify entire expression when multiplying by `0`, e.g.: `calc(0 * 100vw)` -> `0`
        //
        // TODO: Ensure it's safe to do so based on the data types?
        if (
          operator === '*' &&
          ((lhs?.[0] === 0 && lhs?.[1] === null) || // 0 * something
            (rhs?.[0] === 0 && rhs?.[1] === null)) // something * 0
        ) {
          folded = true
          return WalkAction.ReplaceSkip(ValueParser.word('0'))
        }

        // We're not dealing with dimensions, so we can't fold this
        if (lhs === null || rhs === null) {
          return
        }

        switch (operator) {
          case '*': {
            if (
              lhs[1] === rhs[1] || // Same Units, e.g.: `1rem * 2rem`, `8 * 6`
              (lhs[1] === null && rhs[1] !== null) || // Unitless * Unit, e.g.: `2 * 1rem`
              (lhs[1] !== null && rhs[1] === null) // Unit * Unitless, e.g.: `1rem * 2`
            ) {
              folded = true
              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? ''}`))
            }
            break
          }

          case '+': {
            if (
              lhs[1] === rhs[1] // Same unit or unitless, e.g.: `1rem + 2rem`, `8 + 6`
            ) {
              folded = true
              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] + rhs[0]}${lhs[1] ?? ''}`))
            }
            break
          }

          case '-': {
            if (
              lhs[1] === rhs[1] // Same unit or unitless, e.g.: `2rem - 1rem`, `8 - 6`
            ) {
              folded = true
              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] - rhs[0]}${lhs[1] ?? ''}`))
            }
            break
          }

          case '/': {
            if (
              rhs[0] !== 0 && // Don't divide by zero
              ((lhs[1] === null && rhs[1] === null) || // Unitless / Unitless, e.g.: `8 / 2`
                (lhs[1] !== null && rhs[1] === null)) // Unit / Unitless, e.g.: `1rem / 2`
            ) {
              folded = true
              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] / rhs[0]}${lhs[1] ?? ''}`))
            }
            break
          }
        }
      }
    },
  })

  return folded ? ValueParser.toCss(valueAst) : input
}