genCssVarsFromList() — vue Function Reference

Architecture documentation for the genCssVarsFromList() function in cssVars.ts from the vue codebase.

Function typescript SfcCompiler ScriptCompiler calls 1 called by 1

Entity Profile

SfcCompiler→ ScriptCompiler→ genCssVarsFromList() — vue Function Reference

Dependency Diagram

graph TD
  4956d7a4_57cd_9920_59d3_5a0e12330d49["genCssVarsFromList()"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a["cssVars.ts"]
  4956d7a4_57cd_9920_59d3_5a0e12330d49 -->|defined in| 445bc304_0400_2ae2_a33b_eaa1d5e1788a
  ff14d2b7_217f_7b2c_a8cf_e648b225c4b8["genCssVarsCode()"]
  ff14d2b7_217f_7b2c_a8cf_e648b225c4b8 -->|calls| 4956d7a4_57cd_9920_59d3_5a0e12330d49
  c7a5bd07_e6c6_e8f7_3779_162e247fc985["genVarName()"]
  4956d7a4_57cd_9920_59d3_5a0e12330d49 -->|calls| c7a5bd07_e6c6_e8f7_3779_162e247fc985
  style 4956d7a4_57cd_9920_59d3_5a0e12330d49 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/cssVars.ts lines 9–20

export function genCssVarsFromList(
  vars: string[],
  id: string,
  isProd: boolean,
  isSSR = false
): string {
  return `{\n  ${vars
    .map(
      key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
    )
    .join(',\n  ')}\n}`
}