addWhitespaceAroundMathOperators() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/utils/math-operators.ts lines 45–205

export function addWhitespaceAroundMathOperators(input: string) {
  // Bail early if there are no math functions in the input
  if (!MATH_FUNCTIONS.some((fn) => input.includes(fn))) {
    return input
  }

  let result = ''
  let formattable: boolean[] = []

  let valuePos = null
  let lastValuePos = null

  for (let i = 0; i < input.length; i++) {
    let char = input.charCodeAt(i)

    // Track if we see a number followed by a unit, then we know for sure that
    // this is not a function call.
    if (char >= ZERO && char <= NINE) {
      valuePos = i
    }

    // If we saw a number before, and we see normal a-z character, then we
    // assume this is a value such as `123px`
    else if (
      valuePos !== null &&
      (char === PERCENT ||
        (char >= LOWER_A && char <= LOWER_Z) ||
        (char >= UPPER_A && char <= UPPER_Z))
    ) {
      valuePos = i
    }

    // Once we see something else, we reset the value position
    else {
      lastValuePos = valuePos
      valuePos = null
    }

    // Determine if we're inside a math function
    if (char === OPEN_PAREN) {
      result += input[i]

      // Scan backwards to determine the function name. This assumes math
      // functions are named with lowercase alphanumeric characters.
      let start = i

      for (let j = i - 1; j >= 0; j--) {
        let inner = input.charCodeAt(j)

        if (inner >= ZERO && inner <= NINE) {
          start = j // 0-9
        } else if (inner >= LOWER_A && inner <= LOWER_Z) {
          start = j // a-z
        } else {
          break
        }
      }

      let fn = input.slice(start, i)

      // This is a known math function so start formatting
      if (MATH_FUNCTIONS.includes(fn)) {
        formattable.unshift(true)
        continue
      }

      // We've encountered nested parens inside a math function, record that and
      // keep formatting until we've closed all parens.
      else if (formattable[0] && fn === '') {
        formattable.unshift(true)
        continue
      }

      // This is not a known math function so don't format it
      formattable.unshift(false)
      continue
    }

    // We've exited the function so format according to the parent function's
    // type.
    else if (char === CLOSE_PAREN) {