isValidFunctionalUtilityName() — tailwindcss Function Reference

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

Function typescript Oxide Extractor called by 1

Entity Profile

Oxide→ Extractor→ isValidFunctionalUtilityName() — tailwindcss Function Reference

Dependency Diagram

graph TD
  329b56fb_df00_1c0c_1dbb_f9821a1760ab["isValidFunctionalUtilityName()"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  329b56fb_df00_1c0c_1dbb_f9821a1760ab -->|defined in| ffde8eb7_7def_91ee_918c_be4f250f76a2
  1b775438_02d9_5178_6806_405c3c0b5328["createCssUtility()"]
  1b775438_02d9_5178_6806_405c3c0b5328 -->|calls| 329b56fb_df00_1c0c_1dbb_f9821a1760ab
  style 329b56fb_df00_1c0c_1dbb_f9821a1760ab 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
}