bareValueUtilities() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 3

Entity Profile

Oxide→ Extractor→ bareValueUtilities() — tailwindcss Function Reference

Dependency Diagram

graph TD
  8a0213f4_1b24_eee5_4f7d_452f550ece9e["bareValueUtilities()"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  8a0213f4_1b24_eee5_4f7d_452f550ece9e -->|defined in| f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  2de86ba2_90a4_8c2d_db18_154bb1a1564f["printCandidate()"]
  8a0213f4_1b24_eee5_4f7d_452f550ece9e -->|calls| 2de86ba2_90a4_8c2d_db18_154bb1a1564f
  bafed062_abf8_7e47_4942_385b21bd9b04["parseCandidate()"]
  8a0213f4_1b24_eee5_4f7d_452f550ece9e -->|calls| bafed062_abf8_7e47_4942_385b21bd9b04
  2820372c_b982_9e06_fc23_f8f4ac308d00["get()"]
  8a0213f4_1b24_eee5_4f7d_452f550ece9e -->|calls| 2820372c_b982_9e06_fc23_f8f4ac308d00
  style 8a0213f4_1b24_eee5_4f7d_452f550ece9e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 1202–1273

function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeOptions): Candidate {
  // We are only interested in bare value utilities
  if (candidate.kind !== 'functional' || candidate.value?.kind !== 'named') {
    return candidate
  }

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

  let targetCandidateString = designSystem.printCandidate(candidate)

  // Compute the signature for the target candidate
  let targetSignature = signatures.get(targetCandidateString)
  if (typeof targetSignature !== 'string') return candidate

  // Try a few options to find a suitable replacement utility
  for (let replacementCandidate of tryReplacements(targetSignature, candidate)) {
    let replacementString = designSystem.printCandidate(replacementCandidate)
    let replacementSignature = signatures.get(replacementString)
    if (replacementSignature !== targetSignature) {
      continue
    }

    return replacementCandidate
  }

  return candidate

  function* tryReplacements(
    targetSignature: string,
    candidate: Extract<Candidate, { kind: 'functional' }>,
  ): Generator<Candidate> {
    // Find a corresponding utility for the same signature
    let replacements = utilities.get(targetSignature)

    // Multiple utilities can map to the same signature. Not sure how to migrate
    // this one so let's just skip it for now.
    //
    // TODO: Do we just migrate to the first one?
    if (replacements.length > 1) return

    // If we didn't find any replacement utilities, let's try to strip the
    // modifier and find a replacement then. If we do, we can try to re-add the
    // modifier later and verify if we have a valid migration.
    //
    // This is necessary because `text-red-500/50` will not be pre-computed,
    // only `text-red-500` will.
    if (replacements.length === 0 && candidate.modifier) {
      let candidateWithoutModifier = { ...candidate, modifier: null }
      let targetSignatureWithoutModifier = signatures.get(
        designSystem.printCandidate(candidateWithoutModifier),
      )
      if (typeof targetSignatureWithoutModifier === 'string') {
        for (let replacementCandidate of tryReplacements(
          targetSignatureWithoutModifier,
          candidateWithoutModifier,
        )) {
          yield Object.assign({}, replacementCandidate, { modifier: candidate.modifier })
        }
      }
    }

    // If only a single utility maps to the signature, we can use that as the
    // replacement.
    if (replacements.length === 1) {
      for (let replacementCandidate of parseCandidate(designSystem, replacements[0])) {
        yield replacementCandidate
      }
    }
  }
}