-
-
Notifications
You must be signed in to change notification settings - Fork 70
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@scope
support
#1358
Comments
Yes! We don't use any of those things but we are equally excited about I've been following the specification work and as far as I know there is no way to have a full polyfill that is actually correct. But the same was said about cascade layers and we managed to ship that so, who knows :D Cascade layers took several weeks of near full time work to get right and this will have a similar level of complexity. A lot of that time is research, testing, ... I don't really want to create this for free :) I've set a sponsorship goal, if this is met I am willing to start work on this : |
I wonder if this is even possible to transpile considering that scope conflicts are resolved by proximity to the scope root:
https://developer.mozilla.org/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved |
Yes, that is the largest unknown. |
Something like this could work: Before: @scope (.light-theme) {
:scope {
background-color: #ccc;
}
p {
color: black;
}
}
@scope (.dark-theme) {
:scope {
background-color: #333;
}
p {
color: white;
}
} After: .light-theme {
background-color: #ccc;
> p,
> * > p,
> * > * > p,
> * > * > * > p,
> * > * > * > * > p {
color: black;
}
}
.dark-theme {
background-color: #333;
> p,
> * > p,
> * > * > p,
> * > * > * > p,
> * > * > * > * > p {
color: white;
}
} |
@phaux interesting. this would work up to n levels of nesting only though, then it falls apart, correct? This wouldn't be great for file size, but it'll probably compress pretty well. I wonder about the performance of evaluating all these selectors though? 🤔 |
What would you want to propose?
I'd like to suggest support for
@scope
Suggested solution
This is just an idea, I have no idea if this would work in general.
https://jsfiddle.net/mindplay/agd9k2p1/
So this:
Becomes this:
And a more complex selector like this:
Becomes this:
So this would require both
:where
and:not
, I think - to get the right specificity.But this is just a rough idea - I'm not a CSS superhero, and I don't know if this is completely correct or scoped properly etc.
Additional context
Only a few browsers support this already.
https://caniuse.com/css-cascade-scope
But this would be an incredible feature, if we didn't have to wait 3-5 years for every browser to support it - we could basically stop using CSS frameworks, CSS-in-JS, Tailwind etc. would all essentially be obsolete (from my personal point of view!) and we could finally have something resembling component-scoped CSS natively in the browser without JavaScript. 😄
Validations
Would you like to open a PR for this feature?
The text was updated successfully, but these errors were encountered: