compare() — tailwindcss Function Reference

Architecture documentation for the compare() function in compare.ts from the tailwindcss codebase.

Function typescript Oxide PreProcessors called by 2

Entity Profile

Oxide→ PreProcessors→ compare() — tailwindcss Function Reference

Dependency Diagram

graph TD
  b45e6f94_1ba7_7e51_9816_073c45d06c7a["compare()"]
  52a5447b_9c77_0591_7ea4_271cf99d1fa6["compare.ts"]
  b45e6f94_1ba7_7e51_9816_073c45d06c7a -->|defined in| 52a5447b_9c77_0591_7ea4_271cf99d1fa6
  d4f33cd8_f991_3b2a_eeaa_4435de84f79d["getClassList()"]
  d4f33cd8_f991_3b2a_eeaa_4435de84f79d -->|calls| b45e6f94_1ba7_7e51_9816_073c45d06c7a
  ad08c258_e5c2_4cd4_c935_0925a940458e["compileCandidates()"]
  ad08c258_e5c2_4cd4_c935_0925a940458e -->|calls| b45e6f94_1ba7_7e51_9816_073c45d06c7a
  style b45e6f94_1ba7_7e51_9816_073c45d06c7a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utils/compare.ts lines 8–61

export function compare(a: string, z: string) {
  let aLen = a.length
  let zLen = z.length
  let minLen = aLen < zLen ? aLen : zLen

  for (let i = 0; i < minLen; i++) {
    let aCode = a.charCodeAt(i)
    let zCode = z.charCodeAt(i)

    // If both are numbers, compare them as numbers instead of strings.
    if (aCode >= ZERO && aCode <= NINE && zCode >= ZERO && zCode <= NINE) {
      let aStart = i
      let aEnd = i + 1
      let zStart = i
      let zEnd = i + 1

      // Consume the number
      aCode = a.charCodeAt(aEnd)
      while (aCode >= ZERO && aCode <= NINE) aCode = a.charCodeAt(++aEnd)

      // Consume the number
      zCode = z.charCodeAt(zEnd)
      while (zCode >= ZERO && zCode <= NINE) zCode = z.charCodeAt(++zEnd)

      let aNumber = a.slice(aStart, aEnd)
      let zNumber = z.slice(zStart, zEnd)

      let diff = Number(aNumber) - Number(zNumber)
      if (diff) return diff

      // Fallback case if numbers are the same but the string representation
      // is not. Fallback to string sorting. E.g.: `0123` vs `123`
      if (aNumber < zNumber) return -1
      if (aNumber > zNumber) return 1

      // Continue with the next character otherwise short strings will appear
      // after long ones when containing numbers. E.g.:
      // - bg-red-500/70
      // - bg-red-500
      continue
    }

    // Continue if the characters are the same
    if (aCode === zCode) continue

    // Otherwise, compare them as strings
    return aCode - zCode
  }

  // If we got this far, the strings are equal up to the length of the shortest
  // string. The shortest string should come first.

  return a.length - z.length
}