fromAst() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 4 called by 2

Entity Profile

CompilerEngine→ AstTransformation→ fromAst() — tailwindcss Function Reference

Dependency Diagram

graph TD
  43c6ae59_76f1_6f53_dfa2_f3151fd259d1["fromAst()"]
  ad196438_55f7_af7b_1604_1d75c1c27d8e["buildPluginApi()"]
  ad196438_55f7_af7b_1604_1d75c1c27d8e -->|calls| 43c6ae59_76f1_6f53_dfa2_f3151fd259d1
  26086ff1_0d4f_fdb2_3fc4_d0c999f90a8c["parseCss()"]
  26086ff1_0d4f_fdb2_3fc4_d0c999f90a8c -->|calls| 43c6ae59_76f1_6f53_dfa2_f3151fd259d1
  e9d556bc_f22d_356c_1bd2_27442c34b5c7["walk()"]
  43c6ae59_76f1_6f53_dfa2_f3151fd259d1 -->|calls| e9d556bc_f22d_356c_1bd2_27442c34b5c7
  716eb081_2da3_764c_1bd4_89abf211e018["substituteAtVariant()"]
  43c6ae59_76f1_6f53_dfa2_f3151fd259d1 -->|calls| 716eb081_2da3_764c_1bd4_89abf211e018
  944e28d2_f1e8_a026_2bfd_32c96ffb9e0d["substituteAtSlot()"]
  43c6ae59_76f1_6f53_dfa2_f3151fd259d1 -->|calls| 944e28d2_f1e8_a026_2bfd_32c96ffb9e0d
  828655d7_fafb_f7a4_ba36_e6b356a78fbc["compoundsForSelectors()"]
  43c6ae59_76f1_6f53_dfa2_f3151fd259d1 -->|calls| 828655d7_fafb_f7a4_ba36_e6b356a78fbc
  style 43c6ae59_76f1_6f53_dfa2_f3151fd259d1 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) },
    )
  }