cssVarsPlugin() — vue Function Reference

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

Function typescript CompilerSFC StyleProcessor calls 3 called by 1

Entity Profile

CompilerSFC→ StyleProcessor→ cssVarsPlugin() — vue Function Reference

Dependency Diagram

graph TD
  fb6267c8_5229_7c63_13f5_a76775258149["cssVarsPlugin()"]
  b08241c7_738d_9e08_b885_fad82facd4f3["cssVars.ts"]
  fb6267c8_5229_7c63_13f5_a76775258149 -->|defined in| b08241c7_738d_9e08_b885_fad82facd4f3
  e630ee87_e220_092a_592c_f7079f566b16["doCompileStyle()"]
  e630ee87_e220_092a_592c_f7079f566b16 -->|calls| fb6267c8_5229_7c63_13f5_a76775258149
  bcee3b43_06f3_99ea_946d_4925b36f7390["lexBinding()"]
  fb6267c8_5229_7c63_13f5_a76775258149 -->|calls| bcee3b43_06f3_99ea_946d_4925b36f7390
  373a6809_1052_5ca2_3579_e3eb12f59263["normalizeExpression()"]
  fb6267c8_5229_7c63_13f5_a76775258149 -->|calls| 373a6809_1052_5ca2_3579_e3eb12f59263
  70a26c95_033f_abba_21d5_424f6b5b29ed["genVarName()"]
  fb6267c8_5229_7c63_13f5_a76775258149 -->|calls| 70a26c95_033f_abba_21d5_424f6b5b29ed
  style fb6267c8_5229_7c63_13f5_a76775258149 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)
      }
    }
  }
}