@unocss/vite 0.45.3 → 0.45.6

package/dist/index.cjs

@@ -222,6 +222,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
   const vfsLayers = /* @__PURE__ */ new Set();
   const layerImporterMap = /* @__PURE__ */ new Map();
   let tasks = [];
+  let viteConfig;
   const cssPostPlugins = /* @__PURE__ */ new Map();
   const cssPlugins = /* @__PURE__ */ new Map();
   async function applyCssTransform(css, id, dir) {
@@ -331,12 +332,14 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
       apply(options, { command }) {
         return command === "build" && !options.build?.ssr;
       },
+      configResolved(config) {
+        viteConfig = config;
+      },
       enforce: "post",
       async generateBundle(options, bundle) {
-        const files = Object.entries(bundle);
-        const cssFiles = files.filter((i) => i[0].endsWith(".css"));
-        const jsFiles = files.filter((i) => i[0].endsWith(".js"));
-        if (!cssFiles.length && !jsFiles.length)
+        const checkJs = ["umd", "amd", "iife"].includes(options.format);
+        const files = Object.keys(bundle).filter((i) => i.endsWith(".css") || checkJs && i.endsWith(".js"));
+        if (!files.length)
           return;
         if (!vfsLayers.size) {
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
@@ -345,18 +348,15 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         }
         const result = await generateAll();
         let replaced = false;
-        for (const [, chunk] of cssFiles) {
+        for (const file of files) {
+          const chunk = bundle[file];
           if (chunk.type === "asset" && typeof chunk.source === "string") {
             const css = chunk.source.replace(HASH_PLACEHOLDER_RE, "");
             chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
-              const css2 = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "";
-              return await applyCssTransform(css2, `${chunk.fileName}.css`, options.dir);
+              return await applyCssTransform(layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "", `${chunk.fileName}.css`, options.dir);
             });
-          }
-        }
-        for (const [, chunk] of jsFiles) {
-          if (chunk.type === "chunk" && typeof chunk.code === "string") {
+          } else if (chunk.type === "chunk" && typeof chunk.code === "string") {
             const js = chunk.code.replace(HASH_PLACEHOLDER_RE, "");
             chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
@@ -365,8 +365,14 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
             });
           }
         }
-        if (!replaced)
-          this.error(new Error("[unocss] does not found CSS placeholder in the generated chunks,\nthis is likely an internal bug of unocss vite plugin"));
+        if (!replaced) {
+          let msg = "[unocss] does not found CSS placeholder in the generated chunks";
+          if (viteConfig.build.lib && checkJs)
+            msg += "\nIt seems you are building in library mode, it's recommanded to set `build.cssCodeSplit` to true.\nSee https://github.com/vitejs/vite/issues/1579";
+          else
+            msg += "\nThis is likely an internal bug of unocss vite plugin";
+          this.error(new Error(msg));
+        }
       }
     }
   ];
@@ -374,14 +380,15 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
 
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
+const HASH_LENGTH = 6;
 function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
   const tasks = [];
   const entries = /* @__PURE__ */ new Set();
   let invalidateTimer;
-  let lastUpdate = Date.now();
-  let lastServed = 0;
+  const lastServedHash = /* @__PURE__ */ new Map();
+  let lastServedTime = Date.now();
   let resolved = false;
   let resolvedWarnTimer;
   function configResolved(config) {
@@ -401,10 +408,12 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
       }
     }
     clearTimeout(invalidateTimer);
