fix(vite): don't escape css in vue web components (#1945)

unocss · Dec 2, 2022 · d4c6419 · d4c6419
1 parent 18a5686
commit d4c6419
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -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)
       }
     },
   }