@unocss/vite 0.30.12 → 0.31.2

package/README.md

@@ -40,27 +40,40 @@ This mode enables a set of Vite plugins for `build` and for `dev` with `HMR` sup
 
 The generated `css` will be a global stylesheet injected on the `index.html`.
 
-### vue-scoped (WIP)
+### vue-scoped
 
 This mode will inject generated CSS to Vue SFC's `<style scoped>` for isolation.
 
-### svelte-scoped (WIP)
+### svelte-scoped
 
 This mode will inject generated CSS to Svelte's `<style>` for isolation.
 
-### per-module (WIP)
+### shadow-dom
+
+Since `Web Components` uses `Shadow DOM`, there is no way to style content directly from a global stylesheet (unless you use `custom css vars`, those will penetrate the `Shadow DOM`), you need to inline the generated css by the plugin into the `Shadow DOM` style.
+
+To inline the generated css, you only need to configure the plugin mode to `shadow-dom` and include `@unocss-placeholder` magic placeholder on each web component style css block.
+
+### per-module (Experimental)
 
 This mode will generate a CSS sheet for each module, can be scoped.
 
-### dist-chunk (WIP)
+### dist-chunk (Experimental)
 
 This mode will generate a CSS sheet for each code chunk on build, great for MPA.
 
-### shadow-dom
+## "Design in DevTools"
 
-Since `Web Components` uses `Shadow DOM`, there is no way to style content directly from a global stylesheet (unless you use `custom css vars`, those will penetrate the `Shadow DOM`), you need to inline the generated css by the plugin into the `Shadow DOM` style.
+Because of limitation of "on-demand" where the DevTools don't know those you haven't used in your source code yet. So if you want to try how things work by directly changing the classes in DevTools, just add the following lines to your main entry.
 
-To inline the generated css, you only need to configure the plugin mode to `shadow-dom` and include `@unocss-placeholder` magic placeholder on each web component style css block.
+```ts
+import 'uno.css'
+import 'virtual:unocss-devtools'
+```
+
+> ⚠️ Please use it with caution, under the hood we use [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to detect the class changes. Which means not only your manual changes but also the changes made by your scripts will be detected and included in the stylesheet. This could cause some misalignment between dev and the production build when you add dynamic classes based on some logic in script tags. We recommended adding your dynamic parts to the [safelist](https://github.com/unocss/unocss/issues/511) or setup UI regression tests for your production build if possible.
+
+`virtual:unocss-devtools` will be an empty bundle in production.
 
 ## Frameworks
 
@@ -284,7 +297,7 @@ export class MyElement extends LitElement {
     :host {...}
     @unocss-placeholder
   `
-  ...
+  // ...
 }
 ```
 

package/dist/client.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+function post(data) {
+  return fetch("__POST_PATH__", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(data)
+  });
+}
+function include(set, v) {
+  for (const i of v)
+    set.add(i);
+}
+console.log("%c[unocss] devtools support enabled %c\nread more at https://windicss.org", "background:#0ea5e9; color:white; padding: 1px 4px; border-radius: 3px;", "");
+const visitedClasses = /* @__PURE__ */ new Set();
+const pendingClasses = /* @__PURE__ */ new Set();
+let _timer;
+function schedule() {
+  if (_timer != null)
+    clearTimeout(_timer);
+  _timer = setTimeout(() => {
+    if (pendingClasses.size) {
+      post({ type: "add-classes", data: Array.from(pendingClasses) });
+      include(visitedClasses, pendingClasses);
+      pendingClasses.clear();
+    }
+  }, 10);
+}
+const mutationObserver = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.attributeName === "class" && mutation.target) {
+      Array.from(mutation.target.classList || []).forEach((i) => {
+        if (!visitedClasses.has(i))
+          pendingClasses.add(i);
+      });
+      schedule();
+    }
+  });
+});
+mutationObserver.observe(document.documentElement || document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});

package/dist/client.d.ts

@@ -0,0 +1 @@
+

package/dist/client.mjs

