@thi.ng/hiccup-css 2.6.7 → 2.6.8

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-03-01T15:22:50Z
+- **Last updated**: 2024-03-02T14:05:53Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/README.md

@@ -170,13 +170,15 @@ format preset, see examples further below.
 This feature is only intended for setting an element's `.style` attrib:
 
 ```ts
-css.css({
+import { css, percent, px } from "@thi.ng/hiccup-css";
+
+css({
     position: "absolute",
     border: 0,
     // function is evaluated during serialization
-    top: () => css.percent((Math.random() * 100) | 0),
+    top: () => percent((Math.random() * 100) | 0),
     // the entire properties object is passed to functions
-    left: (props) => css.px(props.border),
+    left: (props) => px(props.border),
     // arrays are joined with `,`
     // nested arrays are joined w/ ` `
     font: [["72px", "ComicSans"], "sans-serif"]
@@ -188,13 +190,15 @@ css.css({
 ### Basic selectors
 
 ```ts
-css.css(
+import { css, rem, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
     [
         ["html", "body", { margin: 0, padding: 0 }],
-        ["div", { "max-width": css.rem(30)}],
+        ["div", { "max-width": rem(30)}],
         ["div.title", { color: "red" }]
     ],
-    { format: css.PRETTY }
+    { format: PRETTY }
 );
 ```
 
@@ -216,16 +220,18 @@ div.title {
 ### Property object merging & re-use
 
 ```ts
+import { css, PRETTY } from "@thi.ng/hiccup-css";
+
 // re-usable property snippets
 const border = { border: "1px solid black" };
 const red = { color: "red" };
 
-css.css(
+css(
     [
         ["#foo", { background: "white" }, border, red],
         ["#bar", { background: "yellow", color: "black" }, border]
     ],
-    { format: css.PRETTY }
+    { format: PRETTY }
 );
 ```
 
@@ -308,13 +314,15 @@ selectors are computed using the cartesian product of any selectors in
 the current scope and their previously defined parents:
 
 ```ts
-css.css(
-    ["header", "footer", { "font-size": css.rem(1.25) },
+import { css, rem, withAttrib, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
+    ["header", "footer", { "font-size": rem(1.25) },
         ["nav", { background: "#000", color: "#666" },
             ["ul", { "list-style": "none" }],
-            ["li", { padding: css.rem(0.5) },
-                [css.withAttrib("selected"), { color: "#0cf" }]]]],
-    { format: css.PRETTY }
+            ["li", { padding: rem(0.5) },
+                [withAttrib("selected"), { color: "#0cf" }]]]],
+    { format: PRETTY }
 )
 ```
 
@@ -346,9 +354,11 @@ header, footer {
 Pseudo-classes follow the same pattern as other nested selectors shown above:
 
 ```ts
-css.css(
+import { css, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
     ["p", ["a", [":link", {color: "red"}], [":visited", {border: 0}]]],
-    { format: css.PRETTY }
+    { format: PRETTY }
 );
 ```
 
@@ -379,9 +389,11 @@ p a:visited {
 on property values is planned, but currently low priority.)
 
 ```ts
-css.css(
+import { css, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
     ["div", {"border-radius": "4px"}],
-    { autoprefix: ["border-radius"], format: css.PRETTY }
+    { autoprefix: ["border-radius"], format: PRETTY }
 );
 ```
 
@@ -415,20 +427,22 @@ Note: In CSS Level 3, the `not` operator can't be used to negate an individual
 media feature expression, only an entire media query.
 
 ```ts
-css.css(
-    css.at_media(
-        { screen: true, "min-width": css.rem(10) },
+import { css, at_media, percent, rem, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
+    at_media(
+        { screen: true, "min-width": rem(10) },
         [
-            [".col", { width: css.percent(50)}],
+            [".col", { width: percent(50)}],
             [
-                css.at_media(
+                at_media(
                     { "min-width": "20rem" },
-                    [".col", { padding: css.rem(1) }]
+                    [".col", { padding: rem(1) }]
                 )
             ]
         ]
     ),
-    { format: css.PRETTY }
+    { format: PRETTY }
 );
 ```
 
@@ -453,9 +467,11 @@ css.css(
 ### Keyframes
 
 ```ts
-css.css(
-    css.at_keyframes("fadein", { opacity: 0 }, { opacity: 1 }),
-    { format: css.PRETTY }
+import { css, at_keyframes, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
+    at_keyframes("fadein", { opacity: 0 }, { opacity: 1 }),
+    { format: PRETTY }
 );
 ```
 
@@ -474,8 +490,10 @@ css.css(
 ```
 
 ```ts
-css.css(
-    css.at_keyframes(
+import { css, at_keyframes, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
+    at_keyframes(
         "rgbfade",
         {
             0: {
@@ -489,7 +507,7 @@ css.css(
             }
         }
     ),
-    { format: css.PRETTY }
+    { format: PRETTY }
 );
 ```
 
@@ -519,13 +537,15 @@ given animation `opts`. Only the `duration`option is given a default
 value (250ms), all others are optional.
 
 ```ts
+import { css, animation } from "@thi.ng/hiccup-css";
+
 css(
-  animation(
-    "delayed-fade-in",
-    { delay: "0.5s" },
-    { opacity: 0 },
-    { opacity: 1 }
-  )
+    animation(
+        "delayed-fade-in",
+        { delay: "0.5s" },
+        { opacity: 0 },
+        { opacity: 1 }
+    )
 );
 ```
 
@@ -553,8 +573,10 @@ Results in:
 CSS strings can be installed into the DOM `<head>` element via `injectStyleSheet()`:
 
 ```ts
-css.injectStyleSheet(
-    css.css([
+import { css, injectStyleSheet } from "@thi.ng/hiccup-css";
+
+injectStyleSheet(
+    css([
         "body", { background: "#000", color: "#fff" }
     ])
 );
@@ -575,7 +597,9 @@ the `CSSOpts` object passed to `css()`. This form is mainly used by the
 various `at_*()` functions provided (e.g. `at_media()` example above).
 
 ```ts
-css.css(at_import("foo.css", "screen"));
+import { css, at_import } from "@thi.ng/hiccup-css";
+
+css(at_import("foo.css", "screen"));
 // "@import url(foo.css) screen;"
 ```
 
@@ -583,10 +607,12 @@ The following example illustrates the head position placement, using the
 `comment()` function to emit CSS comments.
 
 ```ts
-css.css([
+import { css, comment } from "@thi.ng/hiccup-css";
+
+css([
     // comments are usually omitted with the default format (css.COMPACT)
     // pass `true` as 2nd arg to force inclusion
-    css.comment("generated, please don't edit", true),
+    comment("generated, please don't edit", true),
     ["div", { margin: 0 }]
 ]);
 // "/*generated, don't edit*/div{margin:0;}"
@@ -617,6 +643,8 @@ called with all remaining elements in the same array. I.e. `["@import",
 of a scope.
 
 ```ts
+import * as css from "@thi.ng/hiccup-css";
+
 const styles = [
     ["@comment", " CSS from JSON"],
     ["@import", "print.css", "print"],
@@ -631,12 +659,12 @@ css.css(styles, { format: css.PRETTY, fns: css.QUOTED_FNS });
 
 // btw. QUOTED_FNS is simply:
 const QUOTED_FNS = {
-    "@comment": comment,
-    "@import": at_import,
-    "@keyframes": at_keyframes,
-    "@media": at_media,
-    "@namespace": at_namespace,
-    "@supports": at_supports,
+    "@comment": css.comment,
+    "@import": css.at_import,
+    "@keyframes": css.at_keyframes,
+    "@media": css.at_media,
+    "@namespace": css.at_namespace,
+    "@supports": css.at_supports,
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-css",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "description": "CSS from nested JS data structures",
   "type": "module",
   "module": "./index.js",
@@ -38,7 +38,7 @@
     "@thi.ng/api": "^8.9.27",
     "@thi.ng/checks": "^3.5.1",
     "@thi.ng/errors": "^2.4.19",
-    "@thi.ng/transducers": "^8.9.8"
+    "@thi.ng/transducers": "^8.9.9"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.40.1",
@@ -126,5 +126,5 @@
     ],
     "year": 2016
   },
-  "gitHead": "d660ae8fd1bf64d919b4334f19509f1f539d70f6\n"
+  "gitHead": "df9e312af741d87e6b450afcfea6a6e381662b1e\n"
 }