isValidFunctionalUtilityName() — tailwindcss Function Reference

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

Function typescript OxideEngine Extractor called by 1

Entity Profile

OxideEngine→ Extractor→ isValidFunctionalUtilityName() — tailwindcss Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 6647–6683

export function isValidFunctionalUtilityName(name: string): boolean {
  if (!name.endsWith('-*')) return false // Missing '-*' suffix
  name = name.slice(0, -2)

  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
  //           --   Suffix
  //
  // Because with default values, this could match `tab-size-` which is invalid.
  if (value.length === 0 && root.endsWith('-')) {
    return false
  }

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

  // But if there is a value remaining, it's invalid.
  //
  // E.g.: `tab-size-[…]-*`
  //
  // If we allow more characters, we can extend the validation here
  return false
}