@@ -0,0 +1,44 @@
+function post(data) {
+  return fetch("__POST_PATH__", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(data)
+  });
+}
+function include(set, v) {
+  for (const i of v)
+    set.add(i);
+}
+console.log("%c[unocss] devtools support enabled %c\nread more at https://windicss.org", "background:#0ea5e9; color:white; padding: 1px 4px; border-radius: 3px;", "");
+const visitedClasses = /* @__PURE__ */ new Set();
+const pendingClasses = /* @__PURE__ */ new Set();
+let _timer;
+function schedule() {
+  if (_timer != null)
+    clearTimeout(_timer);
+  _timer = setTimeout(() => {
+    if (pendingClasses.size) {
+      post({ type: "add-classes", data: Array.from(pendingClasses) });
+      include(visitedClasses, pendingClasses);
+      pendingClasses.clear();
+    }
+  }, 10);
+}
+const mutationObserver = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.attributeName === "class" && mutation.target) {
+      Array.from(mutation.target.classList || []).forEach((i) => {
+        if (!visitedClasses.has(i))
+          pendingClasses.add(i);
+      });
+      schedule();
+    }
+  });
+});
+mutationObserver.observe(document.documentElement || document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});

package/dist/index.cjs

@@ -8,11 +8,15 @@ const config = require('@unocss/config');
 const core = require('@unocss/core');
 const crypto = require('crypto');
 const MagicString = require('magic-string');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 const UnocssInspector__default = /*#__PURE__*/_interopDefaultLegacy(UnocssInspector);
 const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
+const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
 const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
 const defaultExclude = [regexCssId];
@@ -48,7 +52,8 @@ function getHashPlaceholder(hash) {
 const INCLUDE_COMMENT = "@unocss-include";
 const CSS_PLACEHOLDER = "@unocss-placeholder";
 
-function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
+function createContext(configOrPath, defaults = {}, extraConfigSources = [], resolveConfigResult = () => {
+}) {
   const loadConfig = config.createConfigLoader(configOrPath, extraConfigSources);
   let rawConfig = {};
   const uno = core.createGenerator(rawConfig, defaults);
@@ -59,6 +64,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
   const ready = reloadConfig();
   async function reloadConfig() {
     const result = await loadConfig();
+    resolveConfigResult(result);
     rawConfig = result.config;
     uno.setConfig(rawConfig);
     uno.config.envMode = "dev";
@@ -246,7 +252,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, modules, filter })
 }
 
 const WARN_TIMEOUT = 2e4;
-const WS_EVENT_PREFIX = "custom:unocss:";
+const WS_EVENT_PREFIX = "unocss:hmr";
 function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
