tailwindcss Architecture Docs
Home / File/ variants.ts — tailwindcss Source File

variants.ts — tailwindcss Source File

Architecture documentation for variants.ts, a typescript file in the tailwindcss codebase. 26 imports, 6 dependents.

File typescript Oxide Scanner 26 imports 6 dependents 7 functions 1 classes

Entity Profile

Dependency Diagram

graph LR
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58["variants.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  d09294cc_b29f_8605_b873_6cdc178ea33d["atRoot"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> d09294cc_b29f_8605_b873_6cdc178ea33d
  2f6881be_62d9_4b96_7331_a962ced095f7["atRule"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> 2f6881be_62d9_4b96_7331_a962ced095f7
  dbd80fa4_4b36_fb8e_fb6e_f2aec789aa6b["cloneAstNode"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> dbd80fa4_4b36_fb8e_fb6e_f2aec789aa6b
  1369a6dc_e395_347d_5d24_b88e22c5446d["decl"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> 1369a6dc_e395_347d_5d24_b88e22c5446d
  085cf56e_8188_afb1_04da_5ccd0fb7babc["rule"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> 085cf56e_8188_afb1_04da_5ccd0fb7babc
  2a22052d_f868_4f88_0a03_2033be58172d["styleRule"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> 2a22052d_f868_4f88_0a03_2033be58172d
  ba6fca27_7720_5839_0f92_bc2abb8db636["candidate.ts"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> ba6fca27_7720_5839_0f92_bc2abb8db636
  eea0ec96_6369_abc2_64b3_490868392e31["compile.ts"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> eea0ec96_6369_abc2_64b3_490868392e31
  74e35fd7_c887_0191_82e9_5c47ae4932d3["applyVariant"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> 74e35fd7_c887_0191_82e9_5c47ae4932d3
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  665aa4ed_d86e_30e5_80d5_cd56b8ca8b62["DesignSystem"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> 665aa4ed_d86e_30e5_80d5_cd56b8ca8b62
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d["theme.ts"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2["Theme"]
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58 --> e7a2e966_188e_28f5_d9d6_e54e27e0d0f2
  style b638ddb2_c057_1f3c_8a1a_4993ad80cd58 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Features } from '.'
import {
  atRoot,
  atRule,
  cloneAstNode,
  decl,
  rule,
  styleRule,
  type AstNode,
  type AtRule,
  type Rule,
  type StyleRule,
} from './ast'
import { type Variant } from './candidate'
import { applyVariant } from './compile'
import type { DesignSystem } from './design-system'
import type { Theme } from './theme'
import { compareBreakpoints } from './utils/compare-breakpoints'
import { DefaultMap } from './utils/default-map'
import { isPositiveInteger } from './utils/infer-data-type'
import { segment } from './utils/segment'
import { walk, WalkAction } from './walk'

export const IS_VALID_VARIANT_NAME = /^@?[a-z0-9][a-zA-Z0-9_-]*(?<![_-])$/

type VariantFn<T extends Variant['kind']> = (
  rule: Rule,
  variant: Extract<Variant, { kind: T }>,
) => null | void

type CompareFn = (a: Variant, z: Variant) => number

export const enum Compounds {
  Never = 0,
  AtRules = 1 << 0,
  StyleRules = 1 << 1,
}

export class Variants {
  public compareFns = new Map<number, CompareFn>()
  public variants = new Map<
    string,
    {
      kind: Variant['kind']
      order: number
      applyFn: VariantFn<any>

      // The kind of rules that are allowed in this compound variant
      compoundsWith: Compounds

      // The kind of rules that are generated by this variant
      // Determines whether or not a compound variant can use this variant
      compounds: Compounds
    }
  >()

  private completions = new Map<string, () => string[]>()

  /**
   * Registering a group of variants should result in the same sort number for
// ... (1176 more lines)

Domain

Subdomains

Functions

Classes

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does variants.ts do?
variants.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, Scanner subdomain.
What functions are defined in variants.ts?
variants.ts defines 7 function(s): a, compoundsForSelectors, createVariants, quoteAttributeValue, rule, substituteAtSlot, substituteAtVariant.
What does variants.ts depend on?
variants.ts imports 26 module(s): ., DefaultMap, DesignSystem, Theme, WalkAction, applyVariant, ast.ts, atRoot, and 18 more.
What files import variants.ts?
variants.ts is imported by 6 file(s): candidate.test.ts, compile.ts, design-system.ts, index.ts, plugin-api.ts, variants.test.ts.
Where is variants.ts in the architecture?
variants.ts is located at packages/tailwindcss/src/variants.ts (domain: Oxide, subdomain: Scanner, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free