tailwindcss Architecture Docs
Home / Function/ optimizeModifier() — tailwindcss Function Reference

optimizeModifier() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 2

Entity Profile

Dependency Diagram

graph TD
  1898c7d8_5420_a9f4_e09f_0566e1c2bbe1["optimizeModifier()"]
  ec55634f_f6e4_3b8b_1267_0b251c4dade1["printCandidate()"]
  1898c7d8_5420_a9f4_e09f_0566e1c2bbe1 -->|calls| ec55634f_f6e4_3b8b_1267_0b251c4dade1
  4cd99e59_ac1e_2a1f_0946_33cc1afd2532["get()"]
  1898c7d8_5420_a9f4_e09f_0566e1c2bbe1 -->|calls| 4cd99e59_ac1e_2a1f_0946_33cc1afd2532
  style 1898c7d8_5420_a9f4_e09f_0566e1c2bbe1 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
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does optimizeModifier() do?
optimizeModifier() is a function in the tailwindcss codebase.
What does optimizeModifier() call?
optimizeModifier() calls 2 function(s): get, printCandidate.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free