Use units of measure instead of length.px etc.?

[zaid-ajaj]

Use units of measure instead of length.px etc.?

[zanaptak]

I also think there is room to explore regarding unit definition, and briefly experimented a bit with something like this, but didn't pursue further as length.xxx is "good enough":

// style.margin.px 20
// style.padding.rem 1.5

module Util =
  // SRTP to allow any numeric for units
  let inline rem< ^a when ^a : ( static member get_One : unit -> ^a ) > ( value : ^a ) = string value + "rem"
  let inline px< ^a when ^a : ( static member get_One : unit -> ^a ) > ( value : ^a ) = string value + "px"
  // and so on...

module margin =
  let inline rem v = Util.rem v
  let inline px v = Util.px v
  // and so on...

On the combination aspect, I don't think it's necessary to support all possible combinations since you can always break down combined properties if you need to mix units (e.g. use marginLeft/Right/Top/Bottom rather than margin w x y z).

Having the units as types rather than strings is so that something like "1.5ren" would fail at compile time, rather than runtime where it could be harder to debug.

[MangelMaxime]

The code you provided isn't valid F#, you will have this error:

Duplicate method. The method 'height' has the same name and signature as another method in type 'style' once tuples, functions, units of measure and/or provided types are erased.

Because unit type are erased at compile time you end up with something like:

  type style =
    static member inline height(value: int) =
    static member inline height(value: float) =  // ...
    static member inline height(value: int) = // ...
    static member inline height(value: float) = // ...

As you can see it result with a duplicate int and float methods.

In the past, I made some experimentation around providing helpers for working with units.
#4 (comment)

But all these solutions, for now, are going to impact the bundle size until the issue about F# feature is done.

[cmeeren]

Ah, my bad. So it won't work at all anyway.

[cmeeren]

Closing since it won't work.

Now this is slightly off-topic, but if anyone has any input on the question in the final paragraph, I'd appreciate to hear it! :)

[MangelMaxime]

Oops, I forget to answer the question, well the main benefit I see if you can directly do the calculation.

length.px 200+100

[cmeeren]

I agree and would, all else being equal, slightly prefer length.px (200+100) over string (200+100) + "px". However, the latter seems almost as simple and is just a few characters longer, so if that's the main benefit, is the whole length/ICssUnit stuff really justified?

Just putting it out there. :)