tailwindcss Architecture Docs
Home / Function/ arbitraryValueToBareValueVariant() — tailwindcss Function Reference

arbitraryValueToBareValueVariant() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 2

Entity Profile

Dependency Diagram

graph TD
  501c79ac_a9e3_eaff_6439_702972cbae47["arbitraryValueToBareValueVariant()"]
  5fbe9f30_4678_6100_0870_5216b48ccf87["walkVariants()"]
  501c79ac_a9e3_eaff_6439_702972cbae47 -->|calls| 5fbe9f30_4678_6100_0870_5216b48ccf87
  2a20ea29_c850_cd61_5600_aeebbe3dda66["segment()"]
  501c79ac_a9e3_eaff_6439_702972cbae47 -->|calls| 2a20ea29_c850_cd61_5600_aeebbe3dda66
  style 501c79ac_a9e3_eaff_6439_702972cbae47 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
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does arbitraryValueToBareValueVariant() do?
arbitraryValueToBareValueVariant() is a function in the tailwindcss codebase.
What does arbitraryValueToBareValueVariant() call?
arbitraryValueToBareValueVariant() calls 2 function(s): segment, walkVariants.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free