From 2f320a279c1dd763326dac16dbafa3040d2e745e Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 2 Dec 2022 02:59:41 +0300
Subject: [PATCH 1/3] fix(vite): don't escape css in vue web components

---
 packages/vite/README.md               |  2 +-
 packages/vite/src/modes/shadow-dom.ts | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/vite/README.md b/packages/vite/README.md
index 351f3de1f2..fced48d66d 100644
--- a/packages/vite/README.md
+++ b/packages/vite/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)
 
diff --git a/packages/vite/src/modes/shadow-dom.ts b/packages/vite/src/modes/shadow-dom.ts
index e0f8c72056..d2e7093497 100644
--- a/packages/vite/src/modes/shadow-dom.ts
+++ b/packages/vite/src/modes/shadow-dom.ts
@@ -43,7 +43,7 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
       },
     }
   }
-  const transformWebComponent = async (code: string) => {
+  const transformWebComponent = async (code: string, id: string) => {
     if (!code.match(CSS_PLACEHOLDER))
       return code
 
@@ -98,20 +98,29 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
       }
     }
 
+    if (id.endsWith('.vue') && code.match(new RegExp(`<style.*>[\\s\\S]*${CSS_PLACEHOLDER}[\\s\\S]*<\\/style>`))) {
+      code = code.replace(new RegExp(`\\/\\*\\s*${CSS_PLACEHOLDER}\\s*\\*\\/`), css || '')
+      code = code.replace(CSS_PLACEHOLDER, css || '')
+      return code
+    }
+
+    if (id.includes('?vue&type=style'))
+      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)
       }
     },
   }

From 836857ffad1c4fe480dee6d91ad41ae811757c00 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 2 Dec 2022 03:56:30 +0300
Subject: [PATCH 2/3] refactor: simplify logic

---
 packages/vite/src/modes/shadow-dom.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/modes/shadow-dom.ts b/packages/vite/src/modes/shadow-dom.ts
index d2e7093497..55206ce5c9 100644
--- a/packages/vite/src/modes/shadow-dom.ts
+++ b/packages/vite/src/modes/shadow-dom.ts
@@ -5,6 +5,8 @@ import { CSS_PLACEHOLDER } from '../integration'
 export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin {
   const partExtractorRegex = /^part-\[(.+)]:/
   const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/
+  const vueSFCStyleRE = new RegExp(`<style.*>[\\s\\S]*${CSS_PLACEHOLDER}[\\s\\S]*<\\/style>`)
+
   interface PartData {
     part: string
     rule: string
@@ -98,13 +100,7 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
       }
     }
 
-    if (id.endsWith('.vue') && code.match(new RegExp(`<style.*>[\\s\\S]*${CSS_PLACEHOLDER}[\\s\\S]*<\\/style>`))) {
-      code = code.replace(new RegExp(`\\/\\*\\s*${CSS_PLACEHOLDER}\\s*\\*\\/`), css || '')
-      code = code.replace(CSS_PLACEHOLDER, css || '')
-      return code
-    }
-
-    if (id.includes('?vue&type=style'))
+    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, '\\\\') ?? '')

From 0bcdd014a39755e71260d7156ccc2c75e8d9e9a7 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 2 Dec 2022 06:02:58 +0300
Subject: [PATCH 3/3] add comment

---
 packages/vite/src/modes/shadow-dom.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vite/src/modes/shadow-dom.ts b/packages/vite/src/modes/shadow-dom.ts
index 55206ce5c9..8e9c9dda17 100644
--- a/packages/vite/src/modes/shadow-dom.ts
+++ b/packages/vite/src/modes/shadow-dom.ts
@@ -100,6 +100,8 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
       }
     }
 
+    // We don't need to escape backslashes here, because, unlike the other
+    // shadow-dom targets, style block in Vue SFC is not a string literal.
     if (id.includes('?vue&type=style') || (id.endsWith('.vue') && vueSFCStyleRE.test(code)))
       return code.replace(new RegExp(`(\\/\\*\\s*)?${CSS_PLACEHOLDER}(\\s*\\*\\/)?`), css || '')