Home / Function/ bareValueUtilities() — tailwindcss Function Reference

bareValueUtilities() — tailwindcss Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  4ae520d8_4858_44dc_3f0d_36956d1f40ba["bareValueUtilities()"]
  ec55634f_f6e4_3b8b_1267_0b251c4dade1["printCandidate()"]
  4ae520d8_4858_44dc_3f0d_36956d1f40ba -->|calls| ec55634f_f6e4_3b8b_1267_0b251c4dade1
  74157cfe_4a6c_d75a_a5ac_16fa6909752f["parseCandidate()"]
  4ae520d8_4858_44dc_3f0d_36956d1f40ba -->|calls| 74157cfe_4a6c_d75a_a5ac_16fa6909752f
  4cd99e59_ac1e_2a1f_0946_33cc1afd2532["get()"]
  4ae520d8_4858_44dc_3f0d_36956d1f40ba -->|calls| 4cd99e59_ac1e_2a1f_0946_33cc1afd2532
  style 4ae520d8_4858_44dc_3f0d_36956d1f40ba 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
      }
    }
  }
}

Subdomains

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free