modernizeArbitraryValuesVariant() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 1540–1911

function modernizeArbitraryValuesVariant(
  variant: Variant,
  options: InternalCanonicalizeOptions,
): Variant | Variant[] {
  let result = [variant]
  let designSystem = options.designSystem
  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY]

  let iterator = walkVariants(variant)
  for (let [variant, parent] of iterator) {
    // Forward modifier from the root to the compound variant
    if (
      variant.kind === 'compound' &&
      (variant.root === 'has' || variant.root === 'not' || variant.root === 'in')
    ) {
      if (variant.modifier !== null) {
        if ('modifier' in variant.variant) {
          variant.variant.modifier = variant.modifier
          variant.modifier = null
        }
      }
    }

    // Expecting an arbitrary variant
    if (variant.kind === 'arbitrary') {
      // Expecting a non-relative arbitrary variant
      if (variant.relative) continue

      let ast = SelectorParser.parse(variant.selector.trim())

      // Expecting a single selector node
      if (!isSingleSelector(ast)) continue

      // `[&>*]` can be replaced with `*`
      if (
        // Only top-level, so `has-[&>*]` is not supported
        parent === null &&
        // [&_>_*]:flex
        //  ^ ^ ^
        ast.length === 3 &&
        ast[0].kind === 'selector' &&
        ast[0].value === '&' &&
        ast[1].kind === 'combinator' &&
        ast[1].value.trim() === '>' &&
        ast[2].kind === 'selector' &&
        ast[2].value === '*'
      ) {
        replaceObject(variant, designSystem.parseVariant('*'))
        continue
      }

      // `[&_*]` can be replaced with `**`
      if (
        // Only top-level, so `has-[&_*]` is not supported
        parent === null &&
        // [&_*]:flex
        //  ^ ^
        ast.length === 3 &&
        ast[0].kind === 'selector' &&
        ast[0].value === '&' &&
        ast[1].kind === 'combinator' &&
        ast[1].value.trim() === '' && // space, but trimmed because there could be multiple spaces
        ast[2].kind === 'selector' &&
        ast[2].value === '*'
      ) {
        replaceObject(variant, designSystem.parseVariant('**'))
        continue
      }

      // `in-*` variant. If the selector ends with ` &`, we can convert it to an
      // `in-*` variant.
      //
      // E.g.: `[[data-visible]_&]` => `in-data-visible`
      if (
        // Only top-level, so `in-[&_[data-visible]]` is not supported
        parent === null &&
        // [[data-visible]___&]:flex
        //  ^^^^^^^^^^^^^^ ^ ^
        ast.length === 3 &&
        ast[1].kind === 'combinator' &&
        ast[1].value.trim() === '' && // Space, but trimmed because there could be multiple spaces