From d4c64198844d2cd047e4f2189141789ad4ade244 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 2 Dec 2022 06:16:16 +0300
Subject: [PATCH] fix(vite): don't escape css in vue web components (#1945)

---
 packages/vite/README.md               |  2 +-
 packages/vite/src/modes/shadow-dom.ts | 15 +++++++++++----
 2 files changed, 12 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..8e9c9dda17 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
@@ -43,7 +45,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 +100,25 @@ 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 || '')
+
     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)
       }
     },
   }