@unocss/vite 0.62.3 → 0.63.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
+import { UserConfig, UnocssPluginContext, UserConfigDefaults } from '@unocss/core';
 import * as vite from 'vite';
 import { Plugin } from 'vite';
-import { UserConfig, UnocssPluginContext, UserConfigDefaults } from '@unocss/core';
 
 interface VitePluginConfig<Theme extends object = object> extends UserConfig<Theme> {
     /**
@@ -58,10 +58,10 @@ interface VitePluginConfig<Theme extends object = object> extends UserConfig<The
 
 declare function ChunkModeBuildPlugin({ uno, filter }: UnocssPluginContext): Plugin;
 
-declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }: UnocssPluginContext): Plugin[];
-
 declare function GlobalModeBuildPlugin(ctx: UnocssPluginContext<VitePluginConfig>): Plugin[];
 
+declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }: UnocssPluginContext): Plugin[];
+
 declare function GlobalModePlugin(ctx: UnocssPluginContext): vite.Plugin<any>[];
 
 declare function PerModuleModePlugin({ uno, filter }: UnocssPluginContext): Plugin[];

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import { UserConfig, UnocssPluginContext, UserConfigDefaults } from '@unocss/core';
 import * as vite from 'vite';
 import { Plugin } from 'vite';
-import { UserConfig, UnocssPluginContext, UserConfigDefaults } from '@unocss/core';
 
 interface VitePluginConfig<Theme extends object = object> extends UserConfig<Theme> {
     /**
@@ -58,10 +58,10 @@ interface VitePluginConfig<Theme extends object = object> extends UserConfig<The
 
 declare function ChunkModeBuildPlugin({ uno, filter }: UnocssPluginContext): Plugin;
 
-declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }: UnocssPluginContext): Plugin[];
-
 declare function GlobalModeBuildPlugin(ctx: UnocssPluginContext<VitePluginConfig>): Plugin[];
 
+declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }: UnocssPluginContext): Plugin[];
+
 declare function GlobalModePlugin(ctx: UnocssPluginContext): vite.Plugin<any>[];
 
 declare function PerModuleModePlugin({ uno, filter }: UnocssPluginContext): Plugin[];

package/dist/index.mjs

@@ -1,49 +1,224 @@
 import process$1 from 'node:process';
 import UnocssInspector from '@unocss/inspector';
-import { resolve, isAbsolute, dirname } from 'node:path';
-import fs from 'node:fs/promises';
+import fs from 'node:fs';
+import { dirname, resolve, isAbsolute } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { toEscapedSelector, cssIdRE, createGenerator, BetterMap, notNull } from '@unocss/core';
+import fs$1 from 'node:fs/promises';
 import { glob } from 'tinyglobby';
-import MagicString from 'magic-string';
 import remapping from '@ampproject/remapping';
-import { cssIdRE, createGenerator, BetterMap, notNull, toEscapedSelector } from '@unocss/core';
+import MagicString from 'magic-string';
 import { createHash } from 'node:crypto';
 import { Buffer } from 'node:buffer';
 import { createFilter } from '@rollup/pluginutils';
-import fs$1 from 'node:fs';
-import { fileURLToPath } from 'node:url';
 import { createRecoveryConfigLoader } from '@unocss/config';
 
-const defaultPipelineExclude = [cssIdRE];
-const defaultPipelineInclude = [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/];
+function ConfigHMRPlugin(ctx) {
+  const { ready, uno } = ctx;
+  return {
+    name: "unocss:config",
+    async configResolved(config) {
+      await ctx.updateRoot(config.root);
+    },
+    async configureServer(server) {
+      uno.config.envMode = "dev";
+      const { sources } = await ready;
+      if (!sources.length)
+        return;
+      server.watcher.add(sources);
+      server.watcher.on("change", async (p) => {
+        if (!sources.includes(p))
+          return;
+        await ctx.reloadConfig();
+        server.ws.send({
+          type: "custom",
+          event: "unocss:config-changed"
+        });
+      });
+    }
+  };
+}
 
-const VIRTUAL_ENTRY_ALIAS = [
-  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
-];
-const LAYER_MARK_ALL = "__ALL__";
-const RESOLVED_ID_WITH_QUERY_RE = /[/\\]__uno(_.*?)?\.css(\?.*)?$/;
-const RESOLVED_ID_RE = /[/\\]__uno(?:_(.*?))?\.css$/;
-function resolveId(id) {
-  if (id.match(RESOLVED_ID_WITH_QUERY_RE))
-    return id;
-  for (const alias of VIRTUAL_ENTRY_ALIAS) {
-    const match = id.match(alias);
-    if (match) {
-      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
+const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
+const DEVTOOLS_MODULE_ID = "virtual:unocss-devtools";
+const MOCK_CLASSES_MODULE_ID = "virtual:unocss-mock-classes";
+const MOCK_CLASSES_PATH = "/@unocss/mock-classes";
+const DEVTOOLS_PATH = "/@unocss/devtools";
+const DEVTOOLS_CSS_PATH = "/@unocss/devtools.css";
+const devtoolCss = /* @__PURE__ */ new Set();
+const MODULES_MAP = {
+  [DEVTOOLS_MODULE_ID]: DEVTOOLS_PATH,
+  [MOCK_CLASSES_MODULE_ID]: MOCK_CLASSES_PATH
+};
+const BASE_POST_PATH = "/@unocss-devtools-update";
+function getBodyJson(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => body += chunk);
+    req.on("error", reject);
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body) || {});
+      } catch (e) {
+        reject(e);
+      }
+    });
+  });
+}
+function createDevtoolsPlugin(ctx, pluginConfig) {
+  let config;
+  let server;
+  let clientCode = "";
+  let devtoolTimer;
+  let lastUpdate = Date.now();
+  let postPath = BASE_POST_PATH;
+  function toClass(name) {
+    return `${toEscapedSelector(name)}{}`;
+  }
+  function updateDevtoolClass() {
+    clearTimeout(devtoolTimer);
+    devtoolTimer = setTimeout(() => {
+      lastUpdate = Date.now();
+      if (!server)
+        return;
+      const mod = server.moduleGraph.getModuleById(DEVTOOLS_CSS_PATH);
+      if (!mod)
+        return;
+      server.moduleGraph.invalidateModule(mod);
+      server.ws.send({
+        type: "update",
+        updates: [{
+          acceptedPath: DEVTOOLS_CSS_PATH,
+          path: DEVTOOLS_CSS_PATH,
+          timestamp: lastUpdate,
+          type: "js-update"
+        }]
+      });
+    }, 100);
+  }
+  async function getMockClassesInjector() {
+    const suggest = Object.keys(ctx.uno.config.rulesStaticMap);
+    const comment = "/* unocss CSS mock class names for devtools auto-completion */\n";
+    const css = suggest.map(toClass).join("");
+    return `
+  const style = document.createElement('style')
+  style.setAttribute('type', 'text/css')
+  style.innerHTML = ${JSON.stringify(comment + css)}
+  document.head.prepend(style)
+  `;
+  }
+  return [
+    {
+      name: "unocss:devtools",
+      configResolved(_config) {
+        config = _config;
+        postPath = `${config.base?.replace(/\/$/, "") ?? ""}${BASE_POST_PATH}`;
+      },
+      configureServer(_server) {
+        server = _server;
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url !== postPath)
+            return next();
+          try {
+            const data = await getBodyJson(req);
+            const type = data?.type;
+            let changed = false;
+            switch (type) {
+              case "add-classes":
+                data.data.forEach((key) => {
+                  if (!devtoolCss.has(key)) {
+                    devtoolCss.add(key);
+                    changed = true;
+                  }
+                });
+                if (changed)
+                  updateDevtoolClass();
+            }
+            res.statusCode = 200;
+          } catch (e) {
+            console.error(e);
+            res.statusCode = 500;
+          }
+          res.end();
+        });
+      },
+      resolveId(id) {
+        if (id === DEVTOOLS_CSS_PATH)
+          return DEVTOOLS_CSS_PATH;
+        return MODULES_MAP[id];
+      },
+      async load(id) {
+        if (id === DEVTOOLS_PATH) {
+          if (!clientCode) {
+            clientCode = [
+              await fs.promises.readFile(resolve(_dirname, "client.mjs"), "utf-8"),
+              `import('${MOCK_CLASSES_MODULE_ID}')`,
+              `import('${DEVTOOLS_CSS_PATH}')`
+            ].join("\n").replace("__POST_PATH__", `${config.server?.origin ?? ""}${postPath}`).replace("__POST_FETCH_MODE__", pluginConfig.fetchMode ?? "cors");
+          }
+          return config.command === "build" ? "" : clientCode;
+        } else if (id === MOCK_CLASSES_PATH) {
+          return await getMockClassesInjector();
+        } else if (id === DEVTOOLS_CSS_PATH) {
+          const { css } = await ctx.uno.generate(devtoolCss);
+          return css;
+        }
+      }
     }
