Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

`@scope` support

Ouverte
  • Quelque chose ne va pas ?
#1,358 6 commentaires 3 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
25/100
Type d'issue
Fonctionnalité
Clarté
À clarifier
Activité
À l'abandon
Stack technique
css
Domaine
frontend, web-dev

Piste de recherche

L’issue ne nomme aucun plugin, fichier ou point d’entrée de test. Commencez par examiner la structure des plugins du dépôt et la gestion existante des at-rules CSS, puis lisez la spécification CSS Cascade 6 liée ainsi que les références des navigateurs. La tâche serait considérée comme terminée lorsqu’une conception d’implémentation approuvée pour @scope, les limites de compatibilité et les tests couvrant le comportement proposé aura été définie.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
CSS
Étoiles
1.1k
Forks
83
Merge moyen
15 h 13 min
PR mergées (30 j)
22

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de csstools/postcss-plugins

Toutes les issues de csstools/postcss-plugins

Issues similaires

Plus d'issues Web Dev

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.