tryValueReplacements() — tailwindcss Function Reference

Architecture documentation for the tryValueReplacements() function in canonicalize-candidates.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 3 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ tryValueReplacements() — tailwindcss Function Reference

Dependency Diagram

graph TD
  07e623bd_0cfb_00fb_6300_b582d8ed9fd0["tryValueReplacements()"]
  d7c45bb2_47f5_d563_098b_5023e03204bb["arbitraryValueToBareValueUtility()"]
  d7c45bb2_47f5_d563_098b_5023e03204bb -->|calls| 07e623bd_0cfb_00fb_6300_b582d8ed9fd0
  3ba19013_498f_3c9b_5c44_0eb24efc4394["add()"]
  07e623bd_0cfb_00fb_6300_b582d8ed9fd0 -->|calls| 3ba19013_498f_3c9b_5c44_0eb24efc4394
  c12acffb_80f9_0b95_b1a6_e663fbaca197["isValidSpacingMultiplier()"]
  07e623bd_0cfb_00fb_6300_b582d8ed9fd0 -->|calls| c12acffb_80f9_0b95_b1a6_e663fbaca197
  559275a8_927e_3002_3298_4cbb685cc92a["isPositiveInteger()"]
  07e623bd_0cfb_00fb_6300_b582d8ed9fd0 -->|calls| 559275a8_927e_3002_3298_4cbb685cc92a
  style 07e623bd_0cfb_00fb_6300_b582d8ed9fd0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 1470–1527

function* tryValueReplacements(
  candidate: Extract<Candidate, { kind: 'functional' }>,
  value: string = candidate.value?.value ?? '',
  seen: Set<string> = new Set(),
): Generator<NamedUtilityValue> {
  if (seen.has(value)) return
  seen.add(value)

  // 0. Just try to drop the square brackets and see if it works
  // 1. A number (with increments of .25)
  yield {
    kind: 'named',
    value,
    fraction: null,
  }

  // 2. A percentage (with increments of .25 followed by a `%`)
  //    Try to drop the `%` and see if it works
  if (value.endsWith('%') && isValidSpacingMultiplier(value.slice(0, -1))) {
    yield {
      kind: 'named',
      value: value.slice(0, -1),
      fraction: null,
    }
  }

  // 3. A ratio with whole numbers
  if (value.includes('/')) {
    let [numerator, denominator] = value.split('/')
    if (isPositiveInteger(numerator) && isPositiveInteger(denominator)) {
      yield {
        kind: 'named',
        value: numerator,
        fraction: `${numerator}/${denominator}`,
      }
    }
  }

  // It could also be that we have `20px`, we can try just `20` and see if it
  // results in the same signature.
  let allNumbersAndFractions = new Set<string>()

  // Figure out all numbers and fractions in the value
  for (let match of value.matchAll(/(\d+\/\d+)|(\d+\.?\d+)/g)) {
    allNumbersAndFractions.add(match[0].trim())
  }

  // Sort the numbers and fractions where the smallest length comes first. This
  // will result in the smallest replacement.
  let options = Array.from(allNumbersAndFractions).sort((a, z) => {
    return a.length - z.length
  })

  // Try all the options
  for (let option of options) {
    yield* tryValueReplacements(candidate, option, seen)
  }
}