From ee9e6805bdfd0fbe9d8323d6e38aac82570ce1f2 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 16 Apr 2024 18:52:27 +0530
Subject: [PATCH] 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 |  5 +++++
 packages/vite/package.json  |  1 -
 packages/vite/src/index.ts  | 34 +++++++++++++++++-----------------
 pnpm-lock.yaml              |  3 ---
 4 files changed, 22 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/gold-bags-fry.md

diff --git a/.changeset/gold-bags-fry.md b/.changeset/gold-bags-fry.md
new file mode 100644
index 00000000..60b285de
--- /dev/null
+++ b/.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
diff --git a/packages/vite/package.json b/packages/vite/package.json
index 9e76a395..38a4b32f 100644
--- a/packages/vite/package.json
+++ b/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:*"
   },
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index a707933f..e02ec937 100644
--- a/packages/vite/src/index.ts
+++ b/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 };
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4cace75..42b9d0e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -597,9 +597,6 @@ importers:
 
   packages/vite:
     dependencies:
-      '@rollup/pluginutils':
-        specifier: ^5.0.4
-        version: 5.0.4(rollup@3.29.4)
       '@wyw-in-js/shared':
         specifier: workspace:*
         version: link:../shared