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

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index c9f0932cffee559f362904ca25678e65861f9bc3..aa44b99ce389a0bf8bf04061d341b38dd14da72d 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/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 {
-  CSS_VARS_HELPER,
-  parseCssVars,
-  genCssVarsCode,
-  injectCssVarsCalls
-} from './cssVars'
+import { CSS_VARS_HELPER, 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'

diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index 7cfcce1f81002b79f3ab3bceded903c2f85ef7b2..2b6036fc53cab5eb6db56151f3b4ffa5ecb4082c 100644 (file)
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/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(

diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 7c44d5e2e9b3e06fc6d685043023b0985f90a5b4..4ec10b5eb74a56723ccaebf518327f2f6120cd96 100644 (file)
--- a/packages/compiler-sfc/src/parse.ts
+++ b/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