parseModifier() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 2 called by 2

Entity Profile

CompilerEngine→ AstTransformation→ parseModifier() — tailwindcss Function Reference

Dependency Diagram

graph TD
  db928a82_c6a9_f0a7_efee_5436571565b0["parseModifier()"]
  53cf41fe_5903_d247_3bb3_38414ba7d631["parseCandidate()"]
  53cf41fe_5903_d247_3bb3_38414ba7d631 -->|calls| db928a82_c6a9_f0a7_efee_5436571565b0
  ca76ae68_c9c0_d977_a6d8_8ba86685bf25["parseVariant()"]
  ca76ae68_c9c0_d977_a6d8_8ba86685bf25 -->|calls| db928a82_c6a9_f0a7_efee_5436571565b0
  20489d8d_4ac1_6581_7ef8_8b43d79a6212["decodeArbitraryValue()"]
  db928a82_c6a9_f0a7_efee_5436571565b0 -->|calls| 20489d8d_4ac1_6581_7ef8_8b43d79a6212
  d744638c_ed47_aa8c_13df_82eac08886a4["isValidArbitrary()"]
  db928a82_c6a9_f0a7_efee_5436571565b0 -->|calls| d744638c_ed47_aa8c_13df_82eac08886a4
  style db928a82_c6a9_f0a7_efee_5436571565b0 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,
  }
}