optimizeModifier() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit TemplateAnalysis calls 2

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ optimizeModifier() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9c809674_d1ee_b468_e52f_b3c846ad1b40["optimizeModifier()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  9c809674_d1ee_b468_e52f_b3c846ad1b40 -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  87ba7eab_3a52_d53e_dfd4_e507e9763b55["printCandidate()"]
  9c809674_d1ee_b468_e52f_b3c846ad1b40 -->|calls| 87ba7eab_3a52_d53e_dfd4_e507e9763b55
  5bcf4886_1230_a8ff_7302_a26cc5a9a525["get()"]
  9c809674_d1ee_b468_e52f_b3c846ad1b40 -->|calls| 5bcf4886_1230_a8ff_7302_a26cc5a9a525
  style 9c809674_d1ee_b468_e52f_b3c846ad1b40 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 1923–1986

function optimizeModifier(candidate: Candidate, options: InternalCanonicalizeOptions): Candidate {
  // We are only interested in functional or arbitrary utilities with a modifier
  if (
    (candidate.kind !== 'functional' && candidate.kind !== 'arbitrary') ||
    candidate.modifier === null
  ) {
    return candidate
  }

  let designSystem = options.designSystem
  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)

  let targetSignature = signatures.get(designSystem.printCandidate(candidate))
  let modifier = candidate.modifier

  // 1. Try to drop the modifier entirely
  if (
    targetSignature ===
    signatures.get(designSystem.printCandidate({ ...candidate, modifier: null }))
  ) {
    candidate.modifier = null
    return candidate
  }

  // 2. Try to remove the square brackets and the `%` sign
  {
    let newModifier: NamedUtilityValue = {
      kind: 'named',
      value: modifier.value.endsWith('%')
        ? modifier.value.includes('.')
          ? `${Number(modifier.value.slice(0, -1))}`
          : modifier.value.slice(0, -1)
        : modifier.value,
      fraction: null,
    }

    if (
      targetSignature ===
      signatures.get(designSystem.printCandidate({ ...candidate, modifier: newModifier }))
    ) {
      candidate.modifier = newModifier
      return candidate
    }
  }

  // 3. Try to remove the square brackets, but multiply by 100. E.g.: `[0.16]` -> `16`
  {
    let newModifier: NamedUtilityValue = {
      kind: 'named',
      value: `${parseFloat(modifier.value) * 100}`,
      fraction: null,
    }

    if (
      targetSignature ===
      signatures.get(designSystem.printCandidate({ ...candidate, modifier: newModifier }))
    ) {
      candidate.modifier = newModifier
      return candidate
    }
  }

  return candidate
}