parseModifier() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 2 called by 2

Entity Profile

Oxide→ Extractor→ parseModifier() — tailwindcss Function Reference

Dependency Diagram

graph TD
  ee401cf1_8419_7e3d_fd95_c624f65c3dba["parseModifier()"]
  ba6fca27_7720_5839_0f92_bc2abb8db636["candidate.ts"]
  ee401cf1_8419_7e3d_fd95_c624f65c3dba -->|defined in| ba6fca27_7720_5839_0f92_bc2abb8db636
  7d328a86_10c6_b5c1_6390_36f4fffe9c14["parseCandidate()"]
  7d328a86_10c6_b5c1_6390_36f4fffe9c14 -->|calls| ee401cf1_8419_7e3d_fd95_c624f65c3dba
  5719096b_0f51_ab16_7fbd_4455f835804c["parseVariant()"]
  5719096b_0f51_ab16_7fbd_4455f835804c -->|calls| ee401cf1_8419_7e3d_fd95_c624f65c3dba
  8e4634e2_7c1f_b6c1_18b2_bd8f97be3651["decodeArbitraryValue()"]
  ee401cf1_8419_7e3d_fd95_c624f65c3dba -->|calls| 8e4634e2_7c1f_b6c1_18b2_bd8f97be3651
  a9f719d7_a217_57d4_ebad_6e23afe26bca["isValidArbitrary()"]
  ee401cf1_8419_7e3d_fd95_c624f65c3dba -->|calls| a9f719d7_a217_57d4_ebad_6e23afe26bca
  style ee401cf1_8419_7e3d_fd95_c624f65c3dba 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,
  }
}