parseCssVars() — vue Function Reference

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

Function typescript SfcCompiler ScriptCompiler calls 2 called by 1

Entity Profile

SfcCompiler→ ScriptCompiler→ parseCssVars() — vue Function Reference

Dependency Diagram

graph TD
  9bf0fc0d_be28_66be_0264_6ad60cd848e2["parseCssVars()"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a["cssVars.ts"]
  9bf0fc0d_be28_66be_0264_6ad60cd848e2 -->|defined in| 445bc304_0400_2ae2_a33b_eaa1d5e1788a
  9805a097_f548_6bcf_28b2_a636f018a4de["parse()"]
  9805a097_f548_6bcf_28b2_a636f018a4de -->|calls| 9bf0fc0d_be28_66be_0264_6ad60cd848e2
  944a9dec_2883_0db9_e8db_6d29b47bbeae["lexBinding()"]
  9bf0fc0d_be28_66be_0264_6ad60cd848e2 -->|calls| 944a9dec_2883_0db9_e8db_6d29b47bbeae
  5aa38c1a_fe69_a4b2_ce67_a637263a98eb["normalizeExpression()"]
  9bf0fc0d_be28_66be_0264_6ad60cd848e2 -->|calls| 5aa38c1a_fe69_a4b2_ce67_a637263a98eb
  style 9bf0fc0d_be28_66be_0264_6ad60cd848e2 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
}