fix: style comparison error when hotUpdate

[brenner8023]

FIXED: #3358

I think it need not transform code when hotUpdate. File content comparison when hotUpdate should compare raw code, not transformed code. The transformed code include unocss:vue-scoped's generated code and raw code, generated code is not chaged.

There is a comment from @vitejs/plugin-vue
packages/plugin-vue/src/main.ts

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2bae6b3
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/65657cd0dea5af00089ecf3e
😎 Deploy Preview	https://deploy-preview-3387--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.

[auvred]

If we don't inject styles on handleHotUpdate, all applied styles disappear after HMR (you can try to run it locally to see what happens). Most likely it's the bug of @vitejs/plugin-vue
Ref: vitejs/vite-plugin-vue#301

[brenner8023]

If we don't inject styles on handleHotUpdate, all applied styles disappear after HMR (you can try to run it locally to see what happens). Most likely it's the bug of @vitejs/plugin-vue Ref: vitejs/vite-plugin-vue#301

I run it locally and everything seems to be ok. Because unocss:vue-scoped's transform hook is called after every HMR. I think applied styles will not disappear.

return {
    name: "unocss:vue-scoped",
    transform(code, id) {
      if (!filter(id))
        return;
      return transformSFC(code); // will run after every HMR
    },
    handleHotUpdate(ctx) {
      // const read = ctx.read;
      // if (filter(ctx.file)) {
      //   ctx.read = async () => {
      //     const code = await read();
      //     return await transformSFC(code) || code;
      //   };
      // }
    }
  };

[auvred]

Yes, you are right, transform hook is called. But updated styles are not pushed

Reproduction: https://stackblitz.com/edit/vitejs-vite-mnvzcb?file=src%2FApp.vue
Wait for dev server to start and change class text-red to text-blue. The text should change its color, but it doesn't do so

I just commented out handleHotUpdate code (patch-unocss.mjs).

---

But maybe we need to push this change as temporary workaround? I guess the runtime error is worse than missed hot update

[brenner8023]

I open a PR(vitejs/vite-plugin-vue#306) for vite-plugin-vue to fix the bug. Take a look at my PR and give me some review comments.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.