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
-
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