Home / Function/ genVarName() — vue Function Reference

genVarName() — vue Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  1987be0f_0c6f_12e4_2ea1_4eb4263855c4["genVarName()"]
  66c86784_b39a_5ff8_ed39_f2b96784a18f["genCssVarsFromList()"]
  66c86784_b39a_5ff8_ed39_f2b96784a18f -->|calls| 1987be0f_0c6f_12e4_2ea1_4eb4263855c4
  6d0c1bb9_8891_e648_20f9_17e9dfeb6607["cssVarsPlugin()"]
  6d0c1bb9_8891_e648_20f9_17e9dfeb6607 -->|calls| 1987be0f_0c6f_12e4_2ea1_4eb4263855c4
  style 1987be0f_0c6f_12e4_2ea1_4eb4263855c4 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, '_')}`
  }
}

Domain

Subdomains

Frequently Asked Questions

What does genVarName() do?
genVarName() is a function in the vue codebase.
What calls genVarName()?
genVarName() is called by 2 function(s): cssVarsPlugin, genCssVarsFromList.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free