feat: more complete webpack, vue-cli support

Author: baiwusanyu-c

package.json

@@ -59,11 +59,12 @@
     "lint:fix": "eslint --fix ./ --ext .vue,.js,.ts,.jsx,.tsx,.json ",
     "dev": "pnpm run --filter @unplugin-vue-cssvars/build dev",
     "build": "pnpm run clean && pnpm run --filter @unplugin-vue-cssvars/build build",
+    "play:vite:server": "pnpm run --filter @unplugin-vue-cssvars/play-vite server",
     "play:vite:build": "pnpm run --filter @unplugin-vue-cssvars/play-vite build",
-    "play:vite:server": "pnpm run --filter @unplugin-vue-cssvars/play-vite dev",
     "play:vite:preview": "pnpm run --filter @unplugin-vue-cssvars/play-vite preview",
+    "play:webpack:server": "pnpm run --filter @unplugin-vue-cssvars/play-webpack server",
     "play:webpack:build": "pnpm run --filter @unplugin-vue-cssvars/play-webpack build",
-    "play:webpack:server": "pnpm run --filter @unplugin-vue-cssvars/play-webpack dev",
+    "play:webpack:preview": "pnpm run --filter @unplugin-vue-cssvars/play-webpack preview",
     "release": "bumpp package.json --commit --push --tag",
     "clean": "rimraf dist",
     "prepare": "npx simple-git-hooks",

packages/core/index.ts

