cssVarsPlugin() — vue Function Reference

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

Function typescript CompilerSFC ScriptCompiler calls 3 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ cssVarsPlugin() — vue Function Reference

Dependency Diagram

graph TD
  676a6c5d_6ef9_a6b7_ef84_83c833d8a8d4["cssVarsPlugin()"]
  8a7120c7_ffca_260b_06e7_d97501f34abf["doCompileStyle()"]
  8a7120c7_ffca_260b_06e7_d97501f34abf -->|calls| 676a6c5d_6ef9_a6b7_ef84_83c833d8a8d4
  7e70476b_cf10_48c1_139d_32af0a9fe2f0["lexBinding()"]
  676a6c5d_6ef9_a6b7_ef84_83c833d8a8d4 -->|calls| 7e70476b_cf10_48c1_139d_32af0a9fe2f0
  cc967931_36b6_7a69_868a_4c0e81c7f5ff["normalizeExpression()"]
  676a6c5d_6ef9_a6b7_ef84_83c833d8a8d4 -->|calls| cc967931_36b6_7a69_868a_4c0e81c7f5ff
  ca02b3b0_5d12_751b_ef96_78b58db03475["genVarName()"]
  676a6c5d_6ef9_a6b7_ef84_83c833d8a8d4 -->|calls| ca02b3b0_5d12_751b_ef96_78b58db03475
  style 676a6c5d_6ef9_a6b7_ef84_83c833d8a8d4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/cssVars.ts lines 112–139

export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
  const { id, isProd } = opts!
  return {
    postcssPlugin: 'vue-sfc-vars',
    Declaration(decl) {
      // rewrite CSS variables
      const value = decl.value
      if (vBindRE.test(value)) {
        vBindRE.lastIndex = 0
        let transformed = ''
        let lastIndex = 0
        let match
        while ((match = vBindRE.exec(value))) {
          const start = match.index + match[0].length
          const end = lexBinding(value, start)
          if (end !== null) {
            const variable = normalizeExpression(value.slice(start, end))
            transformed +=
              value.slice(lastIndex, match.index) +
              `var(--${genVarName(id, variable, isProd)})`
            lastIndex = end + 1
          }
        }
        decl.value = transformed + value.slice(lastIndex)
      }
    }
  }
}