@@ -315,18 +321,9 @@ function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }) {
       configResolved,
       async configureServer(_server) {
         servers.push(_server);
-        _server.ws.on("connection", (ws) => {
-          ws.on("open", () => {
-            invalidate();
-          });
-          ws.on("message", (msg) => {
-            const message = String(msg);
-            if (!message.startsWith(WS_EVENT_PREFIX))
-              return;
-            const servedTime = +message.slice(WS_EVENT_PREFIX.length);
-            if (servedTime < lastUpdate)
-              invalidate(0);
-          });
+        _server.ws.on(WS_EVENT_PREFIX, (servedTime) => {
+          if (servedTime < lastUpdate)
+            invalidate(0);
         });
       },
       async buildStart() {
@@ -370,18 +367,9 @@ function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }) {
       },
       enforce: "post",
       transform(code, id) {
-        if (id.includes("@vite/client") || id.includes("vite/dist/client/client.mjs")) {
-          return code.replace("return hot", [
-            "let __buffer = []",
-            "function unoSendBuffer() { if(socket.readyState !== 1) return; __buffer.forEach(msg => socket.send(msg)); __buffer = [] }",
-            'socket.addEventListener("open", () => unoSendBuffer())',
-            "hot.unoSend = (data) => {__buffer.push(data);unoSendBuffer()}",
-            "return hot"
-          ].join(";"));
-        }
         if (entries.has(getPath(id)) && code.includes("import.meta.hot")) {
           const snippet = `
-if (import.meta.hot) { try { import.meta.hot.unoSend('${WS_EVENT_PREFIX}${lastServed}') } catch (e) { console.warn('[unocss-hmr]', e) } }`;
+if (import.meta.hot) { try { import.meta.hot.send('${WS_EVENT_PREFIX}', ${lastServed}) } catch (e) { console.warn('[unocss-hmr]', e) } }`;
           return code + snippet;
         }
       }
@@ -690,6 +678,133 @@ function initTransformerPlugins(ctx) {
   ];
 }
 
+const _dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+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 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) {
+  let config;
+  let server;
+  let clientCode = "";
+  let devtoolTimer;
+  let lastUpdate = Date.now();
+  function toClass(name) {
+    return `${core.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;
+      },
+      configureServer(_server) {
+        server = _server;
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url !== POST_PATH)
+            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__default.promises.readFile(path.resolve(_dirname, "client.mjs"), "utf-8"),
+              `import('${MOCK_CLASSES_MODULE_ID}')`,
+              `import('${DEVTOOLS_CSS_PATH}')`
+            ].join("\n").replace("__POST_PATH__", (config.server?.origin ?? "") + POST_PATH);
+          }
+          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;
 }
@@ -699,6 +814,7 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   const mode = inlineConfig.mode ?? "global";
   const plugins = [
     ...initTransformerPlugins(ctx),
+    ...createDevtoolsPlugin(ctx),
     ConfigHMRPlugin(ctx)
   ];
   if (inlineConfig.inspector !== false)

package/dist/index.mjs

@@ -1,9 +1,12 @@
 import UnocssInspector from '@unocss/inspector';
 import { createFilter } from '@rollup/pluginutils';
 import { createConfigLoader } from '@unocss/config';
-import { createGenerator, BetterMap } from '@unocss/core';
+import { createGenerator, BetterMap, toEscapedSelector } from '@unocss/core';
 import { createHash } from 'crypto';
 import MagicString from 'magic-string';
+import fs from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
 
 const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
 const defaultExclude = [regexCssId];
@@ -39,7 +42,8 @@ function getHashPlaceholder(hash) {
 const INCLUDE_COMMENT = "@unocss-include";
 const CSS_PLACEHOLDER = "@unocss-placeholder";
 
-function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
+function createContext(configOrPath, defaults = {}, extraConfigSources = [], resolveConfigResult = () => {
+}) {
   const loadConfig = createConfigLoader(configOrPath, extraConfigSources);
   let rawConfig = {};
   const uno = createGenerator(rawConfig, defaults);
@@ -50,6 +54,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
   const ready = reloadConfig();
   async function reloadConfig() {
     const result = await loadConfig();
+    resolveConfigResult(result);
     rawConfig = result.config;
     uno.setConfig(rawConfig);
     uno.config.envMode = "dev";
@@ -237,7 +242,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, modules, filter })
 }
 
 const WARN_TIMEOUT = 2e4;
-const WS_EVENT_PREFIX = "custom:unocss:";
+const WS_EVENT_PREFIX = "unocss:hmr";
 function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
@@ -306,18 +311,9 @@ function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }) {
       configResolved,
       async configureServer(_server) {
         servers.push(_server);
-        _server.ws.on("connection", (ws) => {
-          ws.on("open", () => {
-            invalidate();
-          });
-          ws.on("message", (msg) => {
-            const message = String(msg);
-            if (!message.startsWith(WS_EVENT_PREFIX))
-              return;
-            const servedTime = +message.slice(WS_EVENT_PREFIX.length);
-            if (servedTime < lastUpdate)
-              invalidate(0);
-          });
+        _server.ws.on(WS_EVENT_PREFIX, (servedTime) => {
+          if (servedTime < lastUpdate)
+            invalidate(0);
         });
       },
       async buildStart() {
@@ -361,18 +357,9 @@ function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter }) {
       },
       enforce: "post",
       transform(code, id) {
-        if (id.includes("@vite/client") || id.includes("vite/dist/client/client.mjs")) {
-          return code.replace("return hot", [
-            "let __buffer = []",
-            "function unoSendBuffer() { if(socket.readyState !== 1) return; __buffer.forEach(msg => socket.send(msg)); __buffer = [] }",
-            'socket.addEventListener("open", () => unoSendBuffer())',
-            "hot.unoSend = (data) => {__buffer.push(data);unoSendBuffer()}",
-            "return hot"
-          ].join(";"));
-        }
         if (entries.has(getPath(id)) && code.includes("import.meta.hot")) {
           const snippet = `
-if (import.meta.hot) { try { import.meta.hot.unoSend('${WS_EVENT_PREFIX}${lastServed}') } catch (e) { console.warn('[unocss-hmr]', e) } }`;
+if (import.meta.hot) { try { import.meta.hot.send('${WS_EVENT_PREFIX}', ${lastServed}) } catch (e) { console.warn('[unocss-hmr]', e) } }`;
           return code + snippet;
         }
       }
@@ -681,6 +668,133 @@ function initTransformerPlugins(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 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) {
+  let config;
+  let server;
+  let clientCode = "";
+  let devtoolTimer;
+  let lastUpdate = Date.now();
+  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;
+      },
+      configureServer(_server) {
+        server = _server;
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url !== POST_PATH)
+            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 ?? "") + POST_PATH);
+          }
+          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;
 }
@@ -690,6 +804,7 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   const mode = inlineConfig.mode ?? "global";
   const plugins = [
     ...initTransformerPlugins(ctx),
+    ...createDevtoolsPlugin(ctx),
     ConfigHMRPlugin(ctx)
   ];
   if (inlineConfig.inspector !== false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.30.12",
+  "version": "0.31.2",
   "description": "The Vite plugin for UnoCSS",
   "keywords": [
     "unocss",
@@ -27,19 +27,27 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
+    },
+    "./client": {
+      "import": "./dist/client.mjs",
+      "require": "./dist/client.js",
+      "types": "./dist/client.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "sideEffects": false,
+  "peerDependencies": {
+    "vite": "^2.9.0"
+  },
   "dependencies": {
     "@rollup/pluginutils": "^4.2.0",
-    "@unocss/config": "0.30.12",
-    "@unocss/core": "0.30.12",
-    "@unocss/inspector": "0.30.12",
-    "@unocss/scope": "0.30.12",
-    "@unocss/transformer-directives": "0.30.12",
+    "@unocss/config": "0.31.2",
+    "@unocss/core": "0.31.2",
+    "@unocss/inspector": "0.31.2",
+    "@unocss/scope": "0.31.2",
+    "@unocss/transformer-directives": "0.31.2",
     "magic-string": "^0.26.1"
   },
   "devDependencies": {
@@ -49,5 +57,5 @@
     "build": "unbuild",
     "stub": "unbuild --stub"
   },
-  "readme": "# @unocss/vite\n\nThe Vite plugin for UnoCSS. Ships with the `unocss` package.\n\n> This plugin does not come with any default presets. You are building a meta framework on top of UnoCSS, see [this file](https://github.com/unocss/unocss/blob/main/packages/unocss/src/vite.ts) for an example to bind the default presets.\n\n## Installation\n\n```bash\nnpm i -D unocss\n```\n\n```ts\n// vite.config.ts\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({ /* options */ }),\n  ],\n}\n```\n\nAdd `uno.css` to your main entry:\n\n```ts\n// main.ts\nimport 'uno.css'\n```\n\n## Modes\n\nThe Vite plugin comes with a set of modes that enable different behaviors.\n\n### global (default)\n\nThis is the default mode for the plugin: in this mode you need to add the import of `uno.css` on your entry point.\n\nThis mode enables a set of Vite plugins for `build` and for `dev` with `HMR` support.\n\nThe generated `css` will be a global stylesheet injected on the `index.html`.\n\n### vue-scoped (WIP)\n\nThis mode will inject generated CSS to Vue SFC's `<style scoped>` for isolation.\n\n### svelte-scoped (WIP)\n\nThis mode will inject generated CSS to Svelte's `<style>` for isolation.\n\n### per-module (WIP)\n\nThis mode will generate a CSS sheet for each module, can be scoped.\n\n### dist-chunk (WIP)\n\nThis mode will generate a CSS sheet for each code chunk on build, great for MPA.\n\n### shadow-dom\n\nSince `Web Components` uses `Shadow DOM`, there is no way to style content directly from a global stylesheet (unless you use `custom css vars`, those will penetrate the `Shadow DOM`), you need to inline the generated css by the plugin into the `Shadow DOM` style.\n\nTo inline the generated css, you only need to configure the plugin mode to `shadow-dom` and include `@unocss-placeholder` magic placeholder on each web component style css block.\n\n## Frameworks\n\nSome UI/App frameworks have some caveats that must be fixed to make it work, if you're using one of the following frameworks, just apply the suggestions.\n\n### React\n\n**WARNING**: You should import the `uno.css` virtual module using `import 'virtual:uno.css'` instead `import 'uno.css'`. When you start the dev server first time, you'll need to update some style module to get it working (we're trying to fix it).\n\nIf you're using `@vitejs/plugin-react`:\n\n```ts\n// vite.config.js\nimport react from '@vitejs/plugin-react'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    react(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nor if you're using `@vitejs/plugin-react-refresh`:\n\n```ts\n// vite.config.js\nimport reactRefresh from '@vitejs/plugin-react-refresh'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    reactRefresh(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nIf you're using `@unocss/preset-attributify` you should remove `tsc` from the `build` script.\n\nIf you are using `@vitejs/plugin-react` with `@unocss/preset-attributify`, you must add the plugin before `@vitejs/plugin-react`.\n\n```ts\n// vite.config.js\nimport react from '@vitejs/plugin-react'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      /* options */\n    }),\n    react(),\n  ],\n}\n```\n\nYou have a `React` example project on [examples/vite-react](https://github.com/unocss/unocss/tree/main/examples/vite-react) directory  using both plugins, check the scripts on `package.json` and its Vite configuration file.\n\n### Preact\n\nIf you're using `@preact/preset-vite`:\n\n```ts\n// vite.config.js\nimport preact from '@preact/preset-vite'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    preact(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nor if you're using `@prefresh/vite`:\n\n```ts\n// vite.config.js\nimport prefresh from '@prefresh/vite'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    prefresh(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nIf you're using `@unocss/preset-attributify` you should remove `tsc` from the `build` script.\n\nIf you are using `@preact/preset-vite` with `@unocss/preset-attributify`, you must add the plugin before `@preact/preset-vite`.\n\n```ts\n// vite.config.js\nimport preact from '@preact/preset-vite'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      /* options */\n    }),\n    preact(),\n  ],\n}\n```\n\nYou have a `Preact` example project on [examples/vite-preact](https://github.com/unocss/unocss/tree/main/examples/vite-preact) directory  using both plugins, check the scripts on `package.json` and its Vite configuration file.\n\n### Svelte\n\nYou must add the plugin before `@sveltejs/vite-plugin-svelte`.\n\nTo support `class:foo` and `class:foo={bar}` add the plugin and configure `extractorSvelte` on `extractors` option.\n\nYou can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/App.svelte` on linked example project bellow.\n\n```ts\n// vite.config.js\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\nimport Unocss from 'unocss/vite'\nimport { extractorSvelte } from '@unocss/core'\n\nexport default {\n  plugins: [\n    Unocss({\n      extractors: [extractorSvelte],\n      /* more options */\n    }),\n    svelte(),\n  ],\n}\n```\n\nYou have a `Vite + Svelte` example project on [examples/vite-svelte](https://github.com/unocss/unocss/tree/main/examples/vite-svelte) directory.\n\n###  Sveltekit\n\nTo support `class:foo` and `class:foo={bar}` add the plugin and configure `extractorSvelte` on `extractors` option.\n\nYou can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/routes/__layout.svelte` on linked example project bellow.\n\n```ts\n// svelte.config.js\nimport preprocess from 'svelte-preprocess'\nimport UnoCss from 'unocss/vite'\nimport { extractorSvelte } from '@unocss/core'\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n  // Consult https://github.com/sveltejs/svelte-preprocess\n  // for more information about preprocessors\n  preprocess: preprocess(),\n  kit: {\n     vite: {\n      plugins: [\n        UnoCss({\n          extractors: [extractorSvelte],\n          /* more options */\n        }),\n      ],\n    },\n  },\n}\n```\n\nYou have a `SvelteKit` example project on [examples/sveltekit](https://github.com/unocss/unocss/tree/main/examples/sveltekit) directory.\n\n### Web Components\n\nTo work with web components you need to enable `shadow-dom` mode on the plugin.\n\nDon't forget to remove the import for `uno.css` since the `shadow-dom` mode will not expose it and the application will not work.\n\n```ts\n// vite.config.js\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      mode: 'shadow-dom',\n      /* more options */\n    }),\n  ],\n}\n```\n\nOn each `web component` just add `@unocss-placeholder` to its style css block:\n```ts\nconst template = document.createElement('template')\ntemplate.innerHTML = `\n<style>\n:host {...}\n@unocss-placeholder\n</style>\n<div class=\"m-1em\">\n...\n</div>\n`\n```\n\nIf you're using [Lit](https://lit.dev/):\n\n```ts\n@customElement('my-element')\nexport class MyElement extends LitElement {\n  static styles = css`\n    :host {...}\n    @unocss-placeholder\n  `\n  ...\n}\n```\n\nYou have a `Web Components` example project on [examples/vite-lit](https://github.com/unocss/unocss/tree/main/examples/vite-lit) directory.\n\n#### `::part` built-in support\n\nYou can use `::part` since the plugin supports it via `shortcuts` and using `part-[<part-name>]:<rule|shortcut>` rule from `preset-mini`, for example using it with simple rules like `part-[<part-name>]:bg-green-500` or using some `shortcut`: check `src/my-element.ts` on linked example project bellow.\n\nThe `part-[<part-name>]:<rule|shortcut>` will work only with this plugin using the `shadow-dom` mode.\n\nThe plugin uses `nth-of-type` to avoid collisions with multiple parts in the same web component and for the same parts on distinct web components, you don't need to worry about it, the plugin will take care for you.\n\n```ts\n// vite.config.js\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      mode: 'shadow-dom',\n      shortcuts: [\n        { 'cool-blue': 'bg-blue-500 text-white' },\n        { 'cool-green': 'bg-green-500 text-black' },\n      ],\n      /* more options */\n    }),\n  ],\n}\n```\n\nthen in your web components:\n\n```ts\n// my-container-wc.ts\nconst template = document.createElement('template')\ntemplate.innerHTML = `\n<style>\n@unocss-placeholder\n</style>\n<my-wc-with-parts class=\"part-[cool-part]:cool-blue part-[another-cool-part]:cool-green\">...</my-wc-with-parts>\n`\n```\n\n```ts\n// my-wc-with-parts.ts\nconst template = document.createElement('template')\ntemplate.innerHTML = `\n<style>\n@unocss-placeholder\n</style>\n<div>\n  <div part=\"cool-part\">...</div>\n  <div part=\"another-cool-part\">...</div>\n</div>\n`\n```\n\n### Solid\n\n**WARNING**: You should import the `uno.css` virtual module using `import 'virtual:uno.css'` instead `import 'uno.css'`. When you start the dev server first time, you'll need to update some style module to get it working (we're trying to fix it).\n\n```ts\n// vite.config.js\nimport solidPlugin from 'vite-plugin-solid'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    solidPlugin(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nYou have a `Vite + Solid` example project on [examples/vite-solid](https://github.com/unocss/unocss/tree/main/examples/vite-solid) directory.\n\n### Elm\n\nYou need to add the `vite-plugin-elm` plugin before UnoCSS's plugin.\n\n```ts\n// vite.config.js\nimport { defineConfig } from 'vite'\nimport elmPlugin from 'vite-plugin-elm'\nimport Unocss from 'unocss/vite'\n\nexport default defineConfig({\n  plugins: [\n    elmPlugin(),\n    Unocss({\n      /* options */\n    }),\n  ],\n})\n```\n\nYou have a `Vite + Elm` example project on [examples/vite-elm](https://github.com/unocss/unocss/tree/main/examples/vite-elm) directory.\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
+  "readme": "# @unocss/vite\n\nThe Vite plugin for UnoCSS. Ships with the `unocss` package.\n\n> This plugin does not come with any default presets. You are building a meta framework on top of UnoCSS, see [this file](https://github.com/unocss/unocss/blob/main/packages/unocss/src/vite.ts) for an example to bind the default presets.\n\n## Installation\n\n```bash\nnpm i -D unocss\n```\n\n```ts\n// vite.config.ts\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({ /* options */ }),\n  ],\n}\n```\n\nAdd `uno.css` to your main entry:\n\n```ts\n// main.ts\nimport 'uno.css'\n```\n\n## Modes\n\nThe Vite plugin comes with a set of modes that enable different behaviors.\n\n### global (default)\n\nThis is the default mode for the plugin: in this mode you need to add the import of `uno.css` on your entry point.\n\nThis mode enables a set of Vite plugins for `build` and for `dev` with `HMR` support.\n\nThe generated `css` will be a global stylesheet injected on the `index.html`.\n\n### vue-scoped\n\nThis mode will inject generated CSS to Vue SFC's `<style scoped>` for isolation.\n\n### svelte-scoped\n\nThis mode will inject generated CSS to Svelte's `<style>` for isolation.\n\n### shadow-dom\n\nSince `Web Components` uses `Shadow DOM`, there is no way to style content directly from a global stylesheet (unless you use `custom css vars`, those will penetrate the `Shadow DOM`), you need to inline the generated css by the plugin into the `Shadow DOM` style.\n\nTo inline the generated css, you only need to configure the plugin mode to `shadow-dom` and include `@unocss-placeholder` magic placeholder on each web component style css block.\n\n### per-module (Experimental)\n\nThis mode will generate a CSS sheet for each module, can be scoped.\n\n### dist-chunk (Experimental)\n\nThis mode will generate a CSS sheet for each code chunk on build, great for MPA.\n\n## \"Design in DevTools\"\n\nBecause of limitation of \"on-demand\" where the DevTools don't know those you haven't used in your source code yet. So if you want to try how things work by directly changing the classes in DevTools, just add the following lines to your main entry.\n\n```ts\nimport 'uno.css'\nimport 'virtual:unocss-devtools'\n```\n\n> ⚠️ Please use it with caution, under the hood we use [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to detect the class changes. Which means not only your manual changes but also the changes made by your scripts will be detected and included in the stylesheet. This could cause some misalignment between dev and the production build when you add dynamic classes based on some logic in script tags. We recommended adding your dynamic parts to the [safelist](https://github.com/unocss/unocss/issues/511) or setup UI regression tests for your production build if possible.\n\n`virtual:unocss-devtools` will be an empty bundle in production.\n\n## Frameworks\n\nSome UI/App frameworks have some caveats that must be fixed to make it work, if you're using one of the following frameworks, just apply the suggestions.\n\n### React\n\n**WARNING**: You should import the `uno.css` virtual module using `import 'virtual:uno.css'` instead `import 'uno.css'`. When you start the dev server first time, you'll need to update some style module to get it working (we're trying to fix it).\n\nIf you're using `@vitejs/plugin-react`:\n\n```ts\n// vite.config.js\nimport react from '@vitejs/plugin-react'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    react(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nor if you're using `@vitejs/plugin-react-refresh`:\n\n```ts\n// vite.config.js\nimport reactRefresh from '@vitejs/plugin-react-refresh'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    reactRefresh(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nIf you're using `@unocss/preset-attributify` you should remove `tsc` from the `build` script.\n\nIf you are using `@vitejs/plugin-react` with `@unocss/preset-attributify`, you must add the plugin before `@vitejs/plugin-react`.\n\n```ts\n// vite.config.js\nimport react from '@vitejs/plugin-react'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      /* options */\n    }),\n    react(),\n  ],\n}\n```\n\nYou have a `React` example project on [examples/vite-react](https://github.com/unocss/unocss/tree/main/examples/vite-react) directory  using both plugins, check the scripts on `package.json` and its Vite configuration file.\n\n### Preact\n\nIf you're using `@preact/preset-vite`:\n\n```ts\n// vite.config.js\nimport preact from '@preact/preset-vite'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    preact(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nor if you're using `@prefresh/vite`:\n\n```ts\n// vite.config.js\nimport prefresh from '@prefresh/vite'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    prefresh(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nIf you're using `@unocss/preset-attributify` you should remove `tsc` from the `build` script.\n\nIf you are using `@preact/preset-vite` with `@unocss/preset-attributify`, you must add the plugin before `@preact/preset-vite`.\n\n```ts\n// vite.config.js\nimport preact from '@preact/preset-vite'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      /* options */\n    }),\n    preact(),\n  ],\n}\n```\n\nYou have a `Preact` example project on [examples/vite-preact](https://github.com/unocss/unocss/tree/main/examples/vite-preact) directory  using both plugins, check the scripts on `package.json` and its Vite configuration file.\n\n### Svelte\n\nYou must add the plugin before `@sveltejs/vite-plugin-svelte`.\n\nTo support `class:foo` and `class:foo={bar}` add the plugin and configure `extractorSvelte` on `extractors` option.\n\nYou can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/App.svelte` on linked example project bellow.\n\n```ts\n// vite.config.js\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\nimport Unocss from 'unocss/vite'\nimport { extractorSvelte } from '@unocss/core'\n\nexport default {\n  plugins: [\n    Unocss({\n      extractors: [extractorSvelte],\n      /* more options */\n    }),\n    svelte(),\n  ],\n}\n```\n\nYou have a `Vite + Svelte` example project on [examples/vite-svelte](https://github.com/unocss/unocss/tree/main/examples/vite-svelte) directory.\n\n###  Sveltekit\n\nTo support `class:foo` and `class:foo={bar}` add the plugin and configure `extractorSvelte` on `extractors` option.\n\nYou can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/routes/__layout.svelte` on linked example project bellow.\n\n```ts\n// svelte.config.js\nimport preprocess from 'svelte-preprocess'\nimport UnoCss from 'unocss/vite'\nimport { extractorSvelte } from '@unocss/core'\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n  // Consult https://github.com/sveltejs/svelte-preprocess\n  // for more information about preprocessors\n  preprocess: preprocess(),\n  kit: {\n     vite: {\n      plugins: [\n        UnoCss({\n          extractors: [extractorSvelte],\n          /* more options */\n        }),\n      ],\n    },\n  },\n}\n```\n\nYou have a `SvelteKit` example project on [examples/sveltekit](https://github.com/unocss/unocss/tree/main/examples/sveltekit) directory.\n\n### Web Components\n\nTo work with web components you need to enable `shadow-dom` mode on the plugin.\n\nDon't forget to remove the import for `uno.css` since the `shadow-dom` mode will not expose it and the application will not work.\n\n```ts\n// vite.config.js\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      mode: 'shadow-dom',\n      /* more options */\n    }),\n  ],\n}\n```\n\nOn each `web component` just add `@unocss-placeholder` to its style css block:\n```ts\nconst template = document.createElement('template')\ntemplate.innerHTML = `\n<style>\n:host {...}\n@unocss-placeholder\n</style>\n<div class=\"m-1em\">\n...\n</div>\n`\n```\n\nIf you're using [Lit](https://lit.dev/):\n\n```ts\n@customElement('my-element')\nexport class MyElement extends LitElement {\n  static styles = css`\n    :host {...}\n    @unocss-placeholder\n  `\n  // ...\n}\n```\n\nYou have a `Web Components` example project on [examples/vite-lit](https://github.com/unocss/unocss/tree/main/examples/vite-lit) directory.\n\n#### `::part` built-in support\n\nYou can use `::part` since the plugin supports it via `shortcuts` and using `part-[<part-name>]:<rule|shortcut>` rule from `preset-mini`, for example using it with simple rules like `part-[<part-name>]:bg-green-500` or using some `shortcut`: check `src/my-element.ts` on linked example project bellow.\n\nThe `part-[<part-name>]:<rule|shortcut>` will work only with this plugin using the `shadow-dom` mode.\n\nThe plugin uses `nth-of-type` to avoid collisions with multiple parts in the same web component and for the same parts on distinct web components, you don't need to worry about it, the plugin will take care for you.\n\n```ts\n// vite.config.js\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    Unocss({\n      mode: 'shadow-dom',\n      shortcuts: [\n        { 'cool-blue': 'bg-blue-500 text-white' },\n        { 'cool-green': 'bg-green-500 text-black' },\n      ],\n      /* more options */\n    }),\n  ],\n}\n```\n\nthen in your web components:\n\n```ts\n// my-container-wc.ts\nconst template = document.createElement('template')\ntemplate.innerHTML = `\n<style>\n@unocss-placeholder\n</style>\n<my-wc-with-parts class=\"part-[cool-part]:cool-blue part-[another-cool-part]:cool-green\">...</my-wc-with-parts>\n`\n```\n\n```ts\n// my-wc-with-parts.ts\nconst template = document.createElement('template')\ntemplate.innerHTML = `\n<style>\n@unocss-placeholder\n</style>\n<div>\n  <div part=\"cool-part\">...</div>\n  <div part=\"another-cool-part\">...</div>\n</div>\n`\n```\n\n### Solid\n\n**WARNING**: You should import the `uno.css` virtual module using `import 'virtual:uno.css'` instead `import 'uno.css'`. When you start the dev server first time, you'll need to update some style module to get it working (we're trying to fix it).\n\n```ts\n// vite.config.js\nimport solidPlugin from 'vite-plugin-solid'\nimport Unocss from 'unocss/vite'\n\nexport default {\n  plugins: [\n    solidPlugin(),\n    Unocss({\n      /* options */\n    }),\n  ],\n}\n```\n\nYou have a `Vite + Solid` example project on [examples/vite-solid](https://github.com/unocss/unocss/tree/main/examples/vite-solid) directory.\n\n### Elm\n\nYou need to add the `vite-plugin-elm` plugin before UnoCSS's plugin.\n\n```ts\n// vite.config.js\nimport { defineConfig } from 'vite'\nimport elmPlugin from 'vite-plugin-elm'\nimport Unocss from 'unocss/vite'\n\nexport default defineConfig({\n  plugins: [\n    elmPlugin(),\n    Unocss({\n      /* options */\n    }),\n  ],\n})\n```\n\nYou have a `Vite + Elm` example project on [examples/vite-elm](https://github.com/unocss/unocss/tree/main/examples/vite-elm) directory.\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
 }