@thi.ng/hiccup-css 2.5.1 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -1
- package/README.md +6 -5
- package/package.json +2 -2
- package/units.d.ts +6 -0
- package/units.js +12 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
- **Last updated**: 2024-02-
|
|
3
|
+
- **Last updated**: 2024-02-12T16:09:52Z
|
|
4
4
|
- **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
|
|
5
5
|
|
|
6
6
|
All notable changes to this project will be documented in this file.
|
|
@@ -9,6 +9,12 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
|
|
|
9
9
|
**Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
|
|
10
10
|
and/or version bumps of transitive dependencies.
|
|
11
11
|
|
|
12
|
+
## [2.6.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-css@2.6.0) (2024-02-12)
|
|
13
|
+
|
|
14
|
+
#### 🚀 Features
|
|
15
|
+
|
|
16
|
+
- add more unit formatters ([36ab478](https://github.com/thi-ng/umbrella/commit/36ab478))
|
|
17
|
+
|
|
12
18
|
## [2.5.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-css@2.5.0) (2024-02-06)
|
|
13
19
|
|
|
14
20
|
#### 🚀 Features
|
package/README.md
CHANGED
|
@@ -132,7 +132,7 @@ For Node.js REPL:
|
|
|
132
132
|
const hiccupCss = await import("@thi.ng/hiccup-css");
|
|
133
133
|
```
|
|
134
134
|
|
|
135
|
-
Package sizes (brotli'd, pre-treeshake): ESM: 2.
|
|
135
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 2.21 KB
|
|
136
136
|
|
|
137
137
|
## Dependencies
|
|
138
138
|
|
|
@@ -147,10 +147,11 @@ Several projects in this repo's
|
|
|
147
147
|
[/examples](https://github.com/thi-ng/umbrella/tree/develop/examples)
|
|
148
148
|
directory are using this package:
|
|
149
149
|
|
|
150
|
-
| Screenshot | Description
|
|
151
|
-
|
|
152
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-benchmark2.png" width="240"/> | hdom update performance benchmark w/ config options
|
|
153
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hiccup-css-image-transition.jpg" width="240"/> | Generating pure CSS image transitions
|
|
150
|
+
| Screenshot | Description | Live demo | Source |
|
|
151
|
+
|:-----------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------|:------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------|
|
|
152
|
+
| <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) |
|
|
153
|
+
| <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) |
|
|
154
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/ramp-scroll-anim.png" width="240"/> | Scroll-based, reactive, multi-param CSS animation basics | [Demo](https://demo.thi.ng/umbrella/ramp-scroll-anim/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/ramp-scroll-anim) |
|
|
154
155
|
|
|
155
156
|
## API
|
|
156
157
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hiccup-css",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "CSS from nested JS data structures",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -126,5 +126,5 @@
|
|
|
126
126
|
],
|
|
127
127
|
"year": 2016
|
|
128
128
|
},
|
|
129
|
-
"gitHead": "
|
|
129
|
+
"gitHead": "e304d8e10f3446a22666ba75aaa2fb1d32752ae0\n"
|
|
130
130
|
}
|
package/units.d.ts
CHANGED
|
@@ -7,8 +7,14 @@ export declare let PRECISION: number;
|
|
|
7
7
|
* @param n
|
|
8
8
|
*/
|
|
9
9
|
export declare const setPrecision: (n: number) => number;
|
|
10
|
+
export declare const cap: (x: number) => string;
|
|
11
|
+
export declare const ch: (x: number) => string;
|
|
12
|
+
export declare const cm: (x: number) => string;
|
|
10
13
|
export declare const em: (x: number) => string;
|
|
11
14
|
export declare const ex: (x: number) => string;
|
|
15
|
+
export declare const inch: (x: number) => string;
|
|
16
|
+
export declare const lh: (x: number) => string;
|
|
17
|
+
export declare const mm: (x: number) => string;
|
|
12
18
|
export declare const rem: (x: number) => string;
|
|
13
19
|
export declare const percent: (x: number) => string;
|
|
14
20
|
export declare const px: (x: number) => string;
|
package/units.js
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
let PRECISION = 4;
|
|
2
2
|
const setPrecision = (n) => PRECISION = n;
|
|
3
3
|
const ff = (x) => x === (x | 0) ? String(x) : x.toFixed(PRECISION).replace(/^0./, ".").replace(/^-0./, "-.").replace(/0+$/, "");
|
|
4
|
+
const cap = (x) => `${ff(x)}cap`;
|
|
5
|
+
const ch = (x) => `${ff(x)}ch`;
|
|
6
|
+
const cm = (x) => `${ff(x)}cm`;
|
|
4
7
|
const em = (x) => `${ff(x)}em`;
|
|
5
8
|
const ex = (x) => `${ff(x)}ex`;
|
|
9
|
+
const inch = (x) => `${ff(x)}in`;
|
|
10
|
+
const lh = (x) => `${ff(x)}lh`;
|
|
11
|
+
const mm = (x) => `${ff(x)}mm`;
|
|
6
12
|
const rem = (x) => `${ff(x)}rem`;
|
|
7
13
|
const percent = (x) => `${ff(x)}%`;
|
|
8
14
|
const px = (x) => `${ff(x)}px`;
|
|
@@ -19,9 +25,15 @@ const turn = (x) => `${ff(x)}turn`;
|
|
|
19
25
|
const url = (x) => `url(${x})`;
|
|
20
26
|
export {
|
|
21
27
|
PRECISION,
|
|
28
|
+
cap,
|
|
29
|
+
ch,
|
|
30
|
+
cm,
|
|
22
31
|
deg,
|
|
23
32
|
em,
|
|
24
33
|
ex,
|
|
34
|
+
inch,
|
|
35
|
+
lh,
|
|
36
|
+
mm,
|
|
25
37
|
ms,
|
|
26
38
|
percent,
|
|
27
39
|
px,
|