`@scope` support

[mindplay-dk]

What would you want to propose?

I'd like to suggest support for @scope

• https://drafts.csswg.org/css-cascade-6/#scoped-styles
• https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
• https://developer.chrome.com/docs/css-ui/at-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:

@scope (.panel) to (.content) {
  h2 {
    color: red;
  }
}

Becomes this:

:where(.panel) h2:where(:not(.content h2)) {
  color: red;
}

And a more complex selector like this:

@scope ([scope=panel]) to ([scope]:not([scope=panel])) {
  h2 {
    color: red;
  }
  p {
    font-weight: bold;
  }
}

Becomes this:

:where([scope=panel]) h2:where(:not([scope]:not([scope=panel]) h2)) {
  color: red;
}

:where([scope=panel]) p:where(:not([scope]:not([scope=panel]) p)) {
  font-weight: bold;
}

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

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

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.

Yes! We don't use any of those things but we are equally excited about @scope and all the things it can do.

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 :
https://github.com/sponsors/csstools/

[phaux]

I wonder if this is even possible to transpile considering that scope conflicts are resolved by proximity to the scope root:

@scope adds a new criterion to the CSS cascade: scoping proximity. This states that when two scopes have conflicting styles, the style that has the smallest number of hops up the DOM tree hierarchy to the scope root is applied.

https://developer.mozilla.org/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved

[romainmenke]

Yes, that is the largest unknown.

[phaux]

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

[mindplay-dk]

@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? 🤔

[Wdestroier]

If that helps, postcss-scope-polyfill supports the simple use case. Requires the CSS @scope polyfill.