[hiccup-css] Use of unsigned shift operator prevents negative values

[acarabott]

import { px } from "@thi.ng/hiccup-css";

console.log(px(-10.666)); 

// Result   "4294967286px" 
// Expected "-10px"

[acarabott]

It could also be argued that decimal places should be allowed for px, as browsers support them and the rendered results are different between (e.g.) margin-left: 10px and margin-left: 10.5px

[postspectacular]

Hi @acarabott - sorry just saw this now (after merging your PR) - you're right & I even think we should amend all spatial units to using .toFixed() with 1-3 fractional digits... ?!

export const px = (x: number) => `${x.toFixed(1)}px`;

export const percent = (x: number) => `${x.toFixed(3)}%`;

[acarabott]

Hmm, it doesn't seem like there's anything in the spec about limits. I'd be particularly wary about reducing the precision of % as with very large elements the results could be off by a number of pixels...

I use these helpers to prevent typos and as sugar to avoid `${value + otherValue}px`, so I think I would avoid any adjustments and let that be up to the caller:

export const px = (x: number) => `${x}px`;

[postspectacular]

Hey @acarabott - agreed & was thinking about that too, but then again if I really would want pixel precision, I wouldn't use percentages... 😉 In any way, I agree it's best to leave the rounding of these values to the user. Milliseconds are the only unit for which this is done now. New release is already out since last Friday...