[css-cascade-6] reusable named scopes

[mayank99]

(This was originally posted in https://github.com/w3c/csswg-drafts/issues/9742#issuecomment-2002084564 but moved to its own issue later.)

Proposal:

A scope statement, similar to a layer statement, could be used to create a reusable named scope. For example:

@scope foo (.start) to (.end);

A reusable named scope can then be used without specifying <scope-start>/<scope-end>:

@scope foo {
  p { color: red; }
}

The main thing this enables is avoiding the need to repeat selectors for every use.

---

Open questions:

• how do we handle duplicate scope names?
• how do we differentiate between named scopes and reusable named scopes? (different syntax?)

[romainmenke]

For @media this same feature is currently specified as @custom-media : https://drafts.csswg.org/mediaqueries-5/#custom-mq

@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }
}

This separates declaring a scope and using a scope.

[mayank99]

@romainmenke good point, I wonder if there should be a common primitive for "defining" things.

Example syntax (bikesheddable):

@define(scope) --foo (.start) to (.end);
@define(media) --modern (color), (hover);

[romainmenke]

@custom-* can be the common primitive :)

A benefit of a dedicated at-rule is that things can be different without causing conflicts.