fix(webpack): HMR not work on Windows

[anyesu]

Describe

---

Unplugin will also normalize absolute path since 0.9.0 .

ref:

• fix(webpack): resolve path from id with decodeURIComponent #2296

Reproduction

---

• On Windows .

• Use vue-cli5 with default css.extract ( false ) .

  - css: {
  -   extract: process.env.NODE_ENV === 'development'
  -     ? {
  -         filename: 'css/[name].css',
  -         chunkFilename: 'css/[name].css',
  -       }
  -     : true,
  - },

You can see it when debugging:

• The path in updateModules is /__uno.css .

• The id in load is \__uno.css which use backslash , so the hash is always undefined .

PS

---

This normalizeAbsolutePath is really bad, it only works on absolute paths on Windows ( but the /foo/bar is not strictly a Windows absolute path ) , and is meaningless for other situations.

Now some places use normalizeAbsolutePath for conversion, and some places are missing, which makes it very confusing. This is very unfriendly to Windows users , because some inexplicable problems always occur due to missing conversions in some places, and it is very difficult to troubleshoot the problem.

My opinion: if all places where paths are used are converted to slashes or relative paths relative to the project root, then if you see backslashes, you can quickly realize that there is a problem here.

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	cda1d7e
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/659a6b9fa6928e0008a0521b
😎 Deploy Preview	https://deploy-preview-3495--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[anyesu]

Another problem is that the reload of uno.css will not be triggered until the next compilation. The load hook is always called before writeModule and will not be called again after it.

<template>
  <div id="app" class="bg-red w-100px">hello</div>
</template>

Change the w-100px in App.vue by following steps:

w-200px                            // not reload, width: 100%
add a space to trigger compilation // reload
w-300px                            // not reload, width: 100%
w-400px                            // reload
w-500px                            // reload

When I add a delay to writeModule ( it seems to be after compilation is completed ) , everything works fine, but the delay time is difficult to judge.

+ setTimeout(() => {
    plugin.__vfs.writeModule(id, code)
+ }, 1000)

Maybe this is a problem with webpack but I know little about it.