[Bug] [HMR] page reload when use umi vite mode with auto css modules enabled

[carotte-tomato]

What happens?

when update css file with autocssmodule enabled, like import styles from "./index.less", vite hmr will trigger page reload like this AM [vite] page reload src/components/build-vm-modal/panels/steps-panel/index.less.

umi现在默认开启autocssmodule，使用import styles from "./index.less"的样式时会通过autoCSSModule带上?.module.css的后缀来触发vite的cssmodule机制，但是会导致vite的hmr不能部分更新css内容变更，每次都会刷新页面。

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

https://github.com/carotte-tomato/umi-vite-hmr-issue/tree/master

基于create-umi生成的代码，配置了vite: {}，补上了src/pages/index.less，复现最小集

How To Reproduce

Steps to reproduce the behavior:
change /src/pages/index.less, modify the value of container's padding.

修改/src/pages/index.less里面的样式，即container的padding值

Expected behavior
页面hmr应该是部分更新，而不是整个页面都刷新了，现在可以观察到控制台提示都是page reload
2:16:06 PM [vite] page reload src/pages/index.less (x4)

Context

• Umi Version: 4.0.87
• Node Version: v16.19.0
• Platform: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Suggestions

umi/packages/bundler-vite/src/plugins/autoCSSModule.ts

Line 31 in 352b0a8

return `${$2}?.module.css${$3}`;

目前定位到是这里添加的?.module.css后缀在vite hmr插件处理依赖模块的时候会被转换成?&.module.css导致的page reload，但是vite这块的代码目前还没有看透，为什么会转成这样还不知道。
解决方案是把autoCSSModule插件添加的后缀?.module.css改成?umi.module.css这样的格式就能通过cssModuleRE的检测并解决该问题。

[fz6m]

用你这个代码我添加了一行 css 后控制台提示：

00:09:56 [vite] hmr update /src/pages/index.tsx

正常 HMR 热更新了。

如还有问题，需要给一个确切的复现和更多上下文。

[carotte-tomato]

@fz6m =。=我试了下第一次是会更新tsx走hmr update，但是你再改一次或者直接保存一次就能复现了，我本地用这个代码稳定复现

4:19:52 PM [vite] hmr update /src/pages/index.tsx
4:19:58 PM [vite] page reload src/pages/index.less

[fz6m]

目前的解决方法是：关闭 auto css modules 以常规方式使用 css module ，即使用不同的命名区分开是否为 css module 文件。

// .umirc.ts

  autoCSSModules: false

import styles from './index.module.less'

[fz6m]

@xierenyuan 有时间可以看下这个问题 🌹 ，复现方式为连续修改两次 index.less 文件内容。

[zackBRAVE]

不止vite模式，mfsu也一样存在这个问题，连续两次修改样式文件就会导致刷新页面，修复工作没有进展了吗

[fz6m]

我使用最新的 umi 4 版本，不开启 vite ，只是 mfsu 没遇到你说的改两次会刷新页面的问题，如有问题，给一个最小复现看看吧。

[carotte-tomato]

不止vite模式，mfsu也一样存在这个问题，连续两次修改样式文件就会导致刷新页面，修复工作没有进展了吗

开启vite的情况下，可以自己基于umi已有的autoCssModulePlugin改一下就行，umi这里的plugin就是把import xxx from [css|less|sass|scss|styl|stylus]这种场景的引入路径后缀补充了?module.css来满足vite的cssModuleRE。

目前umi的实现，补充?.module.css会导致hmr解析依赖路径出问题，从而导致page-reload，我这里把补充字符串改成了?umi.module.css就没问题了😂