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
  bb311256_82b1_7231_99fb_ad12d5f1f4fd["parseCssVars()"]
  9bec4c5e_d04b_64a6_018b_53a3e409ef44["parse()"]
  9bec4c5e_d04b_64a6_018b_53a3e409ef44 -->|calls| bb311256_82b1_7231_99fb_ad12d5f1f4fd
  7e70476b_cf10_48c1_139d_32af0a9fe2f0["lexBinding()"]
  bb311256_82b1_7231_99fb_ad12d5f1f4fd -->|calls| 7e70476b_cf10_48c1_139d_32af0a9fe2f0
  cc967931_36b6_7a69_868a_4c0e81c7f5ff["normalizeExpression()"]
  bb311256_82b1_7231_99fb_ad12d5f1f4fd -->|calls| cc967931_36b6_7a69_868a_4c0e81c7f5ff
  style bb311256_82b1_7231_99fb_ad12d5f1f4fd 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
}