Skip to content

Commit 162a900

Browse files
zyyvantfu
zyyv
and
antfu
authored
fix(vite): escape typography preflights with shadow-dom mode (#3004)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
1 parent cfcbe71 commit 162a900

File tree

4 files changed

+33
-28
lines changed

4 files changed

+33
-28
lines changed

‎examples/vite-lit/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@unocss/core": "link:../../packages/core",
2323
"@unocss/preset-attributify": "link:../../packages/preset-attributify",
2424
"@unocss/preset-icons": "link:../../packages/preset-icons",
25+
"@unocss/preset-typography": "link:../../packages/preset-typography",
2526
"typescript": "^5.1.6",
2627
"unocss": "link:../../packages/unocss",
2728
"vite": "^4.4.9",

‎examples/vite-lit/src/my-element.ts

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -41,33 +41,35 @@ export class MyElement extends LitElement {
4141

4242
render() {
4343
return html`
44-
<span class="logo"></span>
45-
<h1 class="mt-2em animate-jack-in-the-box animate-duration-2s" text-green-600>Hello, ${this.name}!</h1>
46-
<br />
47-
${this.span ? html` <div class="bg-red-400">BG Color should change</div>` : html` <div>BG Color should change</div>`}
48-
<br />
49-
<br />
50-
<button class="shadow-2xl bg-white p-4 rounded-lg border-none" part="button">
51-
prefligths: shadow-2xl
52-
</button>
53-
<br />
54-
<br />
55-
<button class="bg-red-100" @click=${this._onClick} part="button">
56-
Click Count: ${this.count}
57-
</button>
58-
<button @click=${this._toggleSpan} part="button">
59-
Change BG Color:: ${this.span ? 'Normal' : 'Red'}
60-
</button>
61-
<my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-green">Testing css part</my-another-element>
62-
<my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
63-
<my-another-element class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-green">Testing css part</my-another-element>
64-
<my-another-element class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
65-
<my-another-element class="part-[cool-part]:cool-green">Testing css part</my-another-element>
66-
<my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
67-
<my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
68-
<my-collision-element class="part-[cool-part]:cool-blue">Testing css part</my-collision-element>
69-
<my-collision-element class="part-[cool-part]:cool-green part-[another-cool-part]:bg-red-500">Testing css part</my-collision-element>
70-
<slot></slot>
44+
<div class="prose">
45+
<span class="logo"></span>
46+
<h1 class="mt-2em animate-jack-in-the-box animate-duration-2s" text-green-600>Hello, ${this.name}!</h1>
47+
<br />
48+
${this.span ? html` <div class="bg-red-400">BG Color should change</div>` : html` <div>BG Color should change</div>`}
49+
<br />
50+
<br />
51+
<button class="shadow-2xl bg-white p-4 rounded-lg border-none" part="button">
52+
prefligths: shadow-2xl
53+
</button>
54+
<br />
55+
<br />
56+
<button class="bg-red-100" @click=${this._onClick} part="button">
57+
Click Count: ${this.count}
58+
</button>
59+
<button @click=${this._toggleSpan} part="button">
60+
Change BG Color:: ${this.span ? 'Normal' : 'Red'}
61+
</button>
62+
<my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-green">Testing css part</my-another-element>
63+
<my-another-element class="part-[cool-part]:cool-green part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
64+
<my-another-element class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-green">Testing css part</my-another-element>
65+
<my-another-element class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-blue">Testing css part</my-another-element>
66+
<my-another-element class="part-[cool-part]:cool-green">Testing css part</my-another-element>
67+
<my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
68+
<my-another-element class="part-[cool-part]:cool-blue">Testing css part</my-another-element>
69+
<my-collision-element class="part-[cool-part]:cool-blue">Testing css part</my-collision-element>
70+
<my-collision-element class="part-[cool-part]:cool-green part-[another-cool-part]:bg-red-500">Testing css part</my-collision-element>
71+
<slot></slot>
72+
</div>
7173
`
7274
}
7375

‎examples/vite-lit/vite.config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import UnoCSS from 'unocss/vite'
33
import presetIcons from '@unocss/preset-icons'
44
import presetUno from '@unocss/preset-uno'
55
import presetAttributify from '@unocss/preset-attributify'
6+
import presetTypography from '@unocss/preset-typography'
67
import ViteInspector from 'vite-plugin-inspect'
78

89
// https://vitejs.dev/config/
@@ -33,6 +34,7 @@ export default defineConfig({
3334
'vertical-align': 'middle',
3435
},
3536
}),
37+
presetTypography(),
3638
],
3739
inspector: false,
3840
}),

‎packages/vite/src/modes/shadow-dom.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
104104
if (id.includes('?vue&type=style') || (id.endsWith('.vue') && vueSFCStyleRE.test(code)))
105105
return code.replace(new RegExp(`(\\/\\*\\s*)?${CSS_PLACEHOLDER}(\\s*\\*\\/)?`), css || '')
106106

107-
return code.replace(CSS_PLACEHOLDER, css?.replace(/\\/g, '\\\\') ?? '')
107+
return code.replace(CSS_PLACEHOLDER, css?.replace(/\\/g, '\\\\')?.replace(/`/g, '\\`') ?? '')
108108
}
109109

110110
return {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy