csstools / csstools/postcss-plugins

native plugin to support variable units

Abierto
#578 3 comentarios 0 reacciones 0 asignados Ver en GitHub
feature request requires browser vendor interest
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 would love added support for the upcoming [variable units](https://drafts.csswg.org/css-variables-2/#variable-units) syntax.

```css
:host {
--hem: 1em;
}
.wrapper {
width: 20--hem;
}
```

### Suggested solution

In postcss-custom-properties, I imagine this would be a trivial addition to the [transformations](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-custom-properties/src/lib/transform-properties.ts), given that the [discussion around it](https://github.com/w3c/csswg-drafts/issues/7379) suggests that `20--hem` is nothing but syntax sugar for `calc(20 * var(--hem))`

### Additional context

_No response_

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

- [X] I'm willing to open a PR

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Empieza en plugins/postcss-custom-properties/src/lib/transform-properties.ts y lee la propuesta de variable-units de CSS Variables Level 2, además de la discusión de CSSWG enlazada. Comprueba las pruebas de transformación existentes del plugin y, después, verifica que la sintaxis 20--hem se gestione como se propone, sin cambiar el comportamiento no relacionado de custom properties.

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

Evaluación

Stack tecnológico
css
Área
tooling
Tipo de issue
Nueva funcionalidad
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.