feat(hiccup-css): update float value formatter, add tests

packages/hiccup-css/src/units.ts

@@ -10,7 +10,10 @@ export let PRECISION = 4;
 export const setPrecision = (n: number) => (PRECISION = n);
 
 /** @internal */
-const ff = (x: number) => (x === (x | 0) ? String(x) : x.toFixed(PRECISION));
+const ff = (x: number) =>
+	x === (x | 0)
+		? String(x)
+		: x.toFixed(PRECISION).replace(/^0./, ".").replace(/0+$/, "");
 
 export const em = (x: number) => `${ff(x)}em`;
 export const ex = (x: number) => `${ff(x)}ex`;

packages/hiccup-css/test/main.test.ts

@@ -6,6 +6,8 @@ import {
 	at_keyframes,
 	at_media,
 	css,
+	rem,
+	setPrecision,
 } from "../src/index.js";
 
 const rules = {
@@ -143,3 +145,13 @@ test("animation", () => {
 		"@keyframes delayed-fade-in{0%{opacity:0;}100%{opacity:1;}}.delayed-fade-in{animation-duration:250ms;animation-name:delayed-fade-in;animation-delay:0.5s;}"
 	);
 });
+
+test("float format", () => {
+	setPrecision(4);
+	expect(
+		css([
+			"a",
+			{ a: rem(0.1), b: rem(0), c: rem(0.0), d: rem(-0), e: rem(0.0001) },
+		])
+	).toBe("a{a:.1rem;b:0rem;c:0rem;d:0rem;e:.0001rem;}");
+});