@@ -47,7 +47,9 @@ const unplugin = createUnplugin<Options>(
           let mgcStr = new MagicString(code)
           try {
           // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
-            if (id.endsWith('.vue')) {
+            // webpack 时 使用 id.includes('vue&type=style') 判断
+            if (id.endsWith('.vue')
+                || (id.includes('vue&type=style') && framework === 'webpack')) {
               const { descriptor } = parse(code)
               const lang = descriptor?.script?.lang ?? 'js'
               // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
@@ -60,12 +62,11 @@ const unplugin = createUnplugin<Options>(
                 const variableName = getVariable(descriptor)
                 vbindVariableList.set(id, matchVariable(vbindVariableListByPath, variableName))
 
-                // TODO: webpack
-                // 'vite' | 'rollup' | 'esbuild'
-                if (!isServer && framework !== 'webpack' && framework !== 'rspack')
+                if (!isServer)
                   mgcStr = injectCssOnBuild(mgcStr, injectCSSContent, descriptor)
               }
             }
+
             return {
               code: mgcStr.toString(),
               get map() {
@@ -117,7 +118,7 @@ const unplugin = createUnplugin<Options>(
               function injectCSSVarsFn(idKey: string) {
                 const parseRes = parserCompiledSfc(code)
                 const injectRes = injectCSSVars(vbindVariableList.get(idKey), isScriptSetup, parseRes, mgcStr)
-                mgcStr = injectRes.mgcStr // .overwrite(0, mgcStr.length(), injectRes.code)
+                mgcStr = injectRes.mgcStr
                 injectRes.vbindVariableList && vbindVariableList.set(id, injectRes.vbindVariableList)
                 isHmring = false
               }
@@ -137,11 +138,9 @@ const unplugin = createUnplugin<Options>(
                 }
               }
 
-              //  TODO webpack
               if (framework === 'webpack') {
                 if (id.includes('vue&type=script')) {
                   const transId = id.split('?vue&type=script')[0]
-                  //  TODO 重复注入了
                   injectCSSVarsFn(transId)
                 }
                 const cssFMM = CSSFileModuleMap.get(id)

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`inject-cssvars > createCSSVarsObjCode > hasUseCssVars is false 1`] = `
+exports[`inject-cssvars > injectUseCssVarsOption > hasUseCssVars is false 1`] = `
 "import { useCssVars as _useCssVars } from \\"vue\\"
 const __default__ = {};const __injectCSSVars__ = () => {}
 
@@ -12,7 +12,7 @@ const __default__ = {};const __injectCSSVars__ = () => {}
             function _sfc_render(){}"
 `;
 
-exports[`inject-cssvars > createCSSVarsObjCode > hasUseCssVars is true 1`] = `
+exports[`inject-cssvars > injectUseCssVarsOption > hasUseCssVars is true 1`] = `
 "import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({

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

@@ -159,8 +159,15 @@ describe('inject-cssvars', () => {
       expect(result).toContain('color.value')
       expect(result).toContain('"color":')
     })
+
+    test('avoid repeated injections', () => {
+      const mockCode = '\n"color": color.value,'
+      const vbindVariableList = [{ value: 'color', has: true, hash: 'color', isRef: true }]
+      const result = createCSSVarsObjCode(vbindVariableList as any, true, new MagicString(mockCode))
+      expect(result).not.toBeTruthy()
+    })
   })
-  describe('createCSSVarsObjCode', () => {
+  describe('injectUseCssVarsOption', () => {
     test('hasUseCssVars is false', () => {
       const mockContent = 'const _sfc_main = {};function _sfc_render(){}'
       const mgcStr = new MagicString(mockContent)

packages/core/inject/inject-css.ts

@@ -16,7 +16,7 @@ export function injectCssOnServer(
     if (!vbVar.hash && isHmring)
       vbVar.hash = hash(vbVar.value + vbVar.has)
 
-    mgcStr = mgcStr.replaceAll(`v-bind-m(${vbVar.value})`, `var(--${vbVar.hash})`)
+    vbVar.hash && (mgcStr = mgcStr.replaceAll(`v-bind-m(${vbVar.value})`, `var(--${vbVar.hash})`))
   })
   return mgcStr
 }
@@ -38,7 +38,7 @@ export function injectCssOnBuild(
     const scoped = value.scoped ? 'scoped' : ''
     resCode = `<style lang="${lang}" ${scoped}> ${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)} </style>`
   })
-  mgcStr = removeStyleTagsAndContent(mgcStr)
+  resCode && (mgcStr = removeStyleTagsAndContent(mgcStr))
   return mgcStr.prependRight(mgcStr.length(), resCode)
 }
 

packages/core/inject/inject-cssvars.ts

@@ -32,7 +32,7 @@ export function injectCSSVarsOnServer(
 ) {
   let resMgcStr = mgcStr
   const hasUseCssVars = parserRes.hasCSSVars
-  const cssvarsObjectCode = createCSSVarsObjCode(vbindVariableList, isScriptSetup)
+  const cssvarsObjectCode = createCSSVarsObjCode(vbindVariableList, isScriptSetup, resMgcStr)
   // 1
   if (isScriptSetup) {
     // 1.1
@@ -115,6 +115,7 @@ export function injectUseCssVarsOption(
 export function createCSSVarsObjCode(
   vbindVariableList: TMatchVariable,
   isScriptSetup: boolean,
+  mgcStr?: MagicStringBase,
 ) {
   let resCode = ''
   vbindVariableList.forEach((vbVar) => {
@@ -131,8 +132,13 @@ export function createCSSVarsObjCode(
       // ref 用.value
       varStr = vbVar.isRef ? `${vbVar.value}.value` : varStr
     }
-    resCode = `"${hashVal}": ${varStr},\n  ${resCode}`
+    resCode = `\n            "${hashVal}": ${varStr},${resCode}`
   })
+
+  // 避免 webpack 重复注入
+  if (mgcStr && mgcStr.toString().includes(resCode))
+    return ''
+
   return resCode
 }
 

packages/core/parser/__test__/parser-compiled-sfc.spec.ts

@@ -181,9 +181,7 @@ describe('parserCompiledSfc', () => {
   test('should parse setupBodyNode when an Identifier named setup is encountered', () => {
     const code = `
     const comp = {
-      setup() {
-        console.log('Setting up...');
-        }
+      setup() {}
       }
     `
     const res = parserCompiledSfc(code)

play/vite/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --host",
+    "server": "vite --host",
     "build": "vite build",
     "preview": "vite preview --host"
   },

play/webpack/package.json

@@ -3,8 +3,9 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "server": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "preview": "cd dist && npx http-server -p 8081"
   },
 
   "devDependencies": {

play/webpack/src/App.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import Comp from '../../comp.vue'
-const color = ref('blue')
-const appAsd = () => 'red'
+import { ref } from 'vue'
+const color = ref('red')
+const appAsd = () => 'green'
 const fooColor = appAsd()
 </script>
 
@@ -16,5 +15,6 @@ const fooColor = appAsd()
 @import '@/assets/css/foo.css';
 #foo{
   background: v-bind(fooColor);
+  width: 300px;
 }
 </style>