Add :local() pseudo selector to SFC <style scoped> #4948
Description
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 dark class on the <html> element:
<style scoped>
:global(.dark) :local(.my-component) {
color: #f2f2f2;
background: black;
}
</style>More general
Change the style of a component with local scoped style differently depending on a class in a parent:
<style scoped>
.card {
border: 2px solid #ccc;
border-radius: 10px;
/* has no background-color */
}
:global(.has-background-image) :local(.card) {
background-color: #f2f2f2;
}
</style>Complementing the :deep() selector
<style scoped>
:global(.selector-of-some-parent) :local(.selector-scoped-to-current-component) { /* [...] */}
</style>Basically the same as this, just in the other tree direction:
<style scoped>
.selector-scoped-to-current-component :deep(.selector-of-some-child) { /* [...] */}
</style>Inspiration
The syntax :local() is the same as the the selector with the same name in CSS Modules.
Why CSS modules is no replacement
CSS modules are not compatible with SASS.
What does the proposed API look like?
Add a :local() pseudo selector that works analog to the selector with the same name in CSS Modules.
Changes are probabily mostly required inside compiler-sfc/src/stylePluginScoped.ts.