isValidFunctionalUtilityName() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation called by 1

Entity Profile

CompilerEngine→ AstTransformation→ isValidFunctionalUtilityName() — tailwindcss Function Reference

Dependency Diagram

graph TD
  a5f79231_4cd8_b5f8_d867_2482aada99fc["isValidFunctionalUtilityName()"]
  5c9381d6_815c_d899_eaab_849d755be47e["createCssUtility()"]
  5c9381d6_815c_d899_eaab_849d755be47e -->|calls| a5f79231_4cd8_b5f8_d867_2482aada99fc
  style a5f79231_4cd8_b5f8_d867_2482aada99fc 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
}