refactor(compiler-sfc): parse css vars directly as part of sfc descriptor

packages/compiler-sfc/src/compileScript.ts

@@ -24,12 +24,7 @@ import {
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
-import {
+import { CSS_VARS_HELPER, genCssVarsCode, injectCssVarsCalls } from './cssVars'
-  CSS_VARS_HELPER,
-  parseCssVars,
-  genCssVarsCode,
-  injectCssVarsCalls
-} from './cssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 import { warnOnce } from './warn'
 
@@ -99,7 +94,7 @@ export function compileScript(
   }
 
   const scopeId = options.id ? options.id.replace(/^data-v-/, '') : ''
-  const cssVars = parseCssVars(sfc)
+  const cssVars = sfc.cssVars
   const scriptLang = script && script.lang
   const scriptSetupLang = scriptSetup && scriptSetup.lang
   const isTS = scriptLang === 'ts' || scriptSetupLang === 'ts'

packages/compiler-sfc/src/cssVars.ts

@@ -26,7 +26,7 @@ export function generateCssVars(
   id: string,
   isProd: boolean
 ): string {
-  return genCssVarsFromList(parseCssVars(sfc), id, isProd)
+  return genCssVarsFromList(sfc.cssVars, id, isProd)
 }
 
 function genCssVarsFromList(

packages/compiler-sfc/src/parse.ts

@@ -10,6 +10,7 @@ import * as CompilerDOM from '@vue/compiler-dom'
 import { RawSourceMap, SourceMapGenerator } from 'source-map'
 import { TemplateCompiler } from './compileTemplate'
 import { Statement } from '@babel/types'
+import { parseCssVars } from './cssVars'
 
 export interface SFCParseOptions {
   filename?: string
@@ -56,6 +57,7 @@ export interface SFCDescriptor {
   scriptSetup: SFCScriptBlock | null
   styles: SFCStyleBlock[]
   customBlocks: SFCBlock[]
+  cssVars: string[]
 }
 
 export interface SFCParseResult {
@@ -96,7 +98,8 @@ export function parse(
     script: null,
     scriptSetup: null,
     styles: [],
-    customBlocks: []
+    customBlocks: [],
+    cssVars: []
   }
 
   const errors: (CompilerError | SyntaxError)[] = []
@@ -209,6 +212,9 @@ export function parse(
     descriptor.customBlocks.forEach(genMap)
   }
 
+  // parse CSS vars
+  descriptor.cssVars = parseCssVars(descriptor)
+
   const result = {
     descriptor,
     errors