parseVariantValue() — tailwindcss Function Reference

Architecture documentation for the parseVariantValue() function in plugin-api.ts from the tailwindcss codebase.

Function typescript CompilerEngine AstTransformation calls 3 called by 1

Entity Profile

CompilerEngine→ AstTransformation→ parseVariantValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3ec7100d_c372_c98a_2ba0_9ec5e70f401d["parseVariantValue()"]
  ad196438_55f7_af7b_1604_1d75c1c27d8e["buildPluginApi()"]
  ad196438_55f7_af7b_1604_1d75c1c27d8e -->|calls| 3ec7100d_c372_c98a_2ba0_9ec5e70f401d
  944e28d2_f1e8_a026_2bfd_32c96ffb9e0d["substituteAtSlot()"]
  3ec7100d_c372_c98a_2ba0_9ec5e70f401d -->|calls| 944e28d2_f1e8_a026_2bfd_32c96ffb9e0d
  08f33202_11d1_569a_e8df_de23eb987e2f["rule()"]
  3ec7100d_c372_c98a_2ba0_9ec5e70f401d -->|calls| 08f33202_11d1_569a_e8df_de23eb987e2f
  257c4715_dc91_0c7f_fce8_433a757d9ce6["parse()"]
  3ec7100d_c372_c98a_2ba0_9ec5e70f401d -->|calls| 257c4715_dc91_0c7f_fce8_433a757d9ce6
  style 3ec7100d_c372_c98a_2ba0_9ec5e70f401d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/plugin-api.ts lines 590–602

function parseVariantValue(resolved: string | string[], nodes: AstNode[]): AstNode[] {
  let resolvedArray = typeof resolved === 'string' ? [resolved] : resolved
  return resolvedArray.flatMap((r) => {
    if (r.trim().endsWith('}')) {
      let updatedCSS = r.replace('}', '{@slot}}')
      let ast = CSS.parse(updatedCSS)
      substituteAtSlot(ast, nodes)
      return ast
    } else {
      return rule(r, nodes)
    }
  })
}