arbitraryValueToBareValueVariant() — tailwindcss Function Reference

Architecture documentation for the arbitraryValueToBareValueVariant() function in canonicalize-candidates.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit TemplateAnalysis calls 2

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ arbitraryValueToBareValueVariant() — tailwindcss Function Reference

Dependency Diagram

graph TD
  8d76f310_a05e_d669_34ef_f2cb3111dd9b["arbitraryValueToBareValueVariant()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  8d76f310_a05e_d669_34ef_f2cb3111dd9b -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  bb11a053_5909_cc72_a9a1_0f42f67e2bf6["walkVariants()"]
  8d76f310_a05e_d669_34ef_f2cb3111dd9b -->|calls| bb11a053_5909_cc72_a9a1_0f42f67e2bf6
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  8d76f310_a05e_d669_34ef_f2cb3111dd9b -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  style 8d76f310_a05e_d669_34ef_f2cb3111dd9b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 1393–1455

function arbitraryValueToBareValueVariant(variant: Variant): Variant | Variant[] {
  let iterator = walkVariants(variant)
  for (let [variant] of iterator) {
    // Convert `data-[selected]` to `data-selected`
    if (
      variant.kind === 'functional' &&
      variant.root === 'data' &&
      variant.value?.kind === 'arbitrary' &&
      !variant.value.value.includes('=')
    ) {
      variant.value = {
        kind: 'named',
        value: variant.value.value,
      }
    }

    // Convert `aria-[selected="true"]` to `aria-selected`
    else if (
      variant.kind === 'functional' &&
      variant.root === 'aria' &&
      variant.value?.kind === 'arbitrary' &&
      (variant.value.value.endsWith('=true') ||
        variant.value.value.endsWith('="true"') ||
        variant.value.value.endsWith("='true'"))
    ) {
      let [key, _value] = segment(variant.value.value, '=')
      if (
        // aria-[foo~="true"]
        key[key.length - 1] === '~' ||
        // aria-[foo|="true"]
        key[key.length - 1] === '|' ||
        // aria-[foo^="true"]
        key[key.length - 1] === '^' ||
        // aria-[foo$="true"]
        key[key.length - 1] === '$' ||
        // aria-[foo*="true"]
        key[key.length - 1] === '*'
      ) {
        continue
      }

      variant.value = {
        kind: 'named',
        value: variant.value.value.slice(0, variant.value.value.indexOf('=')),
      }
    }

    // Convert `supports-[gap]` to `supports-gap`
    else if (
      variant.kind === 'functional' &&
      variant.root === 'supports' &&
      variant.value?.kind === 'arbitrary' &&
      /^[a-z-][a-z0-9-]*$/i.test(variant.value.value)
    ) {
      variant.value = {
        kind: 'named',
        value: variant.value.value,
      }
    }
  }

  return variant
}