feat: support vite hmr

Author: baiwusanyu-c

packages/core/index.ts

@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin'
-import { NAME } from '@unplugin-vue-cssvars/utils'
+import {NAME, setTArray, SUPPORT_FILE_REG} from '@unplugin-vue-cssvars/utils'
 import { createFilter } from '@rollup/pluginutils'
 import { parse } from '@vue/compiler-sfc'
 import chalk from 'chalk'
@@ -15,7 +15,7 @@ import {
 import type { ResolvedConfig } from 'vite'
 import type { TMatchVariable } from './parser'
 import type { Options } from './types'
-
+// TODO: webpack hmr
 const unplugin = createUnplugin<Options>(
   (options: Options = {}): any => {
     const userOptions = initOption(options)
@@ -25,15 +25,14 @@ const unplugin = createUnplugin<Options>(
     )
     // 预处理 css 文件
     const CSSFileModuleMap = preProcessCSS(userOptions, userOptions.alias)
-    const vbindVariableList = new Map<string, {
-      TMatchVariable: TMatchVariable
-      orgTransformCode?: string }>()
+    const vbindVariableList = new Map<string, TMatchVariable>()
     let isScriptSetup = false
     if (userOptions.server === undefined) {
       console.warn(chalk.yellowBright.bold(`[${NAME}] The server of option is not set, you need to specify whether you are using the development server or building the project`))
       console.warn(chalk.yellowBright.bold(`[${NAME}] See: https://github.com/baiwusanyu-c/unplugin-vue-cssvars/blob/master/README.md#option`))
     }
     let isServer = !!userOptions.server
+    let isHmring = false
     return [
       {
         name: NAME,
@@ -52,9 +51,7 @@ const unplugin = createUnplugin<Options>(
                 injectCSSContent,
               } = getVBindVariableListByPath(descriptor, id, CSSFileModuleMap, isServer, userOptions.alias)
               const variableName = getVariable(descriptor)
-              vbindVariableList.set(id, {
-                TMatchVariable: matchVariable(vbindVariableListByPath, variableName),
-              })
+              vbindVariableList.set(id, matchVariable(vbindVariableListByPath, variableName))
 
               if (!isServer)
                 code = injectCssOnBuild(code, injectCSSContent, descriptor)
@@ -73,8 +70,29 @@ const unplugin = createUnplugin<Options>(
               isServer = config.command === 'serve'
           },
           handleHotUpdate(hmr) {
-            if (hmr.file.endsWith('foo.css'))
-              return hmr.modules
+            // TODO refactor
+            if (SUPPORT_FILE_REG.test(hmr.file)) {
+              isHmring = true
+              const sfcModulesPathList = CSSFileModuleMap.get(hmr.file)
+              if (sfcModulesPathList && sfcModulesPathList.sfcPath) {
+                const ls = setTArray(sfcModulesPathList.sfcPath)
+                ls.forEach((sfcp) => {
+                  const modules = hmr.server.moduleGraph.fileToModulesMap.get(sfcp)
+                  // update CSSFileModuleMap
+                  const updatedCSSModules = preProcessCSS(userOptions, userOptions.alias, [hmr.file]).get(hmr.file)
+                  if (updatedCSSModules)
+                    CSSFileModuleMap.set(hmr.file, updatedCSSModules)
+
+                  // update sfc
+                  const modulesList = setTArray(modules)
+                  for (let i = 0; i < modulesList.length; i++) {
+                    // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
+                    if (modulesList[i].id.endsWith('.vue'))
+                      hmr.server.reloadModule(modulesList[i])
+                  }
+                })
+              }
+            }
           },
         },
       },
@@ -87,22 +105,13 @@ const unplugin = createUnplugin<Options>(
             // transform in dev
             if (isServer) {
               if (id.endsWith('.vue')) {
-                const orgCode = code
-                // console.log('########', id)
-                code = code.replaceAll('if (!mod)', 'console.log(mod)\n if (!mod)')
-                // console.log(code)
-                const injectRes = injectCSSVars(code, vbindVariableList.get(id).TMatchVariable, isScriptSetup)
+                const injectRes = injectCSSVars(code, vbindVariableList.get(id), isScriptSetup)
                 code = injectRes.code
-                injectRes.vbindVariableList && vbindVariableList.set(id, {
-                  TMatchVariable: injectRes.vbindVariableList,
-                  orgTransformCode: orgCode,
-                })
-              }
-              if (id.includes('type=style')) {
-                console.log('########', id)
-                code = injectCssOnServer(code, vbindVariableList.get(id.split('?vue')[0]).TMatchVariable)
-                console.log(code)
+                injectRes.vbindVariableList && vbindVariableList.set(id, injectRes.vbindVariableList)
+                isHmring = false
               }
+              if (id.includes('type=style'))
+                code = injectCssOnServer(code, vbindVariableList.get(id.split('?vue')[0]), isHmring)
             }
             return code
           } catch (err: unknown) {

packages/core/inject/inject-css.ts

@@ -1,14 +1,20 @@
+import hash from 'hash-sum'
 import { transformInjectCSS } from '../transform/transform-inject-css'
 import { parseImports } from '../parser'
 import type { TInjectCSSContent } from '../runtime/process-css'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 import type { TMatchVariable } from '../parser'
-
 export function injectCssOnServer(
   code: string,
   vbindVariableList: TMatchVariable | undefined,
+  isHmring: boolean,
 ) {
   vbindVariableList && vbindVariableList.forEach((vbVar) => {
+    // 样式文件修改后，热更新会先于 sfc 热更新运行，这里先设置hash
+    // 详见 packages/core/index.ts的 handleHotUpdate
+    if (!vbVar.hash && isHmring)
+      vbVar.hash = hash(vbVar.value + vbVar.has)
+
     code = code.replaceAll(`v-bind-m(${vbVar.value})`, `var(--${vbVar.hash})`)
   })
   return code

packages/core/inject/inject-cssvars.ts

@@ -60,7 +60,8 @@ export function createUseCssVarsCode(
   isScriptSetup: boolean) {
   let cssvarsObjectCode = ''
   vbindVariableList.forEach((vbVar) => {
-    const hashVal = hash(vbVar.value + vbVar.has)
+    // 如果 hash 存在，则说明是由热更新引起的，不需要重新设置 hash
+    const hashVal = vbVar.hash || hash(vbVar.value + vbVar.has)
     vbVar.hash = hashVal
     let varStr = ''
     // composition api 和 option api 一直帶 _ctx

packages/core/parser/parser-variable.ts

@@ -175,13 +175,7 @@ export function getObjectExpressionReturnNode(node: ObjectExpression) {
   return res
 }
 
-export type TMatchVariable = Array<{
-  has: boolean
-  value: string
-  hash?: string
-  isRef: boolean
-  orgTransformCode?: string
-}>
+export type TMatchVariable = Array<{ has: boolean, value: string, hash?: string, isRef: boolean }>
 export function matchVariable(
   importCSSModule: Array<string>,
   variableName: VariableName,

packages/core/runtime/pre-process-css.ts

@@ -16,12 +16,16 @@ import type { ICSSFileMap, SearchGlobOptions } from '../types'
  * 预处理css文件
  * @param options 选项参数 Options
  * @param alias
+ * @param filesPath
  */
-export function preProcessCSS(options: SearchGlobOptions, alias?: Record<string, string>): ICSSFileMap {
+export function preProcessCSS(
+  options: SearchGlobOptions,
+  alias?: Record<string, string>,
+  filesPath?: string[]): ICSSFileMap {
   const { rootDir, includeCompile } = options
 
   // 获得文件列表
-  const files = getAllCSSFilePath(includeCompile!, rootDir!)
+  const files = filesPath || getAllCSSFilePath(includeCompile!, rootDir!)
   return createCSSFileModuleMap(files, rootDir!, alias)
 }
 

packages/core/runtime/process-css.ts

@@ -9,6 +9,7 @@ export const getCSSFileRecursion = (
   key: string,
   cssFiles: ICSSFileMap,
   cb: (res: ICSSFile) => void,
+  sfcPath: string,
   matchedMark = new Set<string>()) => {
   // 添加后缀
   // sfc中规则：如果@import 指定了后缀，则根据后缀，否则根据当前 script 标签的 lang 属性（默认css）
@@ -20,11 +21,15 @@ export const getCSSFileRecursion = (
   if (matchedMark.has(key)) return
   const cssFile = cssFiles.get(key)
   if (cssFile) {
+    if (!cssFile.sfcPath)
+      cssFile.sfcPath = new Set()
+
+    cssFile.sfcPath?.add(sfcPath)
     matchedMark.add(key)
     cb(cssFile)
     if (cssFile.importer.size > 0) {
       cssFile.importer.forEach((value) => {
-        getCSSFileRecursion(lang, value, cssFiles, cb, matchedMark)
+        getCSSFileRecursion(lang, value, cssFiles, cb, sfcPath, matchedMark)
       })
     }
   } else {
@@ -66,7 +71,7 @@ export const getVBindVariableListByPath = (
               vbindVariable.add(vb)
             })
           }
-        })
+        }, id)
       } catch (e) {
         if ((e as Error).message === 'path') {
           const doc = 'https://github.com/baiwusanyu-c/unplugin-vue-cssvars/pull/29'

packages/core/types.ts

@@ -52,6 +52,7 @@ export interface ICSSFile {
   vBindCode: Array<string> | null
   content: string
   lang: string
+  sfcPath?: Set<string>
 }
 export declare type ICSSFileMap = Map<string, ICSSFile>
 export declare type VariableName = Record<string, Node | undefined | null>

play/src/assets/css/foo.css

@@ -1,6 +1,6 @@
 #foo{
-  color: v-bind-m(color);
-  background: #0E53C4;
+  color: v-bind-m(fooColor);
+  background: #ffebf8;
   width: 200px;
   height: 30px;
 }

play/src/views/app/App.vue

@@ -73,7 +73,7 @@ export default defineComponent({
 
 <template>
   <div id="foo" class="scss" @click="sassColor = 'red'">
-    app1
+    app122
     <!--    <Comp /> -->
   </div>
 </template>