Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(vite): don't escape css in vue web components (#1945)
  • Loading branch information
sibbng committed Dec 2, 2022
1 parent 18a5686 commit d4c6419
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 5 deletions.
2 changes: 1 addition & 1 deletion packages/vite/README.md
Expand Up @@ -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)

Expand Down
15 changes: 11 additions & 4 deletions packages/vite/src/modes/shadow-dom.ts
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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)
}
},
}
Expand Down

0 comments on commit d4c6419

Please sign in to comment.