Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Don't add classname for `:is()` and `:where()` selectors
See original GitHub issueThe 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">
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Note that this might be prone to some edge cases but it probably shouldn’t matter for real-life cases in which you are gonna use this.
I found a workaround! https://codesandbox.io/s/emotion-forked-6eco3g?file=/index.js