fromAst() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 4 called by 2

Entity Profile

Oxide→ Extractor→ fromAst() — tailwindcss Function Reference

Dependency Diagram

graph TD
  63907b21_884d_e864_81c9_68f20a13c40b["fromAst()"]
  67c140cd_3928_7c30_7f6d_c67052da2a02["Variants"]
  63907b21_884d_e864_81c9_68f20a13c40b -->|defined in| 67c140cd_3928_7c30_7f6d_c67052da2a02
  31653e23_464a_3652_4a48_0c82332a92c4["buildPluginApi()"]
  31653e23_464a_3652_4a48_0c82332a92c4 -->|calls| 63907b21_884d_e864_81c9_68f20a13c40b
  f7f9b3da_5977_1aa6_3bcb_bfc607af4e8f["parseCss()"]
  f7f9b3da_5977_1aa6_3bcb_bfc607af4e8f -->|calls| 63907b21_884d_e864_81c9_68f20a13c40b
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  63907b21_884d_e864_81c9_68f20a13c40b -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  3a0ec0d5_1240_2a2d_bde3_145d361401fa["substituteAtVariant()"]
  63907b21_884d_e864_81c9_68f20a13c40b -->|calls| 3a0ec0d5_1240_2a2d_bde3_145d361401fa
  7d413960_20c6_4d5d_15db_b8648bd65a79["substituteAtSlot()"]
  63907b21_884d_e864_81c9_68f20a13c40b -->|calls| 7d413960_20c6_4d5d_15db_b8648bd65a79
  ed286c50_134b_5b5b_ff58_76456160010c["compoundsForSelectors()"]
  63907b21_884d_e864_81c9_68f20a13c40b -->|calls| ed286c50_134b_5b5b_ff58_76456160010c
  style 63907b21_884d_e864_81c9_68f20a13c40b 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) },
    )
  }