fix(vite): escape typography preflights with shadow-dom mode (#3004)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Aug 19, 2023 · 162a900 · 162a900
1 parent cfcbe71
commit 162a900
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/examples/vite-lit/package.json b/examples/vite-lit/package.json
@@ -22,6 +22,7 @@
     "@unocss/core": "link:../../packages/core",
     "@unocss/preset-attributify": "link:../../packages/preset-attributify",
     "@unocss/preset-icons": "link:../../packages/preset-icons",
+    "@unocss/preset-typography": "link:../../packages/preset-typography",
     "typescript": "^5.1.6",
     "unocss": "link:../../packages/unocss",
     "vite": "^4.4.9",

diff --git a/examples/vite-lit/src/my-element.ts b/examples/vite-lit/src/my-element.ts
@@ -41,33 +41,35 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <span class="logo"></span>
-      <h1 class="mt-2em animate-jack-in-the-box animate-duration-2s" text-green-600>Hello, ${this.name}!</h1>
-      <br />
-      ${this.span ? html` <div class="bg-red-400">BG Color should change</div>` : html` <div>BG Color should change</div>`}
-      <br />
-      <br />
-      <button class="shadow-2xl bg-white p-4 rounded-lg border-none" part="button">
-        prefligths: shadow-2xl
-      </button>
-      <br />
-      <br />
-      <button class="bg-red-100" @click=${this._onClick} part="button">
-        Click Count: ${this.count}
-      </button>
-      <button @click=${this._toggleSpan} part="button">
-        Change BG Color:: ${this.span ? 'Normal' : 'Red'}
-      </button>
-      <my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-green">Testing css part</my-another-element>
-      <my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
-      <my-another-element class="part-[cool-part]:cool-blue  part-[another-cool-part]:cool-green">Testing css part</my-another-element>
-      <my-another-element class="part-[cool-part]:cool-blue  part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
-      <my-another-element class="part-[cool-part]:cool-green">Testing css part</my-another-element>
-      <my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
-      <my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
-      <my-collision-element class="part-[cool-part]:cool-blue">Testing css part</my-collision-element>
-      <my-collision-element class="part-[cool-part]:cool-green part-[another-cool-part]:bg-red-500">Testing css part</my-collision-element>
-      <slot></slot>
+      <div class="prose">
+        <span class="logo"></span>
+        <h1 class="mt-2em animate-jack-in-the-box animate-duration-2s" text-green-600>Hello, ${this.name}!</h1>
+        <br />
+        ${this.span ? html` <div class="bg-red-400">BG Color should change</div>` : html` <div>BG Color should change</div>`}
+        <br />
+        <br />
+        <button class="shadow-2xl bg-white p-4 rounded-lg border-none" part="button">
+          prefligths: shadow-2xl
+        </button>
+        <br />
+        <br />
+        <button class="bg-red-100" @click=${this._onClick} part="button">
+          Click Count: ${this.count}
+        </button>
+        <button @click=${this._toggleSpan} part="button">
+          Change BG Color:: ${this.span ? 'Normal' : 'Red'}
+        </button>
+        <my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-green">Testing css part</my-another-element>
+        <my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
+        <my-another-element class="part-[cool-part]:cool-blue  part-[another-cool-part]:cool-green">Testing css part</my-another-element>
+        <my-another-element class="part-[cool-part]:cool-blue  part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
+        <my-another-element class="part-[cool-part]:cool-green">Testing css part</my-another-element>
+        <my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
+        <my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
+        <my-collision-element class="part-[cool-part]:cool-blue">Testing css part</my-collision-element>
+        <my-collision-element class="part-[cool-part]:cool-green part-[another-cool-part]:bg-red-500">Testing css part</my-collision-element>
+        <slot></slot>
+      </div>
     `
   }
 

diff --git a/examples/vite-lit/vite.config.ts b/examples/vite-lit/vite.config.ts
@@ -3,6 +3,7 @@ import UnoCSS from 'unocss/vite'
 import presetIcons from '@unocss/preset-icons'
 import presetUno from '@unocss/preset-uno'
 import presetAttributify from '@unocss/preset-attributify'
+import presetTypography from '@unocss/preset-typography'
 import ViteInspector from 'vite-plugin-inspect'
 
 // https://vitejs.dev/config/
@@ -33,6 +34,7 @@ export default defineConfig({
             'vertical-align': 'middle',
           },
         }),
+        presetTypography(),
       ],
       inspector: false,
     }),

diff --git a/packages/vite/src/modes/shadow-dom.ts b/packages/vite/src/modes/shadow-dom.ts
@@ -104,7 +104,7 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
     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 code.replace(CSS_PLACEHOLDER, css?.replace(/\\/g, '\\\\')?.replace(/`/g, '\\`') ?? '')
   }
 
   return {