optimizeModifier() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 2

Entity Profile

Oxide→ Extractor→ optimizeModifier() — tailwindcss Function Reference

Dependency Diagram

graph TD
  228bb7b1_d757_0d04_1a29_a184542c3909["optimizeModifier()"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  228bb7b1_d757_0d04_1a29_a184542c3909 -->|defined in| f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  2de86ba2_90a4_8c2d_db18_154bb1a1564f["printCandidate()"]
  228bb7b1_d757_0d04_1a29_a184542c3909 -->|calls| 2de86ba2_90a4_8c2d_db18_154bb1a1564f
  2820372c_b982_9e06_fc23_f8f4ac308d00["get()"]
  228bb7b1_d757_0d04_1a29_a184542c3909 -->|calls| 2820372c_b982_9e06_fc23_f8f4ac308d00
  style 228bb7b1_d757_0d04_1a29_a184542c3909 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
}