Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from Dec 2, 2022
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f320a2
fix(vite): don't escape css in vue web components
sibbng Dec 1, 2022
836857f
refactor: simplify logic
sibbng Dec 2, 2022
0bcdd01
add comment
sibbng Dec 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/vite/README.md
View file
Open in desktop
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
13 changes: 9 additions & 4 deletions packages/vite/src/modes/shadow-dom.ts
View file
Open in desktop
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,23 @@ export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin
}
}

if (id.includes('?vue&type=style') || (id.endsWith('.vue') && vueSFCStyleRE.test(code)))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a comment, explaining the reason a bit?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 👍

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