chore: temp commit

Author: baiwusanyu-c

package.json

@@ -81,6 +81,7 @@
     "fs-extra": "^11.1.1",
     "hash-sum": "^2.0.0",
     "magic-string": "^0.30.0",
+    "@ast-grep/napi": "^0.6.3",
     "unplugin": "^1.3.1",
     "vue": "^3.2.47"
   },
@@ -93,6 +94,7 @@
     "hash-sum": "^2.0.0",
     "magic-string": "^0.30.0",
     "unplugin": "^1.3.1",
+    "@ast-grep/napi": "^0.6.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {

packages/core/hmr/hmr.ts

@@ -68,7 +68,6 @@ export function reloadSFCModules(
       const modules = server.moduleGraph.fileToModulesMap.get(sfcp) || new Set()
       const modulesList = setTArray(modules)
       for (let i = 0; i < modulesList.length; i++) {
-        // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
         if (modulesList[i].id && (modulesList[i].id as string).endsWith('.vue'))
           server.reloadModule(modulesList[i])
       }

packages/core/inject/inject-cssvars.ts

@@ -1,8 +1,28 @@
 import hash from 'hash-sum'
 import { type MagicStringBase } from 'magic-string-ast'
+import { ts } from '@ast-grep/napi'
+import MagicString from "magic-string";
 import type { IParseSFCRes, TMatchVariable } from '../parser'
 
 const importer = 'import { useCssVars as _useCssVars } from "vue"\n'
+
+function findIdentifierFromExp(cssContent: string) {
+  return ts.parse(cssContent).root().findAll({
+    rule: {
+      matches: 'cssComplexExpIdentifier',
+    },
+    utils:{
+      cssComplexExpIdentifier: {
+        any: [
+          {
+            kind: 'identifier',
+          },
+        ],
+      }
+    }
+  })
+}
+
 export const injectCSSVars = (
   vbindVariableList: TMatchVariable | undefined,
   isScriptSetup: boolean,
@@ -123,13 +143,28 @@ export function createCSSVarsObjCode(
     vbVar.hash = hashVal
     let varStr = ''
     // composition api 和 option api 一直帶 _ctx
-    if (!isScriptSetup) {
-      varStr = `_ctx.${vbVar.value}`
+    if (!isScriptSetup) { // non-inline
+      varStr = vbVar.value ? `(_ctx.${vbVar.value})` : '()'
     } else {
-      // vbVar.has === false， 要带上 _ctx.
-      varStr = vbVar.has ? vbVar.value : `_ctx.${vbVar.value}`
-      // ref 用.value
-      varStr = vbVar.isRef ? `${vbVar.value}.value` : varStr
+      if(!vbVar.has){
+        varStr = `_ctx.${vbVar.value}`
+      }else {
+        // TODO use BindingsType
+        debugger
+        const ms = new MagicString(vbVar.value)
+        // get Identifier sgNode
+        const cssBindKeySgNodes = findIdentifierFromExp(vbVar.value)
+        cssBindKeySgNodes.forEach((node) => {
+          const range = node.range()
+          ms.overwrite(
+            range.start.index,
+            range.end.index,
+            `(_ctx.${node.text()})`
+            // genCSSVarsValue(node, bindings, propsAlias),
+          )
+        })
+        varStr = ms.toString()
+      }
     }
     resCode = `\n            "${hashVal}": ${varStr},${resCode}`
   })

packages/core/runtime/handle-variable.ts

@@ -8,6 +8,7 @@ export function handleVBindVariable(
   id: string,
   ctx: IVueCSSVarsCtx,
 ) {
+  debugger
   const { descriptor } = parse(code)
   // let lang = 'js'
   // if (descriptor?.scriptSetup?.lang)
@@ -16,7 +17,6 @@ export function handleVBindVariable(
   // if (descriptor?.script?.lang)
   //   lang = descriptor.script.lang
 
-  // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
   // if (!JSX_TSX_REG.test(`.${lang}`)) {
   ctx.isScriptSetup = !!descriptor.scriptSetup
   // 分析 @import 的链路

play/vite/src/assets/css/foo.css

@@ -1,9 +1,26 @@
+/*
 #foo{
   color: v-bind-m(sassColor);
-  background: v-bind-m(sc2);
+  background: v-bind-m(bwsy);
   width: 200px;
   height: 30px;
 }
 p {
   color: v-bind-m(color);
 }
+*/
+
+p{
+  width: calc(v-bind-m(foo) - 3px);
+  height: calc(v-bind-m('foo') - 3px);
+  top: calc(v-bind-m(foo + 'px') - 3px);
+}
+div {
+  color: v-bind-m((a + b) / 2 + 'px' );
+}
+div {
+  color: v-bind-m    ((a + b) / 2 + 'px' );
+}
+p {
+  color: v-bind-m(((a + b)) / (2 * a));
+}

play/vite/src/views/App.vue

@@ -14,6 +14,9 @@ const appTheme4 = reactive({ color: 'red' })
 const appTheme5 = { color: 'red' }
 const appTheme6 = () => 'red'
 const compjsx = <div>test</div>
+let a = 100
+let b = 200
+let foo = 300
 </script>
 
 <script lang="jsx">