fromAst() — tailwindcss Function Reference

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

Function typescript OxideCore Extractor calls 4 called by 2

Entity Profile

OxideCore→ Extractor→ fromAst() — tailwindcss Function Reference

Dependency Diagram

graph TD
  24c6462c_8059_28e8_4bfc_8d04c9da1c7e["fromAst()"]
  3b6a2079_7f12_42cd_ba9f_a57ecec4366d["buildPluginApi()"]
  3b6a2079_7f12_42cd_ba9f_a57ecec4366d -->|calls| 24c6462c_8059_28e8_4bfc_8d04c9da1c7e
  95cb326e_6b59_0903_0c96_d221fca5c2b1["parseCss()"]
  95cb326e_6b59_0903_0c96_d221fca5c2b1 -->|calls| 24c6462c_8059_28e8_4bfc_8d04c9da1c7e
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  24c6462c_8059_28e8_4bfc_8d04c9da1c7e -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  101ae1c2_eee3_3589_2aa3_922a6a429d4f["substituteAtVariant()"]
  24c6462c_8059_28e8_4bfc_8d04c9da1c7e -->|calls| 101ae1c2_eee3_3589_2aa3_922a6a429d4f
  6234f4ec_58fd_3072_8261_ee063767d897["substituteAtSlot()"]
  24c6462c_8059_28e8_4bfc_8d04c9da1c7e -->|calls| 6234f4ec_58fd_3072_8261_ee063767d897
  3a207375_0c4d_0a9e_f1f0_05b2b56ac8a7["compoundsForSelectors()"]
  24c6462c_8059_28e8_4bfc_8d04c9da1c7e -->|calls| 3a207375_0c4d_0a9e_f1f0_05b2b56ac8a7
  style 24c6462c_8059_28e8_4bfc_8d04c9da1c7e 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) },
    )
  }