IssueRaiser

[css-variables-2] Custom units as simple variable desugaring

I've had "custom units" on the back burner of my mind for years now, and never got around to working on them - they had enough question to answer that it seemed exhausting. This morning, tho, I saw [a tweet by @jonathantneal](https://twitter.com/jon_neal/status/1537421277882896385) exploring the idea of making them just be sugar over normal custom property usage, and... I think I love it? The example they had: ```css :root { --rs: calc(1rem * .25); } .usage { padding-inline: 4--rs; } /* desugars to */ .usage { padding-inline: calc(4 * (var(--rs))); } ``` That is, if we see a "custom unit" (aka a dimension whose unit is a dashed-ident), we just treat it as a variable reference (triggering the normal behavior of using a variable - the property is assumed valid, etc), and expand it at variable-resolution time into exactly that calc - given `N--foo`, produce `calc(N * (var(--foo)))`. I think this was problematic in the past because there were questions of initial value, resolution-time behavior, etc., but afaict those are all answered now by just using a *registered* custom property. That is, if you've registered your property/"unit" as a `<length>`, then you can set it like `--unit:1.2em;` and it'll resolve that into an absolute length immediately, inheriting as a px length. (Or, if you *do* want the unit to resolve at point of use instead of point of definition, just leave it unregistered, or registered with a `*` grammar.) Plus, a property registration suffices to fully

Posted by tabatkins on Jun 16, 2022, 7:25 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments

github (Other)

[css-variables-2] Custom units as simple variable desugaring

tabatkinsJun 16, 2022, 7:25 PM

I've had "custom units" on the back burner of my mind for years now, and never got around to working on them - they had enough question to answer that it seemed exhausting. This morning, tho, I saw [a tweet by @jonathantneal](https://twitter.com/jon_neal/status/1537421277882896385) exploring the idea of making them just be sugar over normal custom property usage, and... I think I love it? The example they had: ```css :root { --rs: calc(1rem * .25); } .usage { padding-inline: 4--rs; } /* desugars to */ .usage { padding-inline: calc(4 * (var(--rs))); } ``` That is, if we see a "custom unit" (aka a dimension whose unit is a dashed-ident), we just treat it as a variable reference (triggering the normal behavior of using a variable - the property is assumed valid, etc), and expand it at variable-resolution time into exactly that calc - given `N--foo`, produce `calc(N * (var(--foo)))`. I think this was problematic in the past because there were questions of initial value, resolution-time behavior, etc., but afaict those are all answered now by just using a *registered* custom property. That is, if you've registered your property/"unit" as a `<length>`, then you can set it like `--unit:1.2em;` and it'll resolve that into an absolute length immediately, inheriting as a px length. (Or, if you *do* want the unit to resolve at point of use instead of point of definition, just leave it unregistered, or registered with a `*` grammar.) Plus, a property registration suffices to fully

Comments (0)

No comments yet. Start the discussion.

Comment on this issue