isValidStaticUtilityName() — tailwindcss Function Reference

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

Function typescript OxideEngine Extractor called by 1

Entity Profile

OxideEngine→ Extractor→ isValidStaticUtilityName() — tailwindcss Function Reference

Dependency Diagram

graph TD
  fcffa229_155b_fa67_4023_f4019f7075dc["isValidStaticUtilityName()"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  fcffa229_155b_fa67_4023_f4019f7075dc -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  75cdf0b0_3569_52fd_7186_577645fd4872["createCssUtility()"]
  75cdf0b0_3569_52fd_7186_577645fd4872 -->|calls| fcffa229_155b_fa67_4023_f4019f7075dc
  style fcffa229_155b_fa67_4023_f4019f7075dc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 6558–6645

export function isValidStaticUtilityName(name: string): boolean {
  let match = UTILITY_ROOT.exec(name)
  if (match === null) return false // Invalid root

  let root = match[0]
  let value = name.slice(root.length)

  // Root should not end in `-` if there is no value
  //
  // `tab-size-`
  //  ---------     Root
  if (value.length === 0 && root.endsWith('-')) {
    return false
  }

  // No remaining value is valid
  //
  // `tab-size`
  //  --------    Root
  if (value.length === 0) {
    return true
  }

  // Any valid (static) utility should be valid including:
  // - Bare values with `.`: `p-1.5`
  // - Bare values with `%`: `w-50%`
  // - With an embedded modifier: `text-xs/8`

  let seenSlash = false
  for (let i = 0; i < value.length; i++) {
    let charCode = value.charCodeAt(i)
    switch (charCode) {
      case PERCENT: {
        // A percentage is only valid at the end of the value
        if (i !== value.length - 1) return false

        // A percent is only valid when preceded by a digit. E.g.: `w-%` is invalid
        let previousChar = value[i - 1] || root[root.length - 1] || ''
        let previousCharCode = previousChar.charCodeAt(0)
        if (previousCharCode < ZERO || previousCharCode > NINE) return false
        break
      }

      case SLASH: {
        // A slash must be followed by at least 1 character. E.g.: `foo/` is invalid
        if (i === value.length - 1) return false

        // A slash can only appear once. E.g.: `foo/bar/baz` is invalid
        if (seenSlash) return false
        seenSlash = true
        break
      }

      case DOT: {
        // Dots are only allowed between digits. E.g.: `p-1.a` is invalid
        let previousChar = value[i - 1] || root[root.length - 1] || ''
        let previousCharCode = previousChar.charCodeAt(0)
        if (previousCharCode < ZERO || previousCharCode > NINE) return false

        let nextChar = value[i + 1] || ''
        let nextCharCode = nextChar.charCodeAt(0)
        if (nextCharCode < ZERO || nextCharCode > NINE) return false
        break
      }

      // Allowed special characters
      case UNDERSCORE:
      case DASH: {
        continue
      }

      default: {
        if (
          (charCode >= LOWER_A && charCode <= LOWER_Z) || // Allow a-z
          (charCode >= UPPER_A && charCode <= UPPER_Z) || // Allow A-Z
          (charCode >= ZERO && charCode <= NINE) // Allow 0-9
        ) {
          continue
        }

        // Everything else is invalid