@thi.ng/hiccup-css 2.1.63 → 2.2.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-08-27T11:20:59Z
+- **Last updated**: 2023-09-06T13:36:28Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,24 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+## [2.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-css@2.2.0) (2023-09-02)
+
+#### 🚀 Features
+
+- add customizable unit formatter precision ([2db3071](https://github.com/thi-ng/umbrella/commit/2db3071))
+  - set default prec to 4 fractional digits
+  - add setPrecision() to customize unit formatters
+  - add vmin/vmax() unit formatters
+  - update all other unit formatters
+
+#### ♻️ Refactoring
+
+- update at_keyframes() arg types ([5de6a92](https://github.com/thi-ng/umbrella/commit/5de6a92))
+  - add Keyframe type alias
+- update animation() args/opts ([ba47f93](https://github.com/thi-ng/umbrella/commit/ba47f93))
+  - update AnimationOpts
+  - use Keyframe type for args
+
 ### [2.1.39](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-css@2.1.39) (2023-02-17)
 
 #### 🩹 Bug fixes

package/README.md

@@ -117,7 +117,7 @@ For Node.js REPL:
 const hiccupCss = await import("@thi.ng/hiccup-css");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 1.99 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.08 KB
 
 ## Dependencies
 
@@ -134,9 +134,10 @@ directory are using this package.
 
 A selection:
 
-| Screenshot                                                                                                             | Description                                         | Live demo                                             | Source                                                                             |
-|:-----------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------|:------------------------------------------------------|:-----------------------------------------------------------------------------------|
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-benchmark2.png" width="240"/> | hdom update performance benchmark w/ config options | [Demo](https://demo.thi.ng/umbrella/hdom-benchmark2/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-benchmark2) |
+| Screenshot                                                                                                                         | Description                                         | Live demo                                                         | Source                                                                                         |
+|:-----------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------|:------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------|
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-benchmark2.png" width="240"/>             | hdom update performance benchmark w/ config options | [Demo](https://demo.thi.ng/umbrella/hdom-benchmark2/)             | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-benchmark2)             |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hiccup-css-image-transition.jpg" width="240"/> | Generating pure CSS image transitions               | [Demo](https://demo.thi.ng/umbrella/hiccup-css-image-transition/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hiccup-css-image-transition) |
 
 ## API
 

package/animation.d.ts

@@ -1,9 +1,10 @@
+import { type Keyframe } from "./keyframes.js";
 export interface AnimationOpts {
     delay: string;
     direction: "unset" | "inherit" | "initial" | "normal" | "reverse" | "alternate" | "alternate-reverse";
     duration: string;
     "fill-mode": "none" | "forwards" | "backwards" | "both";
-    "iteration-count": number;
+    "iteration-count": number | string;
     "play-state": "unset" | "inherit" | "initial" | "paused" | "running";
     "timing-function": string;
 }
@@ -45,5 +46,5 @@ export interface AnimationOpts {
  * @param opts - animation config options
  * @param keyframes - keyframes
  */
-export declare const animation: (id: string, opts: Partial<AnimationOpts>, ...keyframes: any) => (any[] | import("./api.js").RuleFn)[];
+export declare const animation: (id: string, opts: Partial<AnimationOpts>, ...keyframes: Keyframe[]) => (any[] | import("./api.js").RuleFn)[];
 //# sourceMappingURL=animation.d.ts.map

package/keyframes.d.ts

@@ -1,4 +1,5 @@
 import type { RuleFn } from "./api.js";
+export type Keyframe = Record<string, any>;
 /**
  * Rule function for `@keyframes`. If a single declaration object is given,
  * it's keys are used as keyframe stops and their values as their declarations
@@ -42,6 +43,6 @@ import type { RuleFn } from "./api.js";
  * @param id -
  * @param stops -
  */
-export declare function at_keyframes(id: string, stops: any): RuleFn;
-export declare function at_keyframes(id: string, from: any, to: any): RuleFn;
+export declare function at_keyframes(id: string, stops: Keyframe): RuleFn;
+export declare function at_keyframes(id: string, from: Keyframe, to: Keyframe): RuleFn;
 //# sourceMappingURL=keyframes.d.ts.map

package/keyframes.js

@@ -1,5 +1,4 @@
 import { formatDecls, indent } from "./impl.js";
-import { percent } from "./units.js";
 export function at_keyframes(id, ...args) {
     const stops = args.length === 1 ? args[0] : { 0: args[0], 100: args[1] };
     return (acc, opts) => {
@@ -11,7 +10,7 @@ export function at_keyframes(id, ...args) {
             if (stops.hasOwnProperty(s)) {
                 acc.push([
                     inner,
-                    percent(s),
+                    s + "%",
                     opts.format.declStart,
                     formatDecls(stops[s], opts),
                     inner,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-css",
-  "version": "2.1.63",
+  "version": "2.2.1",
   "description": "CSS from nested JS data structures",
   "type": "module",
   "module": "./index.js",
@@ -37,7 +37,7 @@
     "@thi.ng/api": "^8.9.5",
     "@thi.ng/checks": "^3.4.5",
     "@thi.ng/errors": "^2.3.5",
-    "@thi.ng/transducers": "^8.6.4"
+    "@thi.ng/transducers": "^8.6.5"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.36.4",
@@ -127,5 +127,5 @@
     ],
     "year": 2016
   },
-  "gitHead": "34c3bd36b0133af05abc7fe66affa01dd99704ac\n"
+  "gitHead": "1bbef970bab7f7def0700e587cf0471e1e1ef9f3\n"
 }

package/units.d.ts

@@ -1,3 +1,12 @@
+export declare let PRECISION: number;
+/**
+ * Sets the number of fractional digits used for formatting various floating
+ * point values in the serialized SVG. The current value can be read via
+ * {@link PRECISION}.
+ *
+ * @param n
+ */
+export declare const setPrecision: (n: number) => number;
 export declare const em: (x: number) => string;
 export declare const ex: (x: number) => string;
 export declare const rem: (x: number) => string;
@@ -5,9 +14,14 @@ export declare const percent: (x: number) => string;
 export declare const px: (x: number) => string;
 export declare const vh: (x: number) => string;
 export declare const vw: (x: number) => string;
+export declare const vmin: (x: number) => string;
+export declare const vmax: (x: number) => string;
 export declare const ms: (x: number) => string;
+export declare const second: (x: number) => string;
+/** @deprecated use {@link second} */
 export declare const sec: (x: number) => string;
 export declare const deg: (x: number) => string;
 export declare const rad: (x: number) => string;
 export declare const turn: (x: number) => string;
+export declare const url: (x: string) => string;
 //# sourceMappingURL=units.d.ts.map

package/units.js

@@ -1,12 +1,28 @@
-export const em = (x) => `${x}em`;
-export const ex = (x) => `${x}ex`;
-export const rem = (x) => `${x}rem`;
-export const percent = (x) => `${x}%`;
-export const px = (x) => `${x}px`;
-export const vh = (x) => `${x}vh`;
-export const vw = (x) => `${x}vw`;
+export let PRECISION = 4;
+/**
+ * Sets the number of fractional digits used for formatting various floating
+ * point values in the serialized SVG. The current value can be read via
+ * {@link PRECISION}.
+ *
+ * @param n
+ */
+export const setPrecision = (n) => (PRECISION = n);
+/** @internal */
+const ff = (x) => (x === (x | 0) ? String(x) : x.toFixed(PRECISION));
+export const em = (x) => `${ff(x)}em`;
+export const ex = (x) => `${ff(x)}ex`;
+export const rem = (x) => `${ff(x)}rem`;
+export const percent = (x) => `${ff(x)}%`;
+export const px = (x) => `${ff(x)}px`;
+export const vh = (x) => `${ff(x)}vh`;
+export const vw = (x) => `${ff(x)}vw`;
+export const vmin = (x) => `${ff(x)}vmin`;
+export const vmax = (x) => `${ff(x)}vmax`;
 export const ms = (x) => `${x | 0}ms`;
-export const sec = (x) => `${x}s`;
-export const deg = (x) => `${x}deg`;
-export const rad = (x) => `${x}rad`;
-export const turn = (x) => `${x}turn`;
+export const second = (x) => `${ff(x)}s`;
+/** @deprecated use {@link second} */
+export const sec = second;
+export const deg = (x) => `${ff(x)}deg`;
+export const rad = (x) => `${ff(x)}rad`;
+export const turn = (x) => `${ff(x)}turn`;
+export const url = (x) => `url(${x})`;