parseModifier() — tailwindcss Function Reference

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

Function typescript OxideCore Scanner calls 2 called by 2

Entity Profile

OxideCore→ Scanner→ parseModifier() — tailwindcss Function Reference

Dependency Diagram

graph TD
  62a1e81d_e57d_83b1_bc05_4b2210993980["parseModifier()"]
  0bec5ca9_74c8_dcc7_ec12_6404fb6493bd["parseCandidate()"]
  0bec5ca9_74c8_dcc7_ec12_6404fb6493bd -->|calls| 62a1e81d_e57d_83b1_bc05_4b2210993980
  ceb1ff41_a641_27dd_6289_7f779710b411["parseVariant()"]
  ceb1ff41_a641_27dd_6289_7f779710b411 -->|calls| 62a1e81d_e57d_83b1_bc05_4b2210993980
  fcaea65f_8651_c21e_ec5d_f042e1ab495e["decodeArbitraryValue()"]
  62a1e81d_e57d_83b1_bc05_4b2210993980 -->|calls| fcaea65f_8651_c21e_ec5d_f042e1ab495e
  d94e70b3_9bf8_d390_b32f_1a5bd7d409d9["isValidArbitrary()"]
  62a1e81d_e57d_83b1_bc05_4b2210993980 -->|calls| d94e70b3_9bf8_d390_b32f_1a5bd7d409d9
  style 62a1e81d_e57d_83b1_bc05_4b2210993980 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,
  }
}