Function parseModifier

packages/tailwindcss/src/candidate.ts:615–660

(modifier: string)

}

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

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

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

    return {
      kind: class="st">'arbitrary',
      value: arbitraryValue,
    }
  }

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

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

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

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

    let arbitraryValue = decodeArbitraryValue(modifier)

    return {
      kind: class="st">'arbitrary',
      value: arbitraryValue,
    }
  }

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

  return {
    kind: class="st">'named',
    value: modifier,
  }
}

export function parseVariant(variant: string, designSystem: DesignSystem): Variant | null {
  class="cm">// Arbitrary variants