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 OxideCore Scanner calls 2

Entity Profile

Dependency Diagram

graph TD
  91d1dfe6_5eca_a036_510d_967ff9e8a1f8["optimizeModifier()"]
  4c29981d_a61a_00fb_b3b5_5a69228c4fff["printCandidate()"]
  91d1dfe6_5eca_a036_510d_967ff9e8a1f8 -->|calls| 4c29981d_a61a_00fb_b3b5_5a69228c4fff
  0aa64a1c_efd8_a69d_48ed_649b7a86c854["get()"]
  91d1dfe6_5eca_a036_510d_967ff9e8a1f8 -->|calls| 0aa64a1c_efd8_a69d_48ed_649b7a86c854
  style 91d1dfe6_5eca_a036_510d_967ff9e8a1f8 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