+  ];
+}
+
+function getPath(id) {
+  return id.replace(/\?.*$/, "");
+}
+function hash(str) {
+  let i;
+  let l;
+  let hval = 2166136261;
+  for (i = 0, l = str.length; i < l; i++) {
+    hval ^= str.charCodeAt(i);
+    hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
   }
+  return `00000${(hval >>> 0).toString(36)}`.slice(-6);
 }
-function resolveLayer(id) {
-  const match = id.match(RESOLVED_ID_RE);
-  if (match)
-    return match[1] || LAYER_MARK_ALL;
+function transformSkipCode(code, map, SKIP_RULES_RE, keyFlag) {
+  for (const item of Array.from(code.matchAll(SKIP_RULES_RE))) {
+    if (item != null) {
+      const matched = item[0];
+      const withHashKey = `${keyFlag}${hash(matched)}`;
+      map.set(withHashKey, matched);
+      code = code.replace(matched, withHashKey);
+    }
+  }
+  return code;
 }
-const LAYER_PLACEHOLDER_RE = /#--unocss--\s*\{\s*layer\s*:\s*(.+?)\s*(?:;\s*escape-view\s*:\s*(.+?)\s*)?;?\s*\}/g;
-function getLayerPlaceholder(layer) {
-  return `#--unocss--{layer:${layer};escape-view:\\"\\'\\\`\\\\}`;
+function restoreSkipCode(code, map) {
+  for (const [withHashKey, matched] of map.entries())
+    code = code.replaceAll(withHashKey, matched);
+  return code;
 }
-const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*\{\s*content\s*:\s*\\*"([^\\"]+)\\*";?\s*\}/g;
-function getHashPlaceholder(hash) {
-  return `#--unocss-hash--{content:"${hash}"}`;
+
+function replaceAsync(string, searchValue, replacer) {
+  try {
+    if (typeof replacer === "function") {
+      const values = [];
+      String.prototype.replace.call(string, searchValue, (...args) => {
+        values.push(replacer(...args));
+        return "";
+      });
+      return Promise.all(values).then((resolvedValues) => {
+        return String.prototype.replace.call(string, searchValue, () => {
+          return resolvedValues.shift() || "";
+        });
+      });
+    } else {
+      return Promise.resolve(
+        String.prototype.replace.call(string, searchValue, replacer)
+      );
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
 }
 
 const INCLUDE_COMMENT = "@unocss-include";
@@ -53,6 +228,9 @@ const SKIP_START_COMMENT = "@unocss-skip-start";
 const SKIP_END_COMMENT = "@unocss-skip-end";
 const SKIP_COMMENT_RE = new RegExp(`(//\\s*?${SKIP_START_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_START_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_START_COMMENT}\\s*?-->)[\\s\\S]*?(//\\s*?${SKIP_END_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_END_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_END_COMMENT}\\s*?-->)`, "g");
 
+const defaultPipelineExclude = [cssIdRE];
+const defaultPipelineInclude = [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/];
+
 function deprecationCheck(config) {
   let warned = false;
   function warn(msg) {
@@ -183,62 +361,39 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   };
 }
 
-function getPath(id) {
-  return id.replace(/\?.*$/, "");
-}
-function hash(str) {
-  let i;
-  let l;
-  let hval = 2166136261;
-  for (i = 0, l = str.length; i < l; i++) {
-    hval ^= str.charCodeAt(i);
-    hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
-  }
-  return `00000${(hval >>> 0).toString(36)}`.slice(-6);
-}
-function transformSkipCode(code, map, SKIP_RULES_RE, keyFlag) {
-  for (const item of Array.from(code.matchAll(SKIP_RULES_RE))) {
-    if (item != null) {
-      const matched = item[0];
-      const withHashKey = `${keyFlag}${hash(matched)}`;
-      map.set(withHashKey, matched);
-      code = code.replace(matched, withHashKey);
-    }
-  }
-  return code;
-}
-function restoreSkipCode(code, map) {
-  for (const [withHashKey, matched] of map.entries())
-    code = code.replaceAll(withHashKey, matched);
-  return code;
-}
-
 function getHash(input, length = 8) {
   return createHash("sha256").update(input).digest("hex").slice(0, length);
 }
 
-function replaceAsync(string, searchValue, replacer) {
-  try {
-    if (typeof replacer === "function") {
-      const values = [];
-      String.prototype.replace.call(string, searchValue, (...args) => {
-        values.push(replacer(...args));
-        return "";
-      });
-      return Promise.all(values).then((resolvedValues) => {
-        return String.prototype.replace.call(string, searchValue, () => {
-          return resolvedValues.shift() || "";
-        });
-      });
-    } else {
-      return Promise.resolve(
-        String.prototype.replace.call(string, searchValue, replacer)
-      );
+const VIRTUAL_ENTRY_ALIAS = [
+  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
+];
+const LAYER_MARK_ALL = "__ALL__";
+const RESOLVED_ID_WITH_QUERY_RE = /[/\\]__uno(_.*?)?\.css(\?.*)?$/;
+const RESOLVED_ID_RE = /[/\\]__uno(?:_(.*?))?\.css$/;
+function resolveId(id) {
+  if (id.match(RESOLVED_ID_WITH_QUERY_RE))
+    return id;
+  for (const alias of VIRTUAL_ENTRY_ALIAS) {
+    const match = id.match(alias);
+    if (match) {
+      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
     }
-  } catch (error) {
-    return Promise.reject(error);
   }
 }
+function resolveLayer(id) {
+  const match = id.match(RESOLVED_ID_RE);
+  if (match)
+    return match[1] || LAYER_MARK_ALL;
+}
+const LAYER_PLACEHOLDER_RE = /#--unocss--\s*\{\s*layer\s*:\s*(.+?)\s*(?:;\s*escape-view\s*:\s*(.+?)\s*)?;?\s*\}/g;
+function getLayerPlaceholder(layer) {
+  return `#--unocss--{layer:${layer};escape-view:\\"\\'\\\`\\\\}`;
+}
+const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*\{\s*content\s*:\s*\\*"([^\\"]+)\\*";?\s*\}/g;
+function getHashPlaceholder(hash) {
+  return `#--unocss-hash--{content:"${hash}"}`;
+}
 
 function ChunkModeBuildPlugin({ uno, filter }) {
   let cssPlugin;
@@ -282,6 +437,9 @@ function ChunkModeBuildPlugin({ uno, filter }) {
   };
 }
 
+const LAYER_PREFLIGHTS = "preflights";
+const LAYER_IMPORTS = "imports";
+
 async function applyTransformers(ctx, original, id, enforce = "default") {
   if (original.includes(IGNORE_COMMENT))
     return;
@@ -335,7 +493,7 @@ async function setupContentExtractor(ctx, shouldWatch = false) {
     const files = await glob(content.filesystem, { cwd: root, expandDirectories: false });
     async function extractFile(file) {
       file = isAbsolute(file) ? file : resolve(root, file);
-      const code = await fs.readFile(file, "utf-8");
+      const code = await fs$1.readFile(file, "utf-8");
       if (!filter(code, file))
         return;
       const preTransform = await applyTransformers(ctx, code, file, "pre");
@@ -363,8 +521,6 @@ async function setupContentExtractor(ctx, shouldWatch = false) {
   }
 }
 
-const LAYER_IMPORTS = "imports";
-
 function isLegacyChunk(chunk, options) {
   return options.format === "system" && chunk.fileName.includes("-legacy");
 }
@@ -535,11 +691,27 @@ function GlobalModeBuildPlugin(ctx) {
           return null;
         }
         const result = await generateAll();
-        const mappedVfsLayer = Array.from(vfsLayers).map((layer) => layer === LAYER_MARK_ALL ? layer : layer.replace(/^_/, ""));
-        const importStatements = result.getLayer(LAYER_IMPORTS);
-        const cssWithLayers = Array.from(vfsLayers).map((layer) => `${importStatements ?? ""}#--unocss-layer-start--${layer}--{start:${layer}} ${layer === LAYER_MARK_ALL ? result.getLayers(void 0, [...mappedVfsLayer, LAYER_IMPORTS]) : result.getLayer(layer.replace(/^_/, "")) || ""} #--unocss-layer-end--${layer}--{end:${layer}}`).join("");
+        const importsLayer = result.getLayer(LAYER_IMPORTS) ?? "";
         const fakeCssId = `${viteConfig.root}/${chunk.fileName}-unocss-hash.css`;
-        const css = await applyCssTransform(cssWithLayers, fakeCssId, options.dir, this);
+        const preflightLayers = ctx.uno.config.preflights?.map((i) => i.layer).concat(LAYER_PREFLIGHTS).filter(Boolean);
+        await Promise.all(preflightLayers.map((i) => result.setLayer(i, async (layerContent) => {
+          const preTransform = await applyTransformers(ctx, layerContent, fakeCssId, "pre");
+          const defaultTransform = await applyTransformers(ctx, preTransform?.code || layerContent, fakeCssId);
+          const postTransform = await applyTransformers(ctx, defaultTransform?.code || preTransform?.code || layerContent, fakeCssId, "post");
+          return postTransform?.code || defaultTransform?.code || preTransform?.code || layerContent;
+        })));
+        const cssWithLayers = await Promise.all(Array.from(vfsLayers).map(async (layer) => {
+          const layerStart = `#--unocss-layer-start--${layer}--{start:${layer}}`;
+          const layerEnd = `#--unocss-layer-end--${layer}--{end:${layer}}`;
+          let layerContent;
+          if (layer === LAYER_MARK_ALL) {
+            layerContent = result.getLayers(void 0, [...vfsLayers, LAYER_IMPORTS]);
+          } else {
+            layerContent = result.getLayer(layer) || "";
+          }
+          return `${importsLayer}${layerStart} ${layerContent} ${layerEnd}`;
+        }));
+        const css = await applyCssTransform(cssWithLayers.join(""), fakeCssId, options.dir, this);
         const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
         await transformHandler.call({}, css, fakeCssId);
       }
@@ -893,48 +1065,6 @@ ${css}`;
   ];
 }
 
-function VueScopedPlugin({ uno, ready }) {
-  let filter = createFilter([/\.vue$/], defaultPipelineExclude);
-  async function transformSFC(code) {
-    const { css } = await uno.generate(code);
-    if (!css)
-      return null;
-    return `${code}
-<style scoped>${css}</style>`;
-  }
-  return {
-    name: "unocss:vue-scoped",
-    enforce: "pre",
-    async configResolved() {
-      const { config } = await ready;
-      filter = config.content?.pipeline === false ? () => false : createFilter(
-        config.content?.pipeline?.include ?? config.include ?? [/\.vue$/],
-        config.content?.pipeline?.exclude ?? config.exclude ?? defaultPipelineExclude
-      );
-    },
-    async transform(code, id) {
-      if (!filter(id) || !id.endsWith(".vue"))
-        return;
-      const css = await transformSFC(code);
-      if (css) {
-        return {
-          code: css,
-          map: null
-        };
-      }
-    },
-    handleHotUpdate(ctx) {
-      const read = ctx.read;
-      if (filter(ctx.file)) {
-        ctx.read = async () => {
-          const code = await read();
-          return await transformSFC(code) || code;
-        };
-      }
-    }
-  };
-}
-
 function ShadowDomModuleModePlugin({ uno }) {
   const partExtractorRegex = /^part-\[(.+)\]:/;
   const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/;
@@ -1040,28 +1170,44 @@ function ShadowDomModuleModePlugin({ uno }) {
   };
 }
 
-function ConfigHMRPlugin(ctx) {
-  const { ready, uno } = ctx;
+function VueScopedPlugin({ uno, ready }) {
+  let filter = createFilter([/\.vue$/], defaultPipelineExclude);
+  async function transformSFC(code) {
+    const { css } = await uno.generate(code);
+    if (!css)
+      return null;
+    return `${code}
+<style scoped>${css}</style>`;
+  }
   return {
-    name: "unocss:config",
-    async configResolved(config) {
-      await ctx.updateRoot(config.root);
+    name: "unocss:vue-scoped",
+    enforce: "pre",
+    async configResolved() {
+      const { config } = await ready;
+      filter = config.content?.pipeline === false ? () => false : createFilter(
+        config.content?.pipeline?.include ?? config.include ?? [/\.vue$/],
+        config.content?.pipeline?.exclude ?? config.exclude ?? defaultPipelineExclude
+      );
     },
-    async configureServer(server) {
-      uno.config.envMode = "dev";
-      const { sources } = await ready;
-      if (!sources.length)
+    async transform(code, id) {
+      if (!filter(id) || !id.endsWith(".vue"))
         return;
-      server.watcher.add(sources);
-      server.watcher.on("change", async (p) => {
-        if (!sources.includes(p))
-          return;
-        await ctx.reloadConfig();
-        server.ws.send({
-          type: "custom",
-          event: "unocss:config-changed"
-        });
-      });
+      const css = await transformSFC(code);
+      if (css) {
+        return {
+          code: css,
+          map: null
+        };
+      }
+    },
+    handleHotUpdate(ctx) {
+      const read = ctx.read;
+      if (filter(ctx.file)) {
+        ctx.read = async () => {
+          const code = await read();
+          return await transformSFC(code) || code;
+        };
+      }
     }
   };
 }
@@ -1090,135 +1236,6 @@ function createTransformerPlugins(ctx) {
   });
 }
 
-const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
-const DEVTOOLS_MODULE_ID = "virtual:unocss-devtools";
-const MOCK_CLASSES_MODULE_ID = "virtual:unocss-mock-classes";
-const MOCK_CLASSES_PATH = "/@unocss/mock-classes";
-const DEVTOOLS_PATH = "/@unocss/devtools";
-const DEVTOOLS_CSS_PATH = "/@unocss/devtools.css";
-const devtoolCss = /* @__PURE__ */ new Set();
-const MODULES_MAP = {
-  [DEVTOOLS_MODULE_ID]: DEVTOOLS_PATH,
-  [MOCK_CLASSES_MODULE_ID]: MOCK_CLASSES_PATH
-};
-const BASE_POST_PATH = "/@unocss-devtools-update";
-function getBodyJson(req) {
-  return new Promise((resolve2, reject) => {
-    let body = "";
-    req.on("data", (chunk) => body += chunk);
-    req.on("error", reject);
-    req.on("end", () => {
-      try {
-        resolve2(JSON.parse(body) || {});
-      } catch (e) {
-        reject(e);
-      }
-    });
-  });
-}
-function createDevtoolsPlugin(ctx, pluginConfig) {
-  let config;
-  let server;
-  let clientCode = "";
-  let devtoolTimer;
-  let lastUpdate = Date.now();
-  let postPath = BASE_POST_PATH;
-  function toClass(name) {
-    return `${toEscapedSelector(name)}{}`;
-  }
-  function updateDevtoolClass() {
-    clearTimeout(devtoolTimer);
-    devtoolTimer = setTimeout(() => {
-      lastUpdate = Date.now();
-      if (!server)
-        return;
-      const mod = server.moduleGraph.getModuleById(DEVTOOLS_CSS_PATH);
-      if (!mod)
-        return;
-      server.moduleGraph.invalidateModule(mod);
-      server.ws.send({
-        type: "update",
-        updates: [{
-          acceptedPath: DEVTOOLS_CSS_PATH,
-          path: DEVTOOLS_CSS_PATH,
-          timestamp: lastUpdate,
-          type: "js-update"
-        }]
-      });
-    }, 100);
-  }
-  async function getMockClassesInjector() {
-    const suggest = Object.keys(ctx.uno.config.rulesStaticMap);
-    const comment = "/* unocss CSS mock class names for devtools auto-completion */\n";
-    const css = suggest.map(toClass).join("");
-    return `
-  const style = document.createElement('style')
-  style.setAttribute('type', 'text/css')
-  style.innerHTML = ${JSON.stringify(comment + css)}
-  document.head.prepend(style)
-  `;
-  }
-  return [
-    {
-      name: "unocss:devtools",
-      configResolved(_config) {
-        config = _config;
-        postPath = `${config.base?.replace(/\/$/, "") ?? ""}${BASE_POST_PATH}`;
-      },
-      configureServer(_server) {
-        server = _server;
-        server.middlewares.use(async (req, res, next) => {
-          if (req.url !== postPath)
-            return next();
-          try {
-            const data = await getBodyJson(req);
-            const type = data?.type;
-            let changed = false;
-            switch (type) {
-              case "add-classes":
-                data.data.forEach((key) => {
-                  if (!devtoolCss.has(key)) {
-                    devtoolCss.add(key);
-                    changed = true;
-                  }
-                });
-                if (changed)
-                  updateDevtoolClass();
-            }
-            res.statusCode = 200;
-          } catch (e) {
-            console.error(e);
-            res.statusCode = 500;
-          }
-          res.end();
-        });
-      },
-      resolveId(id) {
-        if (id === DEVTOOLS_CSS_PATH)
-          return DEVTOOLS_CSS_PATH;
-        return MODULES_MAP[id];
-      },
-      async load(id) {
-        if (id === DEVTOOLS_PATH) {
-          if (!clientCode) {
-            clientCode = [
-              await fs$1.promises.readFile(resolve(_dirname, "client.mjs"), "utf-8"),
-              `import('${MOCK_CLASSES_MODULE_ID}')`,
-              `import('${DEVTOOLS_CSS_PATH}')`
-            ].join("\n").replace("__POST_PATH__", `${config.server?.origin ?? ""}${postPath}`).replace("__POST_FETCH_MODE__", pluginConfig.fetchMode ?? "cors");
-          }
-          return config.command === "build" ? "" : clientCode;
-        } else if (id === MOCK_CLASSES_PATH) {
-          return await getMockClassesInjector();
-        } else if (id === DEVTOOLS_CSS_PATH) {
-          const { css } = await ctx.uno.generate(devtoolCss);
-          return css;
-        }
-      }
-    }
-  ];
-}
-
 function defineConfig(config) {
   return config;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/vite",
   "type": "module",
-  "version": "0.62.3",
+  "version": "0.63.0",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -50,19 +50,17 @@
   },
   "dependencies": {
     "@ampproject/remapping": "^2.3.0",
-    "@rollup/pluginutils": "^5.1.0",
+    "@rollup/pluginutils": "^5.1.2",
     "chokidar": "^3.6.0",
     "magic-string": "^0.30.11",
-    "tinyglobby": "^0.2.5",
-    "@unocss/config": "0.62.3",
-    "@unocss/inspector": "0.62.3",
-    "@unocss/core": "0.62.3",
-    "@unocss/transformer-directives": "0.62.3",
-    "@unocss/scope": "0.62.3"
+    "tinyglobby": "^0.2.6",
+    "@unocss/config": "0.63.0",
+    "@unocss/core": "0.63.0",
+    "@unocss/inspector": "0.63.0"
   },
   "devDependencies": {
-    "vite": "^5.4.2",
-    "@unocss/shared-integration": "0.62.3"
+    "vite": "^5.4.8",
+    "@unocss/shared-integration": "0.63.0"
   },
   "scripts": {
     "build": "unbuild",