chore: updated unit test

Author: baiwusanyu-c

packages/core/inject/__test__/__snapshots__/inject-cssvars.spec.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`inject-cssvars > injectUseCssVarsOption > hasUseCssVars is false 1`] = `
 "import { useCssVars as _useCssVars } from \\"vue\\"
+import { unref as _unref } from \\"vue\\"
 const __default__ = {};const __injectCSSVars__ = () => {}
 
         const __setup__ = __default__.setup
@@ -13,7 +14,8 @@ const __default__ = {};const __injectCSSVars__ = () => {}
 `;
 
 exports[`inject-cssvars > injectUseCssVarsOption > hasUseCssVars is true 1`] = `
-"import { useCssVars as _useCssVars } from 'vue'
+"import { unref as _unref } from \\"vue\\"
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
 \\"color\\": (_ctx.color),
@@ -30,14 +32,16 @@ const _sfc_main = __default__"
 
 exports[`inject-cssvars > injectUseCssVarsSetup > hasUseCssVars is false 1`] = `
 "import { useCssVars as _useCssVars } from \\"vue\\"
+import { unref as _unref } from \\"vue\\"
 function setup() {
      _useCssVars((_ctx) => ({
       \\"1439c43b\\": color.value,
   }));}"
 `;
 
 exports[`inject-cssvars > injectUseCssVarsSetup > hasUseCssVars is true 1`] = `
