csstools / csstools/postcss-plugins

`@scope` support

Abierto
#1,358 6 comentarios 3 reacciones 0 asignados Ver en GitHub
feature request
Lenguaje dominante
CSS
Estrellas
1.1k
Forks
83
Merge medio
10 h 16 min
PR fusionados (30 d)
16

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

El issue no menciona ningún plugin, archivo ni punto de entrada de pruebas. Empieza examinando la estructura de plugins del repositorio y el manejo existente de las reglas at de CSS; después, lee la especificación CSS Cascade 6 enlazada y las referencias de los navegadores. Para darlo por terminado, sería necesario contar con un diseño de implementación acordado para @scope, los límites de compatibilidad y pruebas que cubran el comportamiento propuesto.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
css
Área
frontend, web-dev
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.