Don't add classname for :is() and :where() selectors #2836
Description
The problem
I want to leverage :where selector (it is good for theming because it has 0 specificity) to style a component based on the parent attribute.
However, emotion prefix the style with the generated class name in front of :where which does not make the style works:
const Component = style('div')`
color: black
:where([data-color-scheme="dark"]) & {
color: white
}
`turned into
<style>
// to make this style work, the `.css-9qpay1` at the beginning should be removed
.css-9qpay1:where([data-color-scheme="dark"]) .css-9qpay1{color:white;}
</style>Here is the reproduction: https://codesandbox.io/s/emotion-forked-e9fyes?file=/index.js
Proposed solution
Should :is and :where be the exceptional case to not implicitly append to the class name?
const Component = style('div')`
:where([data-color-scheme="dark"]) & {
color: white
}
// result as ':where([data-color-scheme="dark"]) .css { color: white };
`
const Component = style('div')`
// explicitly declare the '&'
&:where([data-color-scheme="dark"]) {
color: white
}
// result as '.css:where([data-color-scheme="dark"]) .css { color: white };
`Alternative solutions
Is there any workaround that I might have missed?
Additional context
Hi, I am from the MUI core team. We are working on the theming API to let developers theme components based on color schemes without having to read the mode from the theme.
Our API added an attribute to the html when the color scheme changes:
// light mode
<html data-color-scheme="light">
// dark mode
<html data-color-scheme="dark">