csstools / csstools/postcss-plugins
`@scope` support
- Lingua principale
- CSS
- Stelle
- 1.1k
- Fork
- 83
- Merge medio
- 10h 16m
- PR unite (30g)
- 16
Descrizione
### 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:
```css
@scope (.panel) to (.content) {
h2 {
color: red;
}
}
```
Becomes this:
```css
:where(.panel) h2:where(:not(.content h2)) {
color: red;
}
```
And a more complex selector like this:
```css
@scope ([scope=panel]) to ([scope]:not([scope=panel])) {
h2 {
color: red;
}
p {
font-weight: bold;
}
}
```
Becomes this:
```css
: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
- [X] Follow our [Code of Conduct](https://github.com/csstools/postcss-plugins/blob/master/CODE_OF_CONDUCT.md)
- [X] 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
La issue non indica alcun plugin, file o punto di ingresso dei test. Inizia esaminando la struttura dei plugin del repository e la gestione esistente delle at-rule CSS, quindi leggi la specifica CSS Cascade 6 collegata e i riferimenti dei browser. Per considerare il lavoro completato, sarebbe necessario disporre di un design di implementazione concordato per @scope, dei limiti di compatibilità e di test che coprano il comportamento proposto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- css
- Ambito
- frontend, web-dev
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100