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

in 'shadow-dom' mode, class "bg-#d00" will be converted to “.bg-\\#dd0000 {...}” #1943

Closed
NMTuan opened this issue Dec 1, 2022 · 3 comments · Fixed by #1945
Closed

in 'shadow-dom' mode, class "bg-#d00" will be converted to “.bg-\\#dd0000 {...}” #1943

NMTuan opened this issue Dec 1, 2022 · 3 comments · Fixed by #1945

Comments

@NMTuan
Copy link

NMTuan commented Dec 1, 2022 •
edited

配置项
image

vue文件
image

浏览器中输出的内容
image

依赖版本
image

输出的.bg-\\#dd0000选择器无法正确的被浏览器解析掉，正确的输出应该是.bg-\#dd0000
@NMTuan NMTuan changed the title in 'shadow-dom' mode in 'shadow-dom' mode, class "bg-#d00" will be converted to “.bg-\\#dd0000 {...}” Dec 1, 2022
@sibbng sibbng mentioned this issue Dec 2, 2022
Merged
@sibbng
Copy link
Member

sibbng commented Dec 2, 2022 •
edited

This will be fixed in #1945, however, you are not opt-in to Vue's Web Components feature. Styles defined in your components will be hoisted to <head>. This will be problematic if you have multiple components like that. Because you will have duplicated CSS in your app. It's pointless to use shadow-dom that way. If you want to use UnoCSS with Web Components defined in Vue SFCs please refer to this section in Vue Docs for proper setup. Once you set up your components as described in the Vue Docs and when #1945 is released your styles will be isolated in shadow dom as you would expect.

@NMTuan
Copy link
Author

NMTuan commented Dec 2, 2022

This will be fixed in #1945, however, you are not opt-in to Vue's Web Components feature. Styles defined in your components will be hoisted to <head>. This will be problematic if you have multiple components like that. Because you will have duplicated CSS in your app. It's pointless to use shadow-dom that way. If you want to use UnoCSS with Web Components defined in Vue SFCs please refer to this section in Vue Docs for proper setup. Once you set up your components as described in the Vue Docs and when #1945 is released your styles will be isolated in shadow dom as you would expect.

think you !
the project is here: https://github.com/NMTuan/base_vite_chrome_extension/tree/feature/20221122
I didn't think too much about it, it just works so far.
in content-scripts, i will use the shadow-dom mode.
and in other files, i want use the default mode.
but the config only supports one mode.

@sibbng
Copy link
Member

sibbng commented Dec 2, 2022

I haven't tested really but I believe you can initialize UnoCSS multiple times and pass the related file patterns in include option.

const presets = [
  presetAttributify(),
  presetUno(),
  presetIcons(),
  presetRemToPx()
]
// vite plugins
UnoCSS({ 
  mode: 'shadow-dom',
  include: ['src/content/*'], 
  presets 
}),
UnoCSS({ 
  include: ['src/options/*', 'src/popup/*'], 
  presets 
}),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(vite): don't escape css in vue web components unocss/unocss
2 participants
@NMTuan @sibbng