@unocss/vite 0.47.5 → 0.48.0

package/README.md

@@ -75,7 +75,7 @@ This mode will inject generated CSS to Svelte's `<style>` for isolation.
 
 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.
+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. If you are defining your Web Components in Vue SFCs and want to define custom styles alongside UnoCSS, you can wrap placeholder in a CSS comment to avoid syntax errors in your IDE.
 
 ###### `per-module` (Experimental)
 

package/dist/index.cjs

@@ -9,16 +9,20 @@ const config = require('@unocss/config');
 const crypto = require('crypto');
 const MagicString = require('magic-string');
 const path = require('path');
+const fs = require('fs/promises');
+const fg = require('fast-glob');
 const remapping = require('@ampproject/remapping');
-const fs = require('fs');
+const fs$1 = require('fs');
 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 remapping__default = /*#__PURE__*/_interopDefaultLegacy(remapping);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+const fg__default = /*#__PURE__*/_interopDefaultLegacy(fg);
+const remapping__default = /*#__PURE__*/_interopDefaultLegacy(remapping);
+const fs__default$1 = /*#__PURE__*/_interopDefaultLegacy(fs$1);
 
 const defaultExclude = [core.cssIdRE];
 const defaultInclude = [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/];
@@ -68,6 +72,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   const reloadListeners = [];
   const modules = new core.BetterMap();
   const tokens = /* @__PURE__ */ new Set();
+  const tasks = [];
   const affectedModules = /* @__PURE__ */ new Set();
   let ready = reloadConfig();
   async function reloadConfig() {
@@ -117,15 +122,20 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     if (tokens.size > len)
       invalidate();
   }
-  const filter = (code, id) => {
+  function filter(code, id) {
     if (code.includes(IGNORE_COMMENT))
       return false;
     return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id.replace(/\?v=\w+$/, ""));
-  };
+  }
   async function getConfig() {
     await ready;
     return rawConfig;
   }
