parseCssVars() — vue Function Reference

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

Function typescript CompilerSFC ScriptCompiler calls 2 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ parseCssVars() — vue Function Reference

Dependency Diagram

graph TD
  b1640b15_d391_0cad_5859_5943e95998a9["parseCssVars()"]
  6ab27e01_6eaf_ac42_26b1_65aa8211cc0d["parse()"]
  6ab27e01_6eaf_ac42_26b1_65aa8211cc0d -->|calls| b1640b15_d391_0cad_5859_5943e95998a9
  8311b2cf_b53e_2e33_2ec7_c3c9be5abac7["lexBinding()"]
  b1640b15_d391_0cad_5859_5943e95998a9 -->|calls| 8311b2cf_b53e_2e33_2ec7_c3c9be5abac7
  7f13dd4c_590f_8b12_3290_18226dd54156["normalizeExpression()"]
  b1640b15_d391_0cad_5859_5943e95998a9 -->|calls| 7f13dd4c_590f_8b12_3290_18226dd54156
  style b1640b15_d391_0cad_5859_5943e95998a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/cssVars.ts lines 43–61

export function parseCssVars(sfc: SFCDescriptor): string[] {
  const vars: string[] = []
  sfc.styles.forEach(style => {
    let match
    // ignore v-bind() in comments /* ... */
    const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
    while ((match = vBindRE.exec(content))) {
      const start = match.index + match[0].length
      const end = lexBinding(content, start)
      if (end !== null) {
        const variable = normalizeExpression(content.slice(start, end))
        if (!vars.includes(variable)) {
          vars.push(variable)
        }
      }
    }
  })
  return vars
}