parseCssVars() — vue Function Reference

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

Function typescript CompilerSFC StyleProcessor calls 2 called by 1

Entity Profile

CompilerSFC→ StyleProcessor→ parseCssVars() — vue Function Reference

Dependency Diagram

graph TD
  e9d55bf3_a525_60d3_e948_546c1b25721c["parseCssVars()"]
  b08241c7_738d_9e08_b885_fad82facd4f3["cssVars.ts"]
  e9d55bf3_a525_60d3_e948_546c1b25721c -->|defined in| b08241c7_738d_9e08_b885_fad82facd4f3
  3c328c48_43e7_b764_1bc5_97a37b54ee62["parse()"]
  3c328c48_43e7_b764_1bc5_97a37b54ee62 -->|calls| e9d55bf3_a525_60d3_e948_546c1b25721c
  bcee3b43_06f3_99ea_946d_4925b36f7390["lexBinding()"]
  e9d55bf3_a525_60d3_e948_546c1b25721c -->|calls| bcee3b43_06f3_99ea_946d_4925b36f7390
  373a6809_1052_5ca2_3579_e3eb12f59263["normalizeExpression()"]
  e9d55bf3_a525_60d3_e948_546c1b25721c -->|calls| 373a6809_1052_5ca2_3579_e3eb12f59263
  style e9d55bf3_a525_60d3_e948_546c1b25721c 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
}