parseModifier() — tailwindcss Function Reference

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

Function typescript OxideEngine PreProcessors calls 2 called by 2

Entity Profile

OxideEngine→ PreProcessors→ parseModifier() — tailwindcss Function Reference

Dependency Diagram

graph TD
  0cad61e7_3577_6e5c_a58f_e653598f37ea["parseModifier()"]
  669e6a28_c71f_3c5e_9c53_915cede7da78["candidate.ts"]
  0cad61e7_3577_6e5c_a58f_e653598f37ea -->|defined in| 669e6a28_c71f_3c5e_9c53_915cede7da78
  d4b90da0_01b5_b21d_ff05_b37798744576["parseCandidate()"]
  d4b90da0_01b5_b21d_ff05_b37798744576 -->|calls| 0cad61e7_3577_6e5c_a58f_e653598f37ea
  7ba77268_84c7_7083_8f22_251a4a791d25["parseVariant()"]
  7ba77268_84c7_7083_8f22_251a4a791d25 -->|calls| 0cad61e7_3577_6e5c_a58f_e653598f37ea
  2e1adb5d_9a16_16d9_9e0d_e7ef80a3ec69["decodeArbitraryValue()"]
  0cad61e7_3577_6e5c_a58f_e653598f37ea -->|calls| 2e1adb5d_9a16_16d9_9e0d_e7ef80a3ec69
  872c3879_82c7_fd6e_ce14_258e27bc4877["isValidArbitrary()"]
  0cad61e7_3577_6e5c_a58f_e653598f37ea -->|calls| 872c3879_82c7_fd6e_ce14_258e27bc4877
  style 0cad61e7_3577_6e5c_a58f_e653598f37ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/candidate.ts lines 614–659

function parseModifier(modifier: string): CandidateModifier | null {
  if (modifier[0] === '[' && modifier[modifier.length - 1] === ']') {
    let arbitraryValue = decodeArbitraryValue(modifier.slice(1, -1))

    // Values can't contain `;` or `}` characters at the top-level.
    if (!isValidArbitrary(arbitraryValue)) return null

    // Empty arbitrary values are invalid. E.g.: `data-[]:`
    //                                                 ^^
    if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null

    return {
      kind: 'arbitrary',
      value: arbitraryValue,
    }
  }

  if (modifier[0] === '(' && modifier[modifier.length - 1] === ')') {
    // Drop the `(` and `)` characters
    modifier = modifier.slice(1, -1)

    // A modifier with `(…)` should always start with `--` since it
    // represents a CSS variable.
    if (modifier[0] !== '-' || modifier[1] !== '-') return null

    // Values can't contain `;` or `}` characters at the top-level.
    if (!isValidArbitrary(modifier)) return null

    // Wrap the value in `var(…)` to ensure that it is a valid CSS variable.
    modifier = `var(${modifier})`

    let arbitraryValue = decodeArbitraryValue(modifier)

    return {
      kind: 'arbitrary',
      value: arbitraryValue,
    }
  }

  if (!IS_VALID_NAMED_VALUE.test(modifier)) return null

  return {
    kind: 'named',
    value: modifier,
  }
}