genVarName() — vue Function Reference

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

Function typescript CompilerSFC StyleProcessor called by 2

Entity Profile

CompilerSFC→ StyleProcessor→ genVarName() — vue Function Reference

Dependency Diagram

graph TD
  70a26c95_033f_abba_21d5_424f6b5b29ed["genVarName()"]
  b08241c7_738d_9e08_b885_fad82facd4f3["cssVars.ts"]
  70a26c95_033f_abba_21d5_424f6b5b29ed -->|defined in| b08241c7_738d_9e08_b885_fad82facd4f3
  0d52f3a2_1338_85fa_b96a_0301b63945bb["genCssVarsFromList()"]
  0d52f3a2_1338_85fa_b96a_0301b63945bb -->|calls| 70a26c95_033f_abba_21d5_424f6b5b29ed
  fb6267c8_5229_7c63_13f5_a76775258149["cssVarsPlugin()"]
  fb6267c8_5229_7c63_13f5_a76775258149 -->|calls| 70a26c95_033f_abba_21d5_424f6b5b29ed
  style 70a26c95_033f_abba_21d5_424f6b5b29ed 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, '_')}`
  }
}