Home / Function/ compoundsWith() — tailwindcss Function Reference

compoundsWith() — tailwindcss Function Reference

Architecture documentation for the compoundsWith() function in variants.ts from the tailwindcss codebase.

Function typescript Oxide Scanner calls 2 called by 1

Entity Profile

Dependency Diagram

graph TD
  f5fdf8c5_9ef2_b78b_1247_5ede58487336["compoundsWith()"]
  67c140cd_3928_7c30_7f6d_c67052da2a02["Variants"]
  f5fdf8c5_9ef2_b78b_1247_5ede58487336 -->|defined in| 67c140cd_3928_7c30_7f6d_c67052da2a02
  876035d0_94a8_cf2f_314a_d520aaae6e4b["createVariants()"]
  876035d0_94a8_cf2f_314a_d520aaae6e4b -->|calls| f5fdf8c5_9ef2_b78b_1247_5ede58487336
  553e63f4_f172_3689_a5a7_f8cf3b0bd124["get()"]
  f5fdf8c5_9ef2_b78b_1247_5ede58487336 -->|calls| 553e63f4_f172_3689_a5a7_f8cf3b0bd124
  ed286c50_134b_5b5b_ff58_76456160010c["compoundsForSelectors()"]
  f5fdf8c5_9ef2_b78b_1247_5ede58487336 -->|calls| ed286c50_134b_5b5b_ff58_76456160010c
  style f5fdf8c5_9ef2_b78b_1247_5ede58487336 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/variants.ts lines 160–193

  compoundsWith(parent: string, child: string | Variant) {
    let parentInfo = this.variants.get(parent)
    let childInfo =
      typeof child === 'string'
        ? this.variants.get(child)
        : child.kind === 'arbitrary'
          ? // This isn't strictly necessary but it'll allow us to bail quickly
            // when parsing candidates
            { compounds: compoundsForSelectors([child.selector]) }
          : this.variants.get(child.root)

    // One of the variants don't exist
    if (!parentInfo || !childInfo) return false

    // The parent variant is not a compound variant
    if (parentInfo.kind !== 'compound') return false

    // The variant `parent` may _compound with_ `child` if `parent` supports the
    // rules that `child` generates. We instead use static registration metadata
    // about what `parent` and `child` support instead of trying to apply the
    // variant at runtime to see if the rules are compatible.

    // The `child` variant cannot compound *ever*
    if (childInfo.compounds === Compounds.Never) return false

    // The `parent` variant cannot compound *ever*
    // This shouldn't ever happen because `kind` is `compound`
    if (parentInfo.compoundsWith === Compounds.Never) return false

    // Any rule that `child` may generate must be supported by `parent`
    if ((parentInfo.compoundsWith & childInfo.compounds) === 0) return false

    return true
  }

Domain

Subdomains

Called By

Frequently Asked Questions

What does compoundsWith() do?
compoundsWith() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/variants.ts.
Where is compoundsWith() defined?
compoundsWith() is defined in packages/tailwindcss/src/variants.ts at line 160.
What does compoundsWith() call?
compoundsWith() calls 2 function(s): compoundsForSelectors, get.
What calls compoundsWith()?
compoundsWith() is called by 1 function(s): createVariants.

Analyze Your Own Codebase

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

Try Supermodel Free