How to update(HMR) virtual css file?

[yaquawa]

I have such a use case:

1. user update any *.vue file
2. extract css from all *.vue files using PurgeCSS
3. hot update css

I've got this code which injects the purged css at the startup of Vite, but it won't get any hot update after modified the vue files.

Anyone can help me complete my code? Thanks!!

import { Plugin } from 'vite'
import PurgeCSS from 'purgecss'

function foobarCSS(): Plugin {
  const MODULE_ID = '@foobar.css'
  const MODULE_ID_VIRTUAL = '/@foobar.css'

  return {
    name: 'vite:foobar',
    resolveId(id) {
      return id === MODULE_ID ? MODULE_ID_VIRTUAL : null
    },
    async load(id) {
      if (id !== MODULE_ID_VIRTUAL) {
        return
      }

      const purgeCSSResults = await new PurgeCSS().purge(purgeCssConfig)

      return {
        code: purgeCSSResults[0].css,
      }
    },
  }
}

[yaquawa]

Hi @antfu, I saw your awesome windicss plugin for Vite, which HMR the virtual generated css too, and I've tried to mimic how you did the HMR on the virtual css, but for some reason it not works for me.

I'm sorry to bother you, but would you please tell me how to accomplish the above goal if you have time..? Thanks!!🙏🏼

[gustavopch]

@yaquawa I have a somewhat similar case. Did you find a solution?

[yaquawa]

@gustavopch Sorry, I gave up. Maybe there is a new way to do this now. I'm not sure about this.

[UltraCakeBakery]

Anyone had success with this?

[antfu]

You might need to read Vite's code to learn the HMR internals. Here is how UnoCSS does it:
https://github.com/unocss/unocss/blob/f375524d9bca3f2f8b445b322ec0fc3eb124ec3c/packages/vite/src/modes/global/dev.ts#L47-L66

[bigJackie]

I find that if you modify .vue files won't make css hot update, because it seems that hot update for .vue and .css are dispart.
For example, if you update A.vue, A.vue will mapping two modules ["A.vue", "A.vue?vue&type=style&index=0&lang.css"].
So, I think maybe you should use server.ws.send to update the virtual css file. 🤔