Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

`@scope` support

Offen
  • Stimmt etwas nicht?
#1,358 6 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
25/100
Issue-Typ
Feature
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
css
Bereich
frontend, web-dev

Rechercherichtung

Das Issue nennt kein Plugin, keine Datei und keinen Test-Einstiegspunkt. Beginne damit, die Plugin-Struktur des Repositorys und die bestehende Verarbeitung von CSS-At-Regeln zu untersuchen, und lies anschließend die verlinkte CSS-Cascade-6-Spezifikation und Browser-Referenzen. Erledigt wäre die Aufgabe, wenn ein abgestimmtes Implementierungsdesign für @scope, Kompatibilitätsgrenzen und Tests vorliegt, die das vorgeschlagene Verhalten abdecken.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
CSS
Sterne
1.1k
Forks
83
Ø Merge
6 Std. 43 Min.
Gemergte PRs (30 T.)
26

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus csstools/postcss-plugins

Alle Issues in csstools/postcss-plugins

Ähnliche Issues

Weitere Issues zu Web Dev

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.