@thi.ng/hiccup-css 2.6.6 → 2.6.8

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-02-25T14:07:53Z
+- **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

@@ -1,16 +1,5 @@
 <!-- This file is generated - DO NOT EDIT! -->
 <!-- Please see: https://github.com/thi-ng/umbrella/blob/develop/CONTRIBUTING.md#changes-to-readme-files -->
-> [!IMPORTANT]
-> ‼️ Announcing the thi.ng user survey 2024 📋
->
-> [Please participate in the survey here!](https://forms.gle/XacbSDEmQMPZg8197)\
-> (open until end of February)
->
-> **To achieve a better sample size, I'd highly appreciate if you could
-> circulate the link to this survey in your own networks.**
->
-> [Discussion](https://github.com/thi-ng/umbrella/discussions/447)
-
 # ![@thi.ng/hiccup-css](https://media.thi.ng/umbrella/banners-20230807/thing-hiccup-css.svg?a302745b)
 
 [![npm version](https://img.shields.io/npm/v/@thi.ng/hiccup-css.svg)](https://www.npmjs.com/package/@thi.ng/hiccup-css)
@@ -22,7 +11,7 @@
 > of the [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo
 > and anti-framework.
 >
-> 🚀 Help me to work full-time on these projects by [sponsoring me on
+> 🚀 Please help me to work full-time on these projects by [sponsoring me on
 > GitHub](https://github.com/sponsors/postspectacular). Thank you! ❤️
 
 - [About](#about)
@@ -181,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"]
@@ -199,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 }
 );
 ```
 
@@ -227,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 }
 );
 ```
 
@@ -319,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 }
 )
 ```
 
@@ -357,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 }
 );
 ```
 
@@ -390,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 }
 );
 ```
 
@@ -426,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 }
 );
 ```
 
@@ -464,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 }
 );
 ```
 
@@ -485,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: {
@@ -500,7 +507,7 @@ css.css(
             }
         }
     ),
-    { format: css.PRETTY }
+    { format: PRETTY }
 );
 ```
 
@@ -530,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 }
+    )
 );
 ```
 
@@ -564,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" }
     ])
 );
@@ -586,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;"
 ```
 
@@ -594,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;}"
@@ -628,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"],
@@ -642,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.6",
+  "version": "2.6.8",
   "description": "CSS from nested JS data structures",
   "type": "module",
   "module": "./index.js",
@@ -35,10 +35,10 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.26",
-    "@thi.ng/checks": "^3.5.0",
-    "@thi.ng/errors": "^2.4.18",
-    "@thi.ng/transducers": "^8.9.7"
+    "@thi.ng/api": "^8.9.27",
+    "@thi.ng/checks": "^3.5.1",
+    "@thi.ng/errors": "^2.4.19",
+    "@thi.ng/transducers": "^8.9.9"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.40.1",
@@ -126,5 +126,5 @@
     ],
     "year": 2016
   },
-  "gitHead": "6e20f80dd9df1c8055ffa3c1e4d6f7598add0c0b\n"
+  "gitHead": "df9e312af741d87e6b450afcfea6a6e381662b1e\n"
 }