tryValueReplacements() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors calls 3 called by 1

Entity Profile

OxideCore→ PreProcessors→ tryValueReplacements() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9b136014_1c89_69bd_c68a_71707da43497["tryValueReplacements()"]
  73040e7b_47a1_9040_bf74_f4c58b190a2f["arbitraryValueToBareValueUtility()"]
  73040e7b_47a1_9040_bf74_f4c58b190a2f -->|calls| 9b136014_1c89_69bd_c68a_71707da43497
  24d95be4_356f_a1f9_9702_2a4f413db0f5["add()"]
  9b136014_1c89_69bd_c68a_71707da43497 -->|calls| 24d95be4_356f_a1f9_9702_2a4f413db0f5
  1dd167b2_b42d_8596_9276_d0e969bf2522["isValidSpacingMultiplier()"]
  9b136014_1c89_69bd_c68a_71707da43497 -->|calls| 1dd167b2_b42d_8596_9276_d0e969bf2522
  4eec17e9_9a96_168a_2273_b6e64e229816["isPositiveInteger()"]
  9b136014_1c89_69bd_c68a_71707da43497 -->|calls| 4eec17e9_9a96_168a_2273_b6e64e229816
  style 9b136014_1c89_69bd_c68a_71707da43497 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)
  }
}