-    invalidateTimer = setTimeout(() => sendUpdate(ids), timer);
+    invalidateTimer = setTimeout(() => {
+      lastServedHash.clear();
+      sendUpdate(ids);
+    }, timer);
   }
   function sendUpdate(ids) {
-    lastUpdate = Date.now();
     for (const server of servers) {
       server.ws.send({
         type: "update",
@@ -415,7 +424,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
           return {
             acceptedPath: mod.url,
             path: mod.url,
-            timestamp: lastUpdate,
+            timestamp: lastServedTime,
             type: "js-update"
           };
         }).filter(core.notNull)
@@ -439,7 +448,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
     }
   }
   onInvalidate(() => {
-    invalidate(0, /* @__PURE__ */ new Set([...entries, ...affectedModules]));
+    invalidate(10, /* @__PURE__ */ new Set([...entries, ...affectedModules]));
   });
   return [
     {
@@ -449,13 +458,13 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
       configResolved,
       async configureServer(_server) {
         servers.push(_server);
-        _server.ws.on(WS_EVENT_PREFIX, (servedTime) => {
-          if (servedTime < lastUpdate)
-            invalidate(0);
+        _server.ws.on(WS_EVENT_PREFIX, ([layer, hash]) => {
+          if (lastServedHash.get(layer) !== hash)
+            sendUpdate(entries);
         });
       },
-      async buildStart() {
-        await uno.generate("", { preflights: true });
+      buildStart() {
+        uno.generate("", { preflights: true });
       },
       transform(code, id) {
         if (filter(code, id))
@@ -483,8 +492,11 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
           return null;
         await Promise.all(tasks);
         const result = await uno.generate(tokens);
-        lastServed = Date.now();
-        return layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer);
+        const css = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer);
+        const hash = getHash(css || "", HASH_LENGTH);
+        lastServedHash.set(layer, hash);
+        lastServedTime = Date.now();
+        return `/*${hash}*/${css}`;
       }
     },
     {
@@ -495,10 +507,15 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
       },
       enforce: "post",
       transform(code, id) {
-        if (entries.has(getPath(id)) && code.includes("import.meta.hot")) {
-          const snippet = `
-if (import.meta.hot) { try { import.meta.hot.send('${WS_EVENT_PREFIX}', ${lastServed}) } catch (e) { console.warn('[unocss-hmr]', e) } }`;
-          return code + snippet;
+        const layer = resolveLayer(getPath(id));
+        if (layer && code.includes("import.meta.hot")) {
+          return `${code}
+if (import.meta.hot) {
+  try { await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]); }
+  catch (e) { console.warn('[unocss-hmr]', e) }
+  if (!import.meta.url.includes('?'))
+    await new Promise(resolve => setTimeout(resolve, 100))
+}`;
         }
       }
     }

package/dist/index.mjs

@@ -211,6 +211,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
   const vfsLayers = /* @__PURE__ */ new Set();
   const layerImporterMap = /* @__PURE__ */ new Map();
   let tasks = [];
+  let viteConfig;
   const cssPostPlugins = /* @__PURE__ */ new Map();
   const cssPlugins = /* @__PURE__ */ new Map();
   async function applyCssTransform(css, id, dir) {
@@ -320,12 +321,14 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
       apply(options, { command }) {
         return command === "build" && !options.build?.ssr;
       },
+      configResolved(config) {
+        viteConfig = config;
+      },
       enforce: "post",
       async generateBundle(options, bundle) {
-        const files = Object.entries(bundle);
-        const cssFiles = files.filter((i) => i[0].endsWith(".css"));
-        const jsFiles = files.filter((i) => i[0].endsWith(".js"));
-        if (!cssFiles.length && !jsFiles.length)
+        const checkJs = ["umd", "amd", "iife"].includes(options.format);
+        const files = Object.keys(bundle).filter((i) => i.endsWith(".css") || checkJs && i.endsWith(".js"));
+        if (!files.length)
           return;
         if (!vfsLayers.size) {
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
@@ -334,18 +337,15 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         }
         const result = await generateAll();
         let replaced = false;
-        for (const [, chunk] of cssFiles) {
+        for (const file of files) {
+          const chunk = bundle[file];
           if (chunk.type === "asset" && typeof chunk.source === "string") {
             const css = chunk.source.replace(HASH_PLACEHOLDER_RE, "");
             chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
-              const css2 = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "";
-              return await applyCssTransform(css2, `${chunk.fileName}.css`, options.dir);
+              return await applyCssTransform(layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "", `${chunk.fileName}.css`, options.dir);
             });
-          }
-        }
-        for (const [, chunk] of jsFiles) {
-          if (chunk.type === "chunk" && typeof chunk.code === "string") {
+          } else if (chunk.type === "chunk" && typeof chunk.code === "string") {
             const js = chunk.code.replace(HASH_PLACEHOLDER_RE, "");
             chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
@@ -354,8 +354,14 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
             });
           }
         }
-        if (!replaced)
-          this.error(new Error("[unocss] does not found CSS placeholder in the generated chunks,\nthis is likely an internal bug of unocss vite plugin"));
+        if (!replaced) {
+          let msg = "[unocss] does not found CSS placeholder in the generated chunks";
+          if (viteConfig.build.lib && checkJs)
+            msg += "\nIt seems you are building in library mode, it's recommanded to set `build.cssCodeSplit` to true.\nSee https://github.com/vitejs/vite/issues/1579";
+          else
+            msg += "\nThis is likely an internal bug of unocss vite plugin";
+          this.error(new Error(msg));
+        }
       }
     }
   ];
