fromAst() — tailwindcss Function Reference

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

Function typescript OxideEngine Extractor calls 4 called by 2

Entity Profile

OxideEngine→ Extractor→ fromAst() — tailwindcss Function Reference

Dependency Diagram

graph TD
  34338b14_fec6_6308_0fd7_15af8d4da01b["fromAst()"]
  ff716ee9_bd1e_1568_4100_c1d5b3ab8daa["Variants"]
  34338b14_fec6_6308_0fd7_15af8d4da01b -->|defined in| ff716ee9_bd1e_1568_4100_c1d5b3ab8daa
  2efa0a66_c375_c031_24ad_1f7509bb9b14["buildPluginApi()"]
  2efa0a66_c375_c031_24ad_1f7509bb9b14 -->|calls| 34338b14_fec6_6308_0fd7_15af8d4da01b
  3970218d_3d6c_e455_87cc_45b4a094f0e9["parseCss()"]
  3970218d_3d6c_e455_87cc_45b4a094f0e9 -->|calls| 34338b14_fec6_6308_0fd7_15af8d4da01b
  ed78da58_8727_ad98_120c_61f35cea357a["walk()"]
  34338b14_fec6_6308_0fd7_15af8d4da01b -->|calls| ed78da58_8727_ad98_120c_61f35cea357a
  0ec6110b_085e_e69b_cc4a_37d966dc5ace["substituteAtVariant()"]
  34338b14_fec6_6308_0fd7_15af8d4da01b -->|calls| 0ec6110b_085e_e69b_cc4a_37d966dc5ace
  852badc5_8e84_ea07_33ee_dc57e83d550c["substituteAtSlot()"]
  34338b14_fec6_6308_0fd7_15af8d4da01b -->|calls| 852badc5_8e84_ea07_33ee_dc57e83d550c
  759ab8d0_0e80_5789_e945_a5f814874e59["compoundsForSelectors()"]
  34338b14_fec6_6308_0fd7_15af8d4da01b -->|calls| 759ab8d0_0e80_5789_e945_a5f814874e59
  style 34338b14_fec6_6308_0fd7_15af8d4da01b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/variants.ts lines 86–110

  fromAst(name: string, ast: AstNode[], designSystem: DesignSystem) {
    let selectors: string[] = []

    let usesAtVariant = false
    walk(ast, (node) => {
      if (node.kind === 'rule') {
        selectors.push(node.selector)
      } else if (node.kind === 'at-rule' && node.name === '@variant') {
        usesAtVariant = true
      } else if (node.kind === 'at-rule' && node.name !== '@slot') {
        selectors.push(`${node.name} ${node.params}`)
      }
    })

    this.static(
      name,
      (r) => {
        let body = ast.map(cloneAstNode)
        if (usesAtVariant) substituteAtVariant(body, designSystem)
        substituteAtSlot(body, r.nodes)
        r.nodes = body
      },
      { compounds: compoundsForSelectors(selectors) },
    )
  }