arbitraryValueToBareValueVariant() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 2

Entity Profile

Oxide→ Extractor→ arbitraryValueToBareValueVariant() — tailwindcss Function Reference

Dependency Diagram

graph TD
  8bf0bcc8_ce2f_5951_bedb_88d75c61d3f0["arbitraryValueToBareValueVariant()"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  8bf0bcc8_ce2f_5951_bedb_88d75c61d3f0 -->|defined in| f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  0d3d890d_0584_dd18_a64e_8e1494d409e5["walkVariants()"]
  8bf0bcc8_ce2f_5951_bedb_88d75c61d3f0 -->|calls| 0d3d890d_0584_dd18_a64e_8e1494d409e5
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"]
  8bf0bcc8_ce2f_5951_bedb_88d75c61d3f0 -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  style 8bf0bcc8_ce2f_5951_bedb_88d75c61d3f0 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
}