Home / Function/ compare() — tailwindcss Function Reference

compare() — tailwindcss Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  7787e2e6_2e19_8e07_7666_21a94194841f["compare()"]
  2735e2c9_52ba_b31c_44c9_a72c4826e6b7["compare.ts"]
  7787e2e6_2e19_8e07_7666_21a94194841f -->|defined in| 2735e2c9_52ba_b31c_44c9_a72c4826e6b7
  72e2da57_c616_3dd9_4146_d33580eb2596["getClassList()"]
  72e2da57_c616_3dd9_4146_d33580eb2596 -->|calls| 7787e2e6_2e19_8e07_7666_21a94194841f
  f611bd99_74d3_1161_f7f5_4c1d73c377e5["compileCandidates()"]
  f611bd99_74d3_1161_f7f5_4c1d73c377e5 -->|calls| 7787e2e6_2e19_8e07_7666_21a94194841f
  style 7787e2e6_2e19_8e07_7666_21a94194841f 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
}

Domain

Subdomains

Frequently Asked Questions

What does compare() do?
compare() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/utils/compare.ts.
Where is compare() defined?
compare() is defined in packages/tailwindcss/src/utils/compare.ts at line 8.
What calls compare()?
compare() is called by 2 function(s): compileCandidates, getClassList.

Analyze Your Own Codebase

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

Try Supermodel Free