fix(vite): Fix CSS replacement in Vite HMR (#73)

* fix(vite): Fix CSS replacement in Vite HMR

Also remove dependency on @rollup/plugin-utils

* Add changeset

.changeset/gold-bags-fry.md

@@ -0,0 +1,5 @@
+---
+'@wyw-in-js/vite': patch
+---
+
+Fix CSS updation during Vite HMR where the new change wouldn't get correctly applied

packages/vite/package.json

@@ -2,7 +2,6 @@
   "name": "@wyw-in-js/vite",
   "version": "0.5.0",
   "dependencies": {
-    "@rollup/pluginutils": "^5.0.4",
     "@wyw-in-js/shared": "workspace:*",
     "@wyw-in-js/transform": "workspace:*"
   },

packages/vite/src/index.ts

@@ -7,10 +7,14 @@
 import { existsSync } from 'fs';
 import path from 'path';
 
-import type { FilterPattern } from '@rollup/pluginutils';
-import { createFilter } from '@rollup/pluginutils';
-import { optimizeDeps } from 'vite';
-import type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer } from 'vite';
+import { optimizeDeps, createFilter } from 'vite';
+import type {
+  ModuleNode,
+  Plugin,
+  ResolvedConfig,
+  ViteDevServer,
+  FilterPattern,
+} from 'vite';
 
 import { logger, syncResolve } from '@wyw-in-js/shared';
 import type {
@@ -21,7 +25,6 @@ import type {
 import {
   createFileReporter,
   getFileIdx,
-  slugify,
   transform,
   TransformCacheCollection,
 } from '@wyw-in-js/transform';
@@ -182,10 +185,8 @@ export default function wywInJS({
 
       dependencies ??= [];
 
-      const slug = slugify(cssText);
-
       const cssFilename = path
-        .normalize(`${id.replace(/\.[jt]sx?$/, '')}_${slug}.css`)
+        .normalize(`${id.replace(/\.[jt]sx?$/, '')}.wyw-in-js.css`)
         .replace(/\\/g, path.posix.sep);
 
       const cssRelativePath = path
@@ -203,15 +204,6 @@ export default function wywInJS({
       cssFileLookup[cssId] = cssFilename;
 
       result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;
-      if (devServer?.moduleGraph) {
-        const module = devServer.moduleGraph.getModuleById(cssId);
-
-        if (module) {
-          devServer.moduleGraph.invalidateModule(module);
-          module.lastHMRTimestamp =
-            module.lastInvalidationTimestamp || Date.now();
-        }
-      }
 
       for (let i = 0, end = dependencies.length; i < end; i++) {
         // eslint-disable-next-line no-await-in-loop
@@ -223,6 +215,14 @@ export default function wywInJS({
       const target = targets.find((t) => t.id === id);
       if (!target) targets.push({ id, dependencies });
       else target.dependencies = dependencies;
+
+      if (devServer?.moduleGraph) {
+        const module = devServer.moduleGraph.getModuleById(cssFilename);
+
+        if (module) {
+          devServer.reloadModule(module);
+        }
+      }
       /* eslint-disable-next-line consistent-return */
       return { code: result.code, map: result.sourceMap };
     },