Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

`@scope` support

Aperta
  • Qualcosa non va?
#1,358 6 commenti 3 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
css
Ambito
frontend, web-dev

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.

Descrizione

feature request
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:

@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
Lingua principale
CSS
Stelle
1.1k
Fork
83
Merge medio
7h 9m
PR unite (30g)
28

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di csstools/postcss-plugins

Tutte le issue di csstools/postcss-plugins

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.