chore: temp commit

Author: baiwusanyu-c

packages/core/inject/inject-css.ts

@@ -5,6 +5,7 @@ import type { MagicStringBase } from 'magic-string-ast'
 import type { TInjectCSSContent } from '../runtime/process-css'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 import type { TMatchVariable } from '../parser'
+import {ts} from "@ast-grep/napi";
 export function injectCSSOnServer(
   mgcStr: MagicStringBase,
   vbindVariableList: TMatchVariable | undefined,
@@ -16,7 +17,26 @@ export function injectCSSOnServer(
     if (!vbVar.hash && isHMR)
       vbVar.hash = hash(vbVar.value + vbVar.has)
 
-    vbVar.hash && (mgcStr = mgcStr.replaceAll(`v-bind-m(${vbVar.value})`, `var(--${vbVar.hash})`))
+
+
+    const viteCSSSgNode = ts.parse(mgcStr.toString()).root().find({
+      rule: {
+        matches: 'VITE_CSS',
+      },
+      utils: {
+        VITE_CSS: {
+          any: [
+            {
+              pattern: "const __vite__css = \"$VAL\""
+            },
+          ],
+        }
+      }
+    })
+    const content = viteCSSSgNode?.getMatch('VAL')
+    vbVar.hash && (mgcStr = mgcStr.replaceAll(`v-bind-m`, `var`))
+    vbVar.hash && (mgcStr = mgcStr.replaceAll(`${vbVar.value}`, `--${vbVar.hash}`))
+    debugger
   })
   return mgcStr
 }

packages/core/inject/inject-cssvars.ts

@@ -8,7 +8,7 @@ import {BindingMetadata, BindingTypes} from "@vue/compiler-dom";
 import {CSSVarsBindingTypes} from "../parser/utils";
 
 const importer = 'import { useCssVars as _useCssVars } from "vue"\n'
-
+const importerUnref = 'import { unref as _unref } from "vue"\n'
 function findIdentifierFromExp(cssContent: string) {
   return ts.parse(cssContent).root().findAll({
     rule: {
@@ -89,6 +89,7 @@ export function injectUseCssVarsSetup(
   parserRes: IParseSFCRes,
 ) {
   let resMgcStr = mgcStr
+  resMgcStr = resMgcStr.prependLeft(0, importerUnref)
   if (parserRes) {
     if (!hasUseCssVars
       && parserRes.setupBodyNode
@@ -114,6 +115,7 @@ export function injectUseCssVarsOption(
   parserRes: IParseSFCRes,
 ) {
   let resMgcStr = mgcStr
+  resMgcStr = resMgcStr.prependLeft(0, importerUnref)
   if (!hasUseCssVars) {
     resMgcStr = resMgcStr.replaceAll('const _sfc_main', 'const __default__')
     resMgcStr = resMgcStr.replaceAll(
@@ -152,7 +154,6 @@ export function createCSSVarsObjCode(
     const ms = new MagicString(vbVar.value)
     // get Identifier sgNode
     const cssBindKeySgNodes = findIdentifierFromExp(vbVar.value)
-    debugger
     cssBindKeySgNodes.forEach((node) => {
       const range = node.range()
       ms.overwrite(
@@ -235,14 +236,14 @@ function genCSSVarsValue(
   }
   return res
 }
-// TODO non-inline css - vite - dev
-// TODO inline bindingTypes - vite - dev
+// TODO non-inline css - vite - dev 🚧
+// TODO non-inline bindingTypes - vite - build
 
-// TODO non-inline css - vite - build
+// TODO inline css - vite - dev
 // TODO inline bindingTypes - vite - build
 
 // TODO non-inline css - webpack - dev
-// TODO inline bindingTypes - webpack - dev
+// TODO non-inline bindingTypes - webpack - build
 
-// TODO non-inline css - webpack - build
-// TODO inline bindingTypes - webpack - build
+// TODO inline css - webpack - dev
+// TODO inline bindingTypes - webpack - build

play/vite/src/views/App.vue

@@ -109,12 +109,12 @@ export default defineComponent({
 </script> -->
 
 <template>
-  <div id="foo" class="scss" @click="sassColor = 'red'">
-    <p>app122</p>
-    <compjsx />
-    <!--    <Comp />
-    <Comp2 /> -->
+  <div>
+    1
   </div>
+  <p>
+    1
+  </p>
 </template>
 
  <style lang="scss" scoped>