[css-values] add function to convert numeric data types to <number>

[graphicore]

The discussion in #4430 made me think, it would be nice to have a way to convert e.g. a <length> to a <number>:

* {
    font-variation-settings: "opsz" convert-to-number(1em, pt);
}

/* If the user default font-size is 16px the above would equal to: */
* {
    font-variation-settings: "opsz" 12;
}

font-variation-settings is, from my perspective the best use case, as each keyword in it requires a <number> and its often related to a <length>. This could improve usage of variations, that don't have a sufficient or any higher level property, a lot, and make them accessible for calc() math.

convert-to-number() could be used in other cases, too, and would make it possible to relate properties in a way that is not currently possible without JavaScript. Another example is to control a paused animation state by screen width using something like:

/* a pattern that can be used to reduce @media queries */
.animated {
    animation-play-state: paused;
    animation-duration: 1s;
    animation-delay: calc(-1s * (min(1920, convert-to-number(100vw, px)) / 1920));
}

Since it's possible to convert a number to a unit-value, like in calc(1px * 16) /* -> 16px */ , it would make sense to have a way to do the inverse: calc(16px / 1pt) /* -> 1px * 16 / 1px * (4/3) -> 12 */. But, I don't think this is possible now and it would probably make internal things much more complicated, hence my proposal to add a new function.

[Loirooriol]

calc(16px / 1pt) But, I don't think this is possible now

That's totally possible in the current spec https://drafts.csswg.org/css-values/#calc-syntax

<calc()>  = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> = <number> | <dimension> | <percentage> | <calc-constant> | ( <calc-sum> )

https://drafts.csswg.org/css-values/#calc-type-checking

Note: In previous versions of this specification, multiplication and division were limited in what arguments they could take, to avoid producing more complex intermediate results (such as 1px * 1em, which is <length>²) and to make division-by-zero detectable at parse time. This version now relaxes those restrictions.

[graphicore]

@Loirooriol thanks. Nice, I guess that's good news then. Can't wait to be able to use this in the real world.

[graphicore]

Maybe someone can answer this quickly, without me having to open a new issue:

How can I watch/monitor real world adoption of a new spec feature like this? There must be some public test-suite or so, like the acid-tests.

[Loirooriol]

You can check css-values in WPT https://wpt.fyi/results/css/css-values, but maybe there is no test about this yet.

[graphicore]

That's perfect, thanks! I may try to submit a test for this.