[css-values-5] typeof() or something similar to be used inside if() conditionals to check types of custom properties

[kizu]

Now that we have if() (spec), and we will potentially have comparisons (#11104), we also need another thing that I found wanting to use recently: an ability to ask the type of some custom property.

At first, I wanted to propose something like a typeof() function, which would return the resolved type of some value, but while it might be useful, I do not think it is what I actually want.

Because if we define a non-registered custom property (or have a function argument without a defined type), this custom property can contain anything, and we actually don't know the type of it.

However, what we usually want, is to check if some custom property can be parsed as a certain type.

Example use case: https://kizu.dev/preview-mixin/ — based on the value of a property, we might want to output things differently.

This could also allow making polymorphic functions that accept just a single argument like --foo type(<length> | <color>), and then do something similar to a custom shorthand, where we will do things differently based on the actual type of the value that was passed to such an argument.

---

In Chrome Canary, with experimental flags on, it is currently possible to prototype new functions like this: https://codepen.io/kizu/pen/EaxPgmK?editors=1100

With @function and if() it is already kinda possible to implement something like what I want, but it would be great to have this available from the box.

This CodePen implements:

• --is-color() function that checks if the value passed into it is a <color>, and returns 1 or 0 based on the check.
• --is-length() function that checks if the value passed into it is a <length>, and returns 1 or 0 based on the check.
• Proof of concept --typeof() function, using those two functions above to return the first matching type.
• A --is-type() function that checks some value against a given type (one that --typeof() can return).

The usage of these is currently a bit awkward, as we currently have to save the result of the function into a separate variable in order to check its value with if(), but otherwise this seems to work fine.

---

More concrete proposals, but very weak: opinions, suggestions, bikeshedding and alternatives are welcome, this is mostly to get the ball rolling on the idea:

• Add a is-type() function that tests some value against some type, and returns a boolean to be used in if()
• Add a typeof() function that would return the actual type of some custom property.
  • Open question: should it be possible to use a type returned this way anywhere CSS can now expect a type? Like in attr() etc?
  • Open question: should the function guess the type, or return all types that some value could be? Or do something else? My main concern is what should typeof(0)` do, and what are other possible cases like this, with ambigous types?
  • Open question: what should it return to strings of tokens we currently cannot express as a type, like 1px solid etc.