@@ -363,14 +369,15 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
 
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
+const HASH_LENGTH = 6;
 function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
   const tasks = [];
   const entries = /* @__PURE__ */ new Set();
   let invalidateTimer;
-  let lastUpdate = Date.now();
-  let lastServed = 0;
+  const lastServedHash = /* @__PURE__ */ new Map();
+  let lastServedTime = Date.now();
   let resolved = false;
   let resolvedWarnTimer;
   function configResolved(config) {
@@ -390,10 +397,12 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
       }
     }
     clearTimeout(invalidateTimer);
-    invalidateTimer = setTimeout(() => sendUpdate(ids), timer);
+    invalidateTimer = setTimeout(() => {
+      lastServedHash.clear();
+      sendUpdate(ids);
+    }, timer);
   }
   function sendUpdate(ids) {
-    lastUpdate = Date.now();
     for (const server of servers) {
       server.ws.send({
         type: "update",
@@ -404,7 +413,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
           return {
             acceptedPath: mod.url,
             path: mod.url,
-            timestamp: lastUpdate,
+            timestamp: lastServedTime,
             type: "js-update"
           };
         }).filter(notNull)
@@ -428,7 +437,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
     }
   }
   onInvalidate(() => {
-    invalidate(0, /* @__PURE__ */ new Set([...entries, ...affectedModules]));
+    invalidate(10, /* @__PURE__ */ new Set([...entries, ...affectedModules]));
   });
   return [
     {
@@ -438,13 +447,13 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
       configResolved,
       async configureServer(_server) {
         servers.push(_server);
-        _server.ws.on(WS_EVENT_PREFIX, (servedTime) => {
-          if (servedTime < lastUpdate)
-            invalidate(0);
+        _server.ws.on(WS_EVENT_PREFIX, ([layer, hash]) => {
+          if (lastServedHash.get(layer) !== hash)
+            sendUpdate(entries);
         });
       },
-      async buildStart() {
-        await uno.generate("", { preflights: true });
+      buildStart() {
+        uno.generate("", { preflights: true });
       },
       transform(code, id) {
         if (filter(code, id))
@@ -472,8 +481,11 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
           return null;
         await Promise.all(tasks);
         const result = await uno.generate(tokens);
-        lastServed = Date.now();
-        return layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer);
+        const css = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer);
+        const hash = getHash(css || "", HASH_LENGTH);
+        lastServedHash.set(layer, hash);
+        lastServedTime = Date.now();
+        return `/*${hash}*/${css}`;
       }
     },
     {
@@ -484,10 +496,15 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
       },
       enforce: "post",
       transform(code, id) {
-        if (entries.has(getPath(id)) && code.includes("import.meta.hot")) {
-          const snippet = `
-if (import.meta.hot) { try { import.meta.hot.send('${WS_EVENT_PREFIX}', ${lastServed}) } catch (e) { console.warn('[unocss-hmr]', e) } }`;
-          return code + snippet;
+        const layer = resolveLayer(getPath(id));
+        if (layer && code.includes("import.meta.hot")) {
+          return `${code}
+if (import.meta.hot) {
+  try { await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]); }
+  catch (e) { console.warn('[unocss-hmr]', e) }
+  if (!import.meta.url.includes('?'))
+    await new Promise(resolve => setTimeout(resolve, 100))
+}`;
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.45.3",
+  "version": "0.45.6",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,15 +44,15 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
-    "@unocss/config": "0.45.3",
-    "@unocss/core": "0.45.3",
-    "@unocss/inspector": "0.45.3",
-    "@unocss/scope": "0.45.3",
-    "@unocss/transformer-directives": "0.45.3",
+    "@unocss/config": "0.45.6",
+    "@unocss/core": "0.45.6",
+    "@unocss/inspector": "0.45.6",
+    "@unocss/scope": "0.45.6",
+    "@unocss/transformer-directives": "0.45.6",
     "magic-string": "^0.26.2"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.45.3",
+    "@unocss/shared-integration": "0.45.6",
     "vite": "^3.0.4"
   },
   "scripts": {