fix(vite): update css if config changed

unocss · Jun 25, 2022 · c74047e · c74047e
1 parent fc2ed5b
commit c74047e
Showing 1 changed file with 32 additions and 9 deletions.
diff --git a/packages/vite/src/modes/global/dev.ts b/packages/vite/src/modes/global/dev.ts
@@ -1,6 +1,7 @@
-import type { Plugin, ViteDevServer, ResolvedConfig as ViteResolvedConfig } from 'vite'
+import type { Plugin, Update, ViteDevServer, ResolvedConfig as ViteResolvedConfig } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
-import { LAYER_MARK_ALL, getPath, resolveId, resolveLayer } from '../../integration'
+import { cssIdRE } from '@unocss/core'
+import { LAYER_MARK_ALL, RESOLVED_ID_RE, getPath, resolveId, resolveLayer } from '../../integration'
 
 const WARN_TIMEOUT = 20000
 const WS_EVENT_PREFIX = 'unocss:hmr'
@@ -11,13 +12,21 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
 
   const tasks: Promise<any>[] = []
   const entries = new Set<string>()
+  const cssModules = new Set<string>()
 
   let invalidateTimer: any
   let lastUpdate = Date.now()
   let lastServed = 0
   let resolved = false
   let resolvedWarnTimer: any
 
+  function getCssLikeFiles() {
+    return [
+      ...entries.keys(),
+      ...cssModules.keys(),
+    ]
+  }
+
   function configResolved(config: ViteResolvedConfig) {
     base = config.base || ''
     if (base === '/')
@@ -27,8 +36,9 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
   }
 
   function invalidate(timer = 10) {
+    const ids = getCssLikeFiles()
     for (const server of servers) {
-      for (const id of entries) {
+      for (const id of ids) {
         const mod = server.moduleGraph.getModuleById(id)
         if (!mod)
           continue
@@ -41,15 +51,25 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
 
   function sendUpdate() {
     lastUpdate = Date.now()
+    const ids = getCssLikeFiles()
     for (const server of servers) {
       server.ws.send({
         type: 'update',
-        updates: Array.from(entries).map(i => ({
-          acceptedPath: i,
-          path: i,
-          timestamp: lastUpdate,
-          type: 'js-update',
-        })),
+        updates: Array.from(ids).reduce((prev: Update[], id) => {
+          const mod = server.moduleGraph.getModuleById(id)
+          if (mod) {
+            const { url: assetPath } = mod
+            prev.push(
+              {
+                acceptedPath: assetPath,
+                path: assetPath,
+                timestamp: lastUpdate,
+                type: 'js-update',
+              },
+            )
+          }
+          return prev
+        }, []),
       })
     }
   }
@@ -111,6 +131,9 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
         }
       },
       async load(id) {
+        if (!RESOLVED_ID_RE.test(id) && cssIdRE.test(id))
+          cssModules.add(id)
+
         const layer = resolveLayer(getPath(id))
         if (!layer)
           return null