+  async function flushTasks() {
+    const _tasks = [...tasks];
+    await Promise.all(_tasks);
+    tasks.splice(0, _tasks.length);
+  }
   return {
     get ready() {
       return ready;
@@ -133,6 +143,8 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     tokens,
     modules,
     affectedModules,
+    tasks,
+    flushTasks,
     invalidate,
     onInvalidate(fn) {
       invalidations.push(fn);
@@ -224,20 +236,93 @@ function ChunkModeBuildPlugin({ uno, filter }) {
   };
 }
 
-function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }) {
+async function applyTransformers(ctx, original, id, enforce = "default") {
+  if (original.includes(IGNORE_COMMENT))
+    return;
+  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
+  if (!transformers.length)
+    return;
+  let code = original;
+  let s = new MagicString__default(code);
+  const maps = [];
+  for (const t of transformers) {
+    if (t.idFilter) {
+      if (!t.idFilter(id))
+        continue;
+    } else if (!ctx.filter(code, id)) {
+      continue;
+    }
+    await t.transform(s, id, ctx);
+    if (s.hasChanged()) {
+      code = s.toString();
+      maps.push(s.generateMap({ hires: true, source: id }));
+      s = new MagicString__default(code);
+    }
+  }
+  if (code !== original) {
+    ctx.affectedModules.add(id);
+    return {
+      code,
+      map: remapping__default(maps, () => null)
+    };
+  }
+}
+
+async function setupExtraContent(ctx, shouldWatch = false) {
+  const { extraContent } = await ctx.getConfig();
+  const { extract, tasks, root, filter } = ctx;
+  if (extraContent?.plain) {
+    await Promise.all(
+      extraContent.plain.map((code, idx) => {
+        return extract(code, `__extra_content_${idx}__`);
+      })
+    );
+  }
+  if (extraContent?.filesystem) {
+    const files = await fg__default(extraContent.filesystem, { cwd: root });
+    async function extractFile(file) {
+      const code = await fs__default.readFile(file, "utf-8");
+      if (!filter(code, file))
+        return;
+      const preTransform = await applyTransformers(ctx, code, file, "pre");
+      const defaultTransform = await applyTransformers(ctx, preTransform?.code || code, file);
+      await applyTransformers(ctx, defaultTransform?.code || preTransform?.code || code, file, "post");
+      return await extract(preTransform?.code || code, file);
+    }
+    if (shouldWatch) {
+      const { watch } = await import('chokidar');
+      const ignored = ["**/{.git,node_modules}/**"];
+      const watcher = watch(files, {
+        ignorePermissionErrors: true,
+        ignored,
+        cwd: root,
+        ignoreInitial: true
+      });
+      watcher.on("all", (type, file) => {
+        if (type === "add" || type === "change") {
+          const absolutePath = path.resolve(root, file);
+          tasks.push(extractFile(absolutePath));
+        }
+      });
+    }
+    await Promise.all(files.map(extractFile));
+  }
+}
+
+function GlobalModeBuildPlugin(ctx) {
+  const { uno, ready, extract, tokens, filter, getConfig, tasks, flushTasks } = ctx;
   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, ctx) {
+  async function applyCssTransform(css, id, dir, ctx2) {
     const {
       postcss = true
     } = await getConfig();
     if (!cssPlugins.get(dir) || !postcss)
       return css;
-    const result = await cssPlugins.get(dir).transform.call(ctx, css, id);
+    const result = await cssPlugins.get(dir).transform.call(ctx2, css, id);
     if (!result)
       return css;
     if (typeof result === "string")
@@ -250,20 +335,22 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
   let lastTokenSize = 0;
   let lastResult;
   async function generateAll() {
-    await Promise.all(tasks);
+    await flushTasks();
     if (lastResult && lastTokenSize === tokens.size)
       return lastResult;
     lastResult = await uno.generate(tokens, { minify: true });
     lastTokenSize = tokens.size;
     return lastResult;
   }
+  let replaced = false;
   return [
     {
       name: "unocss:global:build:scan",
       apply: "build",
       enforce: "pre",
-      buildStart() {
-        tasks = [];
+      async buildStart() {
+        vfsLayers.clear();
+        tasks.length = 0;
         lastTokenSize = 0;
         lastResult = void 0;
       },
@@ -334,6 +421,16 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         return null;
       }
     },
+    {
+      name: "unocss:global:content",
+      enforce: "pre",
+      configResolved(config) {
+        viteConfig = config;
+      },
+      buildStart() {
+        tasks.push(setupExtraContent(ctx, viteConfig.command === "serve"));
+      }
+    },
     {
       name: "unocss:global:build:generate",
       apply: "build",
@@ -358,9 +455,6 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
     {
       name: "unocss:global:build:bundle",
       apply: "build",
-      configResolved(config) {
-        viteConfig = config;
-      },
       enforce: "post",
       async generateBundle(options, bundle) {
         const checkJs = ["umd", "amd", "iife"].includes(options.format);
@@ -368,11 +462,12 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         if (!files.length)
           return;
         if (!vfsLayers.size) {
+          if (replaced)
+            return;
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
           this.warn(msg);
           return;
         }
-        let replaced = false;
         const getLayer = (layer, input, replace = false) => {
           const re = new RegExp(`#--unocss-layer-start--${layer}--\\{start:${layer}\\}([\\s\\S]*?)#--unocss-layer-end--${layer}--\\{end:${layer}\\}`, "g");
           if (replace)
@@ -411,7 +506,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
             msg += "\nIt seems you are building in library mode, it's recommended 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));
+          this.error(msg);
         }
       }
     }
@@ -421,10 +516,9 @@ 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 }) {
+function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
-  const tasks = [];
   const entries = /* @__PURE__ */ new Set();
   let invalidateTimer;
   const lastServedHash = /* @__PURE__ */ new Map();
@@ -432,7 +526,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
   let resolved = false;
   let resolvedWarnTimer;
   async function generateCSS(layer) {
-    await Promise.all(tasks);
+    await flushTasks();
     let result;
     let tokensSize = tokens.size;
     do {
@@ -889,6 +983,7 @@ function SvelteScopedPlugin({ ready, uno }) {
 function ShadowDomModuleModePlugin({ uno }) {
   const partExtractorRegex = /^part-\[(.+)]:/;
   const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/;
+  const vueSFCStyleRE = new RegExp(`<style.*>[\\s\\S]*${CSS_PLACEHOLDER}[\\s\\S]*<\\/style>`);
   const checkElement = (useParts, idxResolver, element) => {
     if (!element)
       return null;
@@ -921,7 +1016,7 @@ function ShadowDomModuleModePlugin({ uno }) {
       }
     };
   };
-  const transformWebComponent = async (code) => {
+  const transformWebComponent = async (code, id) => {
     if (!code.match(CSS_PLACEHOLDER))
       return code;
     let { css, matched } = await uno.generate(code, {
@@ -966,19 +1061,21 @@ function ShadowDomModuleModePlugin({ uno }) {
         }
       }
     }
+    if (id.includes("?vue&type=style") || id.endsWith(".vue") && vueSFCStyleRE.test(code))
+      return code.replace(new RegExp(`(\\/\\*\\s*)?${CSS_PLACEHOLDER}(\\s*\\*\\/)?`), css || "");
     return code.replace(CSS_PLACEHOLDER, css?.replace(/\\/g, "\\\\") ?? "");
   };
   return {
     name: "unocss:shadow-dom",
     enforce: "pre",
-    async transform(code) {
-      return transformWebComponent(code);
+    async transform(code, id) {
+      return transformWebComponent(code, id);
     },
     handleHotUpdate(ctx) {
       const read = ctx.read;
       ctx.read = async () => {
         const code = await read();
-        return await transformWebComponent(code);
+        return await transformWebComponent(code, ctx.file);
       };
     }
   };
@@ -1010,38 +1107,6 @@ function ConfigHMRPlugin(ctx) {
   };
 }
 
-async function applyTransformers(ctx, original, id, enforce = "default") {
-  if (original.includes(IGNORE_COMMENT))
-    return;
-  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
-  if (!transformers.length)
-    return;
-  let code = original;
-  let s = new MagicString__default(code);
-  const maps = [];
-  for (const t of transformers) {
-    if (t.idFilter) {
-      if (!t.idFilter(id))
-        continue;
-    } else if (!ctx.filter(code, id)) {
-      continue;
-    }
-    await t.transform(s, id, ctx);
-    if (s.hasChanged()) {
-      code = s.toString();
-      maps.push(s.generateMap({ hires: true, source: id }));
-      s = new MagicString__default(code);
-    }
-  }
-  if (code !== original) {
-    ctx.affectedModules.add(id);
-    return {
-      code,
-      map: remapping__default(maps, () => null)
-    };
-  }
-}
-
 function createTransformerPlugins(ctx) {
   const enforces = ["default", "pre", "post"];
   return enforces.map((enforce) => ({
@@ -1169,7 +1234,7 @@ function createDevtoolsPlugin(ctx) {
         if (id === DEVTOOLS_PATH) {
           if (!clientCode) {
             clientCode = [
-              await fs__default.promises.readFile(path.resolve(_dirname, "client.mjs"), "utf-8"),
+              await fs__default$1.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);

package/dist/index.d.ts

@@ -39,9 +39,9 @@ interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Theme> {
 
 declare function ChunkModeBuildPlugin({ uno, filter }: UnocssPluginContext): Plugin;
 
-declare function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[];
+declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[];
 
-declare function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }: UnocssPluginContext<VitePluginConfig>): Plugin[];
+declare function GlobalModeBuildPlugin(ctx: UnocssPluginContext<VitePluginConfig>): Plugin[];
 
 declare function GlobalModePlugin(ctx: UnocssPluginContext): vite.Plugin[];
 

package/dist/index.mjs

@@ -5,8 +5,10 @@ import { loadConfig } from '@unocss/config';
 import { createHash } from 'crypto';
 import MagicString from 'magic-string';
 import { resolve, dirname } from 'path';
+import fs from 'fs/promises';
+import fg from 'fast-glob';
 import remapping from '@ampproject/remapping';
-import fs from 'fs';
+import fs$1 from 'fs';
 import { fileURLToPath } from 'url';
 
 const defaultExclude = [cssIdRE];
@@ -57,6 +59,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   const reloadListeners = [];
   const modules = new BetterMap();
   const tokens = /* @__PURE__ */ new Set();
+  const tasks = [];
   const affectedModules = /* @__PURE__ */ new Set();
   let ready = reloadConfig();
   async function reloadConfig() {
@@ -106,15 +109,20 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     if (tokens.size > len)
       invalidate();
   }
-  const filter = (code, id) => {
+  function filter(code, id) {
     if (code.includes(IGNORE_COMMENT))
       return false;
     return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id.replace(/\?v=\w+$/, ""));
-  };
+  }
   async function getConfig() {
     await ready;
     return rawConfig;
   }
+  async function flushTasks() {
+    const _tasks = [...tasks];
+    await Promise.all(_tasks);
+    tasks.splice(0, _tasks.length);
+  }
   return {
     get ready() {
       return ready;
@@ -122,6 +130,8 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     tokens,
     modules,
     affectedModules,
+    tasks,
+    flushTasks,
     invalidate,
     onInvalidate(fn) {
       invalidations.push(fn);
@@ -213,20 +223,93 @@ function ChunkModeBuildPlugin({ uno, filter }) {
   };
 }
 
-function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }) {
+async function applyTransformers(ctx, original, id, enforce = "default") {
+  if (original.includes(IGNORE_COMMENT))
+    return;
+  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
+  if (!transformers.length)
+    return;
+  let code = original;
+  let s = new MagicString(code);
+  const maps = [];
+  for (const t of transformers) {
+    if (t.idFilter) {
+      if (!t.idFilter(id))
+        continue;
+    } else if (!ctx.filter(code, id)) {
+      continue;
+    }
+    await t.transform(s, id, ctx);
+    if (s.hasChanged()) {
+      code = s.toString();
+      maps.push(s.generateMap({ hires: true, source: id }));
+      s = new MagicString(code);
+    }
+  }
+  if (code !== original) {
+    ctx.affectedModules.add(id);
+    return {
+      code,
+      map: remapping(maps, () => null)
+    };
+  }
+}
+
+async function setupExtraContent(ctx, shouldWatch = false) {
+  const { extraContent } = await ctx.getConfig();
+  const { extract, tasks, root, filter } = ctx;
+  if (extraContent?.plain) {
+    await Promise.all(
+      extraContent.plain.map((code, idx) => {
+        return extract(code, `__extra_content_${idx}__`);
+      })
+    );
+  }
+  if (extraContent?.filesystem) {
+    const files = await fg(extraContent.filesystem, { cwd: root });
+    async function extractFile(file) {
+      const code = await fs.readFile(file, "utf-8");
+      if (!filter(code, file))
+        return;
+      const preTransform = await applyTransformers(ctx, code, file, "pre");
+      const defaultTransform = await applyTransformers(ctx, preTransform?.code || code, file);
+      await applyTransformers(ctx, defaultTransform?.code || preTransform?.code || code, file, "post");
+      return await extract(preTransform?.code || code, file);
+    }
+    if (shouldWatch) {
+      const { watch } = await import('chokidar');
+      const ignored = ["**/{.git,node_modules}/**"];
+      const watcher = watch(files, {
+        ignorePermissionErrors: true,
+        ignored,
+        cwd: root,
+        ignoreInitial: true
+      });
+      watcher.on("all", (type, file) => {
+        if (type === "add" || type === "change") {
+          const absolutePath = resolve(root, file);
+          tasks.push(extractFile(absolutePath));
+        }
+      });
+    }
+    await Promise.all(files.map(extractFile));
+  }
+}
+
+function GlobalModeBuildPlugin(ctx) {
+  const { uno, ready, extract, tokens, filter, getConfig, tasks, flushTasks } = ctx;
   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, ctx) {
+  async function applyCssTransform(css, id, dir, ctx2) {
     const {
       postcss = true
     } = await getConfig();
     if (!cssPlugins.get(dir) || !postcss)
       return css;
-    const result = await cssPlugins.get(dir).transform.call(ctx, css, id);
+    const result = await cssPlugins.get(dir).transform.call(ctx2, css, id);
     if (!result)
       return css;
     if (typeof result === "string")
@@ -239,20 +322,22 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
   let lastTokenSize = 0;
   let lastResult;
   async function generateAll() {
-    await Promise.all(tasks);
+    await flushTasks();
     if (lastResult && lastTokenSize === tokens.size)
       return lastResult;
     lastResult = await uno.generate(tokens, { minify: true });
     lastTokenSize = tokens.size;
     return lastResult;
   }
+  let replaced = false;
   return [
     {
       name: "unocss:global:build:scan",
       apply: "build",
       enforce: "pre",
-      buildStart() {
-        tasks = [];
+      async buildStart() {
+        vfsLayers.clear();
+        tasks.length = 0;
         lastTokenSize = 0;
         lastResult = void 0;
       },
@@ -323,6 +408,16 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         return null;
       }
     },
+    {
+      name: "unocss:global:content",
+      enforce: "pre",
+      configResolved(config) {
+        viteConfig = config;
+      },
+      buildStart() {
+        tasks.push(setupExtraContent(ctx, viteConfig.command === "serve"));
+      }
+    },
     {
       name: "unocss:global:build:generate",
       apply: "build",
@@ -347,9 +442,6 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
     {
       name: "unocss:global:build:bundle",
       apply: "build",
-      configResolved(config) {
-        viteConfig = config;
-      },
       enforce: "post",
       async generateBundle(options, bundle) {
         const checkJs = ["umd", "amd", "iife"].includes(options.format);
@@ -357,11 +449,12 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         if (!files.length)
           return;
         if (!vfsLayers.size) {
+          if (replaced)
+            return;
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
           this.warn(msg);
           return;
         }
-        let replaced = false;
         const getLayer = (layer, input, replace = false) => {
           const re = new RegExp(`#--unocss-layer-start--${layer}--\\{start:${layer}\\}([\\s\\S]*?)#--unocss-layer-end--${layer}--\\{end:${layer}\\}`, "g");
           if (replace)
@@ -400,7 +493,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
             msg += "\nIt seems you are building in library mode, it's recommended 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));
+          this.error(msg);
         }
       }
     }
@@ -410,10 +503,9 @@ 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 }) {
+function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
-  const tasks = [];
   const entries = /* @__PURE__ */ new Set();
   let invalidateTimer;
   const lastServedHash = /* @__PURE__ */ new Map();
@@ -421,7 +513,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
   let resolved = false;
   let resolvedWarnTimer;
   async function generateCSS(layer) {
-    await Promise.all(tasks);
+    await flushTasks();
     let result;
     let tokensSize = tokens.size;
     do {
@@ -878,6 +970,7 @@ function SvelteScopedPlugin({ ready, uno }) {
 function ShadowDomModuleModePlugin({ uno }) {
   const partExtractorRegex = /^part-\[(.+)]:/;
   const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/;
+  const vueSFCStyleRE = new RegExp(`<style.*>[\\s\\S]*${CSS_PLACEHOLDER}[\\s\\S]*<\\/style>`);
   const checkElement = (useParts, idxResolver, element) => {
     if (!element)
       return null;
@@ -910,7 +1003,7 @@ function ShadowDomModuleModePlugin({ uno }) {
       }
     };
   };
-  const transformWebComponent = async (code) => {
+  const transformWebComponent = async (code, id) => {
     if (!code.match(CSS_PLACEHOLDER))
       return code;
     let { css, matched } = await uno.generate(code, {
@@ -955,19 +1048,21 @@ function ShadowDomModuleModePlugin({ uno }) {
         }
       }
     }
+    if (id.includes("?vue&type=style") || id.endsWith(".vue") && vueSFCStyleRE.test(code))
+      return code.replace(new RegExp(`(\\/\\*\\s*)?${CSS_PLACEHOLDER}(\\s*\\*\\/)?`), css || "");
     return code.replace(CSS_PLACEHOLDER, css?.replace(/\\/g, "\\\\") ?? "");
   };
   return {
     name: "unocss:shadow-dom",
     enforce: "pre",
-    async transform(code) {
-      return transformWebComponent(code);
+    async transform(code, id) {
+      return transformWebComponent(code, id);
     },
     handleHotUpdate(ctx) {
       const read = ctx.read;
       ctx.read = async () => {
         const code = await read();
-        return await transformWebComponent(code);
+        return await transformWebComponent(code, ctx.file);
       };
     }
   };
@@ -999,38 +1094,6 @@ function ConfigHMRPlugin(ctx) {
   };
 }
 
-async function applyTransformers(ctx, original, id, enforce = "default") {
-  if (original.includes(IGNORE_COMMENT))
-    return;
-  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
-  if (!transformers.length)
-    return;
-  let code = original;
-  let s = new MagicString(code);
-  const maps = [];
-  for (const t of transformers) {
-    if (t.idFilter) {
-      if (!t.idFilter(id))
-        continue;
-    } else if (!ctx.filter(code, id)) {
-      continue;
-    }
-    await t.transform(s, id, ctx);
-    if (s.hasChanged()) {
-      code = s.toString();
-      maps.push(s.generateMap({ hires: true, source: id }));
-      s = new MagicString(code);
-    }
-  }
-  if (code !== original) {
-    ctx.affectedModules.add(id);
-    return {
-      code,
-      map: remapping(maps, () => null)
-    };
-  }
-}
-
 function createTransformerPlugins(ctx) {
   const enforces = ["default", "pre", "post"];
   return enforces.map((enforce) => ({
@@ -1158,7 +1221,7 @@ function createDevtoolsPlugin(ctx) {
         if (id === DEVTOOLS_PATH) {
           if (!clientCode) {
             clientCode = [
-              await fs.promises.readFile(resolve(_dirname, "client.mjs"), "utf-8"),
+              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 ?? "") + POST_PATH);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.47.5",
+  "version": "0.48.0",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,21 +39,23 @@
     "dist"
   ],
   "peerDependencies": {
-    "vite": "^2.9.0 || ^3.0.0-0"
+    "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0"
   },
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@unocss/config": "0.47.5",
-    "@unocss/core": "0.47.5",
-    "@unocss/inspector": "0.47.5",
-    "@unocss/scope": "0.47.5",
-    "@unocss/transformer-directives": "0.47.5",
-    "magic-string": "^0.26.7"
+    "@unocss/config": "0.48.0",
+    "@unocss/core": "0.48.0",
+    "@unocss/inspector": "0.48.0",
+    "@unocss/scope": "0.48.0",
+    "@unocss/transformer-directives": "0.48.0",
+    "chokidar": "^3.5.3",
+    "fast-glob": "^3.2.12",
+    "magic-string": "^0.27.0"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.47.5",
-    "vite": "^3.2.4"
+    "@unocss/shared-integration": "0.48.0",
+    "vite": "^4.0.0"
   },
   "scripts": {
     "build": "unbuild",