@unocss/vite 0.47.5 → 0.47.6

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

@@ -411,7 +411,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);
         }
       }
     }
@@ -889,6 +889,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 +922,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 +967,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);
       };
     }
   };

package/dist/index.mjs

@@ -400,7 +400,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);
         }
       }
     }
@@ -878,6 +878,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 +911,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 +956,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);
       };
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.47.5",
+  "version": "0.47.6",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,21 +39,21 @@
     "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.47.6",
+    "@unocss/core": "0.47.6",
+    "@unocss/inspector": "0.47.6",
+    "@unocss/scope": "0.47.6",
+    "@unocss/transformer-directives": "0.47.6",
+    "magic-string": "^0.27.0"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.47.5",
-    "vite": "^3.2.4"
+    "@unocss/shared-integration": "0.47.6",
+    "vite": "^4.0.0"
   },
   "scripts": {
     "build": "unbuild",