cssVarsPlugin() — vue Function Reference

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

Function typescript CompilerSFC StyleCompiler calls 3 called by 1

Entity Profile

CompilerSFC→ StyleCompiler→ cssVarsPlugin() — vue Function Reference

Dependency Diagram

graph TD
  47d4f007_da06_70a6_10d2_0b820bbb3a69["cssVarsPlugin()"]
  c2365a8e_f2bf_294a_1ce0_199342ddf20c["cssVars.ts"]
  47d4f007_da06_70a6_10d2_0b820bbb3a69 -->|defined in| c2365a8e_f2bf_294a_1ce0_199342ddf20c
  ce4e5034_ed7c_a735_d67a_5f80c077cd54["doCompileStyle()"]
  ce4e5034_ed7c_a735_d67a_5f80c077cd54 -->|calls| 47d4f007_da06_70a6_10d2_0b820bbb3a69
  6cb5f3e8_f841_b0d2_b48d_ab374c41631f["lexBinding()"]
  47d4f007_da06_70a6_10d2_0b820bbb3a69 -->|calls| 6cb5f3e8_f841_b0d2_b48d_ab374c41631f
  f4c48c3e_a0c4_a180_abd5_203004c54a5b["normalizeExpression()"]
  47d4f007_da06_70a6_10d2_0b820bbb3a69 -->|calls| f4c48c3e_a0c4_a180_abd5_203004c54a5b
  49703536_a313_9f1c_168a_b8cf1522a9d9["genVarName()"]
  47d4f007_da06_70a6_10d2_0b820bbb3a69 -->|calls| 49703536_a313_9f1c_168a_b8cf1522a9d9
  style 47d4f007_da06_70a6_10d2_0b820bbb3a69 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)
      }
    }
  }
}