-"function setup() {  _useCssVars((_ctx) => ({\\"1439c43b\\": color.value,
+"import { unref as _unref } from \\"vue\\"
+function setup() {  _useCssVars((_ctx) => ({\\"1439c43b\\": color.value,
     \\"229090c3-sassColor\\": sassColor.value
 })); }"
 `;

packages/core/inject/__test__/inject-css.spec.ts

@@ -12,7 +12,7 @@ describe('inject-css', () => {
   test('injectCSSOnServer: vbindVariableList is undefined', () => {
     const code = 'v-bind-m(foo)'
     const mgcStr = new MagicString(code)
-    expect(injectCSSOnServer(mgcStr, undefined, false).toString()).toBe(code)
+    expect(injectCSSOnServer(mgcStr, undefined, false).toString()).toBe('var(foo)')
   })
 
   test('removeStyleTagsAndContent: basic', () => {

packages/core/inject/__test__/inject-cssvars.spec.ts

@@ -117,7 +117,7 @@ describe('inject-cssvars', () => {
     test('isScriptSetup=true, has=false, hash=false, isRef=true', () => {
       const vbindVariableList = [{ value: 'color', has: false, hash: false, isRef: true }]
       const result = createCSSVarsObjCode(vbindVariableList as any, true)
-      expect(result).toContain('color.value')
+      expect(result).toContain('_ctx.color')
     })
 
     test('isScriptSetup=true, has=false, hash=true, isRef=false', () => {
@@ -130,7 +130,7 @@ describe('inject-cssvars', () => {
     test('isScriptSetup=true, has=false, hash=true, isRef=true', () => {
       const vbindVariableList = [{ value: 'color', has: false, hash: 'color', isRef: true }]
       const result = createCSSVarsObjCode(vbindVariableList as any, true)
-      expect(result).toContain('color.value')
+      expect(result).toContain('_ctx.color')
       expect(result).toContain('"color":')
     })
 
@@ -143,7 +143,7 @@ describe('inject-cssvars', () => {
     test('isScriptSetup=true, has=true, hash=false, isRef=true', () => {
       const vbindVariableList = [{ value: 'color', has: true, hash: false, isRef: true }]
       const result = createCSSVarsObjCode(vbindVariableList as any, true)
-      expect(result).toContain('color.value')
+      expect(result).toContain('_ctx.color')
     })
 
     test('isScriptSetup=true, has=true, hash=true, isRef=false', () => {
@@ -156,12 +156,12 @@ describe('inject-cssvars', () => {
     test('isScriptSetup=true, has=true, hash=true, isRef=true', () => {
       const vbindVariableList = [{ value: 'color', has: true, hash: 'color', isRef: true }]
       const result = createCSSVarsObjCode(vbindVariableList as any, true)
-      expect(result).toContain('color.value')
+      expect(result).toContain('_ctx.color')
       expect(result).toContain('"color":')
     })
 
     test('avoid repeated injections', () => {
-      const mockCode = '\n            "color": color.value,'
+      const mockCode = '\n            "color": _ctx.color,'
       const vbindVariableList = [{ value: 'color', has: true, hash: 'color', isRef: true }]
       const result = createCSSVarsObjCode(vbindVariableList as any, true, new MagicString(mockCode))
       expect(result).not.toBeTruthy()
@@ -274,7 +274,7 @@ describe('inject-cssvars', () => {
         true,
         parseRes,
         mgcStr)
-      expect(res.mgcStr.toString()).toContain('color.value')
+      expect(res.mgcStr.toString()).toContain('_ctx.color')
     })
 
     test('isScriptSetup=false hasUseCssVars=true', () => {
@@ -317,7 +317,7 @@ describe('inject-cssvars', () => {
         true,
         parseRes,
         mgcStr)
-      expect(res.mgcStr.toString()).toContain('color.value')
+      expect(res.mgcStr.toString()).toContain('_ctx.color')
       expect(res.mgcStr.toString()).toContain('_useCssVars')
     })
   })
@@ -340,7 +340,7 @@ describe('inject-cssvars', () => {
         true,
         parseRes,
         mgcStr)
-      expect(res.mgcStr.toString()).toContain('color.value')
+      expect(res.mgcStr.toString()).toContain('_ctx.color')
       expect(res.mgcStr.toString()).toContain('_useCssVars')
     })
 

packages/core/inject/inject-css.ts

@@ -1,43 +1,49 @@
 import hash from 'hash-sum'
 import { transformInjectCSS } from '../transform/transform-inject-css'
-import { parseImports } from '../parser'
+import {parseCssVars, parseImports} from '../parser'
 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";
+declare type PCSSVARARR = Array<{
+  start: number,
+  end: number,
+  offset: number,
+  variable: string}>
 export function injectCSSOnServer(
   mgcStr: MagicStringBase,
   vbindVariableList: TMatchVariable | undefined,
   isHMR: boolean,
 ) {
-  vbindVariableList && vbindVariableList.forEach((vbVar) => {
-    // 样式文件修改后，style热更新可能会先于 sfc 热更新运行，这里先设置hash
-    // 详见 packages/core/index.ts的 handleHotUpdate
-    if (!vbVar.hash && isHMR)
-      vbVar.hash = hash(vbVar.value + vbVar.has)
 
+  const pCssVarsArr:PCSSVARARR = []
+  parseCssVars([mgcStr.toString()], {
+    getIndex(start: number, end: number, offset, variable) {
+      pCssVarsArr.push({start, end, offset, variable})
+    }
+  })
 
+  pCssVarsArr.forEach(pca => {
+    if(vbindVariableList){
+      for (let i = 0; i < vbindVariableList.length; i++) {
+        const vbVar = vbindVariableList[i]
+        // 样式文件修改后，style热更新可能会先于 sfc 热更新运行，这里先设置hash
+        // 详见 packages/core/index.ts的 handleHotUpdate
+        if (!vbVar.hash && isHMR)
+          vbVar.hash = hash(vbVar.value + vbVar.has)
 
-    const viteCSSSgNode = ts.parse(mgcStr.toString()).root().find({
-      rule: {
-        matches: 'VITE_CSS',
-      },
-      utils: {
-        VITE_CSS: {
-          any: [
-            {
-              pattern: "const __vite__css = \"$VAL\""
-            },
-          ],
+        if(vbVar.value === pca.variable){
+          const offset = pca.offset
+          const start = pca.start + offset
+          const end = pca.end + offset
+          vbVar.hash && (mgcStr = mgcStr.overwrite(start, end, `--${vbVar.hash}`))
+          break
         }
       }
-    })
-    const content = viteCSSSgNode?.getMatch('VAL')
-    vbVar.hash && (mgcStr = mgcStr.replaceAll(`v-bind-m`, `var`))
-    vbVar.hash && (mgcStr = mgcStr.replaceAll(`${vbVar.value}`, `--${vbVar.hash}`))
-    debugger
+    }
   })
+
+  mgcStr = mgcStr.replace(/v-bind-m\s*\(/g, "var(");
   return mgcStr
 }
 

packages/core/inject/inject-cssvars.ts

@@ -89,7 +89,10 @@ export function injectUseCssVarsSetup(
   parserRes: IParseSFCRes,
 ) {
   let resMgcStr = mgcStr
-  resMgcStr = resMgcStr.prependLeft(0, importerUnref)
+  if(!resMgcStr.toString().includes('_unref')){
+    resMgcStr = resMgcStr.prependLeft(0, importerUnref)
+  }
+
   if (parserRes) {
     if (!hasUseCssVars
       && parserRes.setupBodyNode
@@ -115,18 +118,40 @@ export function injectUseCssVarsOption(
   parserRes: IParseSFCRes,
 ) {
   let resMgcStr = mgcStr
-  resMgcStr = resMgcStr.prependLeft(0, importerUnref)
+  if(!resMgcStr.toString().includes('_unref')){
+    resMgcStr = resMgcStr.prependLeft(0, importerUnref)
+  }
   if (!hasUseCssVars) {
-    resMgcStr = resMgcStr.replaceAll('const _sfc_main', 'const __default__')
-    resMgcStr = resMgcStr.replaceAll(
-      'function _sfc_render',
-      `${useCssVars}\n
+    if(resMgcStr.toString().includes('const _sfc_main')){
+      resMgcStr = resMgcStr.replaceAll('const _sfc_main', 'const __default__')
+    } else if(resMgcStr.toString().includes('import _sfc_main')){
+      resMgcStr = resMgcStr.replaceAll('import _sfc_main', 'import __default__')
+    } else {
+      resMgcStr = resMgcStr.replaceAll('export default {', 'const __default__ = {')
+    }
+
+    if(resMgcStr.toString().includes('function _sfc_render')){
+      resMgcStr = resMgcStr.replaceAll(
+        'function _sfc_render',
+        `${useCssVars}\n
         const __setup__ = __default__.setup
         __default__.setup = __setup__
           ? (props, ctx) => { __injectCSSVars__(); return __setup__(props, ctx) }
             : __injectCSSVars__
             const _sfc_main = __default__
             function _sfc_render`)
+    } else  if(resMgcStr.toString().includes('const __default__')){
+      resMgcStr = resMgcStr.prependRight(
+        resMgcStr.length(),
+        `${useCssVars}\n
+        const __setup__ = __default__.setup
+        __default__.setup = __setup__
+          ? (props, ctx) => { __injectCSSVars__(); return __setup__(props, ctx) }
+            : __injectCSSVars__
+            const _sfc_main = __default__
+            export default _sfc_main`)
+    }
+
     resMgcStr = resMgcStr.prependLeft(0, importer)
   } else if (hasUseCssVars
       && parserRes.useCSSVarsNode
@@ -211,7 +236,7 @@ export function createUseCssVarsCode(
 function genCSSVarsValue(
   node: SgNode,
   bindings?: BindingMetadata){
-  let res = '()'
+  let res = `_ctx.${node.text()}`
   if(bindings){
     const binding = bindings[node.text()]
     switch (binding){
@@ -236,14 +261,3 @@ function genCSSVarsValue(
   }
   return res
 }
-// TODO non-inline css - vite - dev 🚧
-// TODO non-inline bindingTypes - vite - build
-
-// TODO inline css - vite - dev
-// TODO inline bindingTypes - vite - build
-
-// TODO non-inline css - webpack - dev
-// TODO non-inline bindingTypes - webpack - build
-
-// TODO inline css - webpack - dev
-// TODO inline bindingTypes - webpack - build

packages/core/parser/parser-script-bindings.ts

@@ -4,34 +4,6 @@ import type { SgNode } from '@ast-grep/napi'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 import type { BindingMetadata } from '@vue/compiler-dom'
 
-const mpc = `const appAsd = () => 'red' // √
-const appTheme5 = { color: 'red' } // √
-const appTheme6 = () => 'red' // √
-const fn1 = function(){ // √
-  console.log('aa')
-}
-function f2(){ // √
-  console.log(1)
-}
-  
-const fooColor = appAsd() // √
-const appTheme3 = ref('red') // √
-const appTheme4 = reactive({ color: 'red' })  // √
-
-const a = 100// √
-const appTheme2 = 'blue'// √
-// const props = defineProps({color: {type: String}})  // √ !!
-interface Props {
-  msg?: string
-  labels?: string[]
-}
-
-const propss = withDefaults(defineProps<Props>(), { 
-  msg: 'hello', // √
-  labels: () => ['one', 'two'] // √
-})
-const { color } = propss // √`
-
 // TODO: unit test
 export function analyzeScriptBindings(descriptor: SFCDescriptor): BindingMetadata {
   const scriptSetupContent = descriptor.scriptSetup?.content || ''

packages/core/parser/parser-vbind-m.ts

@@ -60,23 +60,29 @@ const vBindRE = /v-bind-m\s*\(/g
 export function parseCssVars(
   styles: string[],
   hook?: {
-    getIndex(start: number, end: number): void
+    getIndex(
+      start: number,
+      end: number,
+      offset: number,
+      variable: string
+    ): void
   },
 ): string[] {
   const vars: string[] = []
   styles.forEach((style) => {
     let match: RegExpExecArray | null = null
-    // ignore v-bind() in comments /* ... */
+    // ignore v-bind-m() in comments /* ... */
     const content = style.replace(/\/\*([\s\S]*?)\*\//g, '')
-
+    const offset = style.length - content.length
     while ((match = vBindRE.exec(content))) {
       const start = match.index + match[0].length
       const end = lexBinding(content, start)
       if (end !== null) {
-        hook && hook.getIndex(start, end)
         const variable = normalizeExpression(content.slice(start, end))
-        if (!vars.includes(variable))
+        hook && hook.getIndex(start, end, offset, variable)
+        if (!vars.includes(variable)){
           vars.push(variable)
+        }
       }
     }
   })