collapseCandidates() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 200–417

function collapseCandidates(options: InternalCanonicalizeOptions, candidates: string[]): string[] {
  if (candidates.length <= 1) return candidates
  let designSystem = options.designSystem

  // To keep things simple, we group candidates such that we only collapse
  // candidates with the same variants and important modifier together.
  let groups = new DefaultMap((_before: string) => {
    return new DefaultMap((_after: string) => {
      return new Set<string>()
    })
  })

  let prefix = options.designSystem.theme.prefix ? `${options.designSystem.theme.prefix}:` : ''

  for (let candidate of candidates) {
    let variants = segment(candidate, ':')
    let utility = variants.pop()!

    let important = utility.endsWith('!')
    if (important) {
      utility = utility.slice(0, -1)
    }

    let before = variants.length > 0 ? `${variants.join(':')}:` : ''
    let after = important ? '!' : ''

    // Group by variants and important flag
    groups.get(before).get(after).add(`${prefix}${utility}`)
  }

  let result = new Set<string>()
  for (let [before, group] of groups.entries()) {
    for (let [after, candidates] of group.entries()) {
      for (let candidate of collapseGroup(Array.from(candidates))) {
        // Drop the prefix if we had one, because the prefix is already there as
        // part of the variants.
        if (prefix && candidate.startsWith(prefix)) {
          candidate = candidate.slice(prefix.length)
        }

        result.add(`${before}${candidate}${after}`)
      }
    }
  }

  return Array.from(result)

  function collapseGroup(candidates: string[]) {
    let signatureOptions = options.signatureOptions
    let computeUtilitiesPropertiesLookup =
      designSystem.storage[UTILITY_PROPERTIES_KEY].get(signatureOptions)
    let staticUtilities = designSystem.storage[STATIC_UTILITIES_KEY].get(signatureOptions)

    // For each candidate, compute the used properties and values. E.g.: `mt-1` → `margin-top` → `0.25rem`
    //
    // NOTE: Currently assuming we are dealing with static utilities only. This
    // will change the moment we have `@utility` for most built-ins.
    let candidatePropertiesValues = candidates.map((candidate) =>
      computeUtilitiesPropertiesLookup.get(candidate),
    )

    // Hard-coded optimization: if any candidate sets `line-height` and another
    // candidate sets `font-size`, we pre-compute the `text-*` utilities with
    // this line-height to try and collapse to those combined values.
    if (candidatePropertiesValues.some((x) => x.has('line-height'))) {
      let fontSizeNames = designSystem.theme.keysInNamespaces(['--text'])
      if (fontSizeNames.length > 0) {
        let interestingLineHeights = new Set<string | number>()
        let seenLineHeights = new Set<string>()
        for (let pairs of candidatePropertiesValues) {
          for (let lineHeight of pairs.get('line-height')) {
            if (seenLineHeights.has(lineHeight)) continue
            seenLineHeights.add(lineHeight)

            let bareValue = designSystem.storage[SPACING_KEY]?.get(lineHeight) ?? null
            if (bareValue !== null) {
              if (isValidSpacingMultiplier(bareValue)) {
                interestingLineHeights.add(bareValue)

                for (let name of fontSizeNames) {
                  computeUtilitiesPropertiesLookup.get(`text-${name}/${bareValue}`)