11import hash from 'hash-sum'
22import { type MagicStringBase } from 'magic-string-ast'
33import { ts } from '@ast-grep/napi'
4+ import type { SgNode } from '@ast-grep/napi'
45import MagicString from 'magic-string'
56import type { IParseSFCRes , TMatchVariable } from '../parser'
7+ import { BindingMetadata , BindingTypes } from "@vue/compiler-dom" ;
8+ import { CSSVarsBindingTypes } from "../parser/utils" ;
69
710const importer = 'import { useCssVars as _useCssVars } from "vue"\n'
811
@@ -28,9 +31,10 @@ export const injectCSSVars = (
2831 isScriptSetup : boolean ,
2932 parserRes : IParseSFCRes ,
3033 mgcStr : MagicStringBase ,
34+ bindings ?: BindingMetadata
3135) => {
3236 if ( ! vbindVariableList || vbindVariableList . length === 0 ) return { vbindVariableList, mgcStr }
33- return injectCSSVarsOnServer ( vbindVariableList , isScriptSetup , parserRes , mgcStr )
37+ return injectCSSVarsOnServer ( vbindVariableList , isScriptSetup , parserRes , mgcStr , bindings )
3438}
3539
3640// 分为三种种情况
@@ -48,10 +52,11 @@ export function injectCSSVarsOnServer(
4852 isScriptSetup : boolean ,
4953 parserRes : IParseSFCRes ,
5054 mgcStr : MagicStringBase ,
55+ bindings ?: BindingMetadata
5156) {
5257 let resMgcStr = mgcStr
5358 const hasUseCssVars = parserRes . hasCSSVars
54- const cssvarsObjectCode = createCSSVarsObjCode ( vbindVariableList , isScriptSetup , resMgcStr )
59+ const cssvarsObjectCode = createCSSVarsObjCode ( vbindVariableList , isScriptSetup , resMgcStr , bindings )
5560 // 1
5661 if ( isScriptSetup ) {
5762 // 1.1
@@ -135,6 +140,7 @@ export function createCSSVarsObjCode(
135140 vbindVariableList : TMatchVariable ,
136141 isScriptSetup : boolean ,
137142 mgcStr ?: MagicStringBase ,
143+ bindings ?: BindingMetadata
138144) {
139145 let resCode = ''
140146 vbindVariableList . forEach ( ( vbVar ) => {
@@ -146,14 +152,16 @@ export function createCSSVarsObjCode(
146152 const ms = new MagicString ( vbVar . value )
147153 // get Identifier sgNode
148154 const cssBindKeySgNodes = findIdentifierFromExp ( vbVar . value )
155+ debugger
149156 cssBindKeySgNodes . forEach ( ( node ) => {
150157 const range = node . range ( )
151158 ms . overwrite (
152159 range . start . index ,
153160 range . end . index ,
154161 // non-inline composition api 和 option api 一直帶 _ctx
155- ! isScriptSetup ? `(_ctx.${ node . text ( ) } )` : '' ,
156- // genCSSVarsValue(node, bindings, propsAlias),
162+ ! isScriptSetup ?
163+ `(_ctx.${ node . text ( ) } )` :
164+ genCSSVarsValue ( node , bindings ) ,
157165 )
158166 } )
159167 varStr = ms . toString ( )
@@ -198,6 +206,35 @@ export function createUseCssVarsCode(
198206 return resCode
199207}
200208
209+ // TODO unit test
210+ function genCSSVarsValue (
211+ node : SgNode ,
212+ bindings ?: BindingMetadata ) {
213+ let res = '()'
214+ if ( bindings ) {
215+ const binding = bindings [ node . text ( ) ]
216+ switch ( binding ) {
217+ case CSSVarsBindingTypes . PROPS :
218+ case CSSVarsBindingTypes . SETUP_CONST :
219+ case CSSVarsBindingTypes . SETUP_REACTIVE_CONST :
220+ case CSSVarsBindingTypes . LITERAL_CONST :
221+ res = node . text ( )
222+ break
223+ case CSSVarsBindingTypes . SETUP_MAYBE_REF :
224+ case CSSVarsBindingTypes . SETUP_LET :
225+ res = `_unref(${ node . text ( ) } )`
226+ break
227+ // The `vineProp` variable is inconsistent with vue here, and vue is `PROPS`
228+ // Because vine compilation will use `toRefs` processing
229+ case CSSVarsBindingTypes . SETUP_REF :
230+ res = `${ node . text ( ) } .value`
231+ break
232+ default :
233+ res = `_ctx.${ node . text ( ) } `
234+ }
235+ }
236+ return res
237+ }
201238// TODO non-inline css - vite - dev
202239// TODO inline bindingTypes - vite - dev
203240
0 commit comments