native plugin to support variable units

[jonathandewitt-dev]

What would you want to propose?

I would love added support for the upcoming variable units syntax.

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

Suggested solution

In postcss-custom-properties, I imagine this would be a trivial addition to the transformations, given that the discussion around it 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
• [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

[romainmenke]

@jonathantneal created a PostCSS plugin for this : https://github.com/csstools/custom-units

But for postcss-preset-env it is to early to include this. At the moment there is only an issue on csswg-drafts : https://github.com/w3c/csswg-drafts/issues/7379

[jonathandewitt-dev]

Oh, awesome, I was looking all over for a PostCSS plugin, but all the ones I found via Google were non-native custom syntax. Thanks for the link!

[romainmenke]

specification : https://drafts.csswg.org/css-variables-2/#variable-units