genVarName() — vue Function Reference

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

Function typescript SfcCompiler ScriptCompiler called by 2

Entity Profile

SfcCompiler→ ScriptCompiler→ genVarName() — vue Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/compiler-sfc/src/cssVars.ts lines 22–28

function genVarName(id: string, raw: string, isProd: boolean): string {
  if (isProd) {
    return hash(id + raw)
  } else {
    return `${id}-${raw.replace(/([^\w-])/g, '_')}`
  }
}