Replies: 1 comment
-
|
<style scoped>
:global(.theme-dark .light-surface) .title {
color: red;
}I would guess this would generate: .theme-dark .light-surface .title[data-v-00000000] {
color: red;
}The first target after the global function tagged with data-v-id. Instead we get this: .theme-dark .light-surface {
color: red;
}Anything outside of the :global() function gets discarded. There is a workaround involving adding a postCSS plugin but this really should work out of the box. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
What problem does this feature solve?
The
:global()pseudo selector in SFC style scoped allows us to disable scoped styles for a selector.Currently there is no option in
<style scoped>to style something dependant on a selector that selects an element above the current component but still want to scope your styles.My idea is to add a new
:local()pseudo selector that makes this possible: an exception from the global scope.Example use cases
Dark mode
Use a different color scheme depending on a
darkclass on the<html>element:More general
Change the style of a component with local scoped style differently depending on a class in a parent:
Complementing the
:deep()selectorBasically the same as this, just in the other tree direction:
Why CSS modules is no replacement
CSS modules are not compatible with SASS.
What does the proposed API look like?
The syntax
:local()is the same as the the selector with the same name in CSS Modules.Changes are probabily mostly required inside
compiler-sfc/src/stylePluginScoped.ts.Note
I created an issue in vuejs/vue-next before
Beta Was this translation helpful? Give feedback.
All reactions