findRoots() — tailwindcss Function Reference

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

Function typescript Oxide PreProcessors called by 2

Entity Profile

Oxide→ PreProcessors→ findRoots() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2fcdeca3_897e_3e5c_c457_c32a9a3f7218["findRoots()"]
  ba6fca27_7720_5839_0f92_bc2abb8db636["candidate.ts"]
  2fcdeca3_897e_3e5c_c457_c32a9a3f7218 -->|defined in| ba6fca27_7720_5839_0f92_bc2abb8db636
  7d328a86_10c6_b5c1_6390_36f4fffe9c14["parseCandidate()"]
  7d328a86_10c6_b5c1_6390_36f4fffe9c14 -->|calls| 2fcdeca3_897e_3e5c_c457_c32a9a3f7218
  5719096b_0f51_ab16_7fbd_4455f835804c["parseVariant()"]
  5719096b_0f51_ab16_7fbd_4455f835804c -->|calls| 2fcdeca3_897e_3e5c_c457_c32a9a3f7218
  style 2fcdeca3_897e_3e5c_c457_c32a9a3f7218 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/candidate.ts lines 861–905

function* findRoots(input: string, exists: (input: string) => boolean): Iterable<Root> {
  // If there is an exact match, then that's the root.
  if (exists(input)) {
    yield [input, null]
  }

  // Otherwise test every permutation of the input by iteratively removing
  // everything after the last dash.
  let idx = input.lastIndexOf('-')

  // Determine the root and value by testing permutations of the incoming input.
  //
  // In case of a candidate like `bg-red-500`, this looks like:
  //
  // `bg-red-500` -> No match
  // `bg-red`     -> No match
  // `bg`         -> Match
  while (idx > 0) {
    let maybeRoot = input.slice(0, idx)

    if (exists(maybeRoot)) {
      let root: Root = [maybeRoot, input.slice(idx + 1)]

      // If the leftover value is an empty string, it means that the value is an
      // invalid named value, e.g.: `bg-`. This makes the candidate invalid and we
      // can skip any further parsing.
      if (root[1] === '') break

      // Edge case: `@-…` is not valid as a variant or a utility so we want to
      // skip if an `@` is followed by a `-`. Otherwise `@-2xl:flex` and
      // `@-2xl:flex` would be considered the same.
      if (root[0] === '@' && exists('@') && input[idx] === '-') break

      yield root
    }

    idx = input.lastIndexOf('-', idx - 1)
  }

  // Try '@' variant after permutations. This allows things like `@max` of `@max-foo-bar`
  // to match before looking for `@`.
  if (input[0] === '@' && exists('@')) {
    yield ['@', input.slice(1)]
  }
}