csstools / csstools/postcss-plugins
native plugin to support variable units
- Vorherrschende Sprache
- CSS
- Sterne
- 1.1k
- Forks
- 83
- Ø Merge
- 10 Std. 16 Min.
- Gemergte PRs (30 T.)
- 16
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginne in plugins/postcss-custom-properties/src/lib/transform-properties.ts und lies den Vorschlag zu variable-units für CSS Variables Level 2 sowie die verlinkte CSSWG-Diskussion. Prüfe die bestehenden Transformationstests des Plugins und verifiziere anschließend, dass die 20--hem-Syntax wie vorgeschlagen verarbeitet wird, ohne das nicht verwandte Verhalten von custom properties zu ändern.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- css
- Bereich
- tooling
- Issue-Typ
- Feature
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100