@thi.ng/hiccup-css 2.6.13 → 2.7.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-03-13T14:04:31Z
+- **Last updated**: 2024-03-21T16:11:49Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,25 @@ 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.7.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-css@2.7.0) (2024-03-21)
+
+#### 🚀 Features
+
+- add support for `&` parent selector ([2332cdc](https://github.com/thi-ng/umbrella/commit/2332cdc))
+  - update xfSel transducer to support SASS-style `&`
+    parent selector
+  - add tests
+
+#### 🩹 Bug fixes
+
+- correct case-sensitivity in attrib selectors ([23d556f](https://github.com/thi-ng/umbrella/commit/23d556f))
+  - add tests
+
+#### ♻️ Refactoring
+
+- minor updates ([ac9032d](https://github.com/thi-ng/umbrella/commit/ac9032d))
+  - internal updates animation() & withScope()
+
 ## [2.6.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-css@2.6.0) (2024-02-12)
 
 #### 🚀 Features

package/README.md

@@ -29,6 +29,7 @@
   - [Property object merging & re-use](#property-object-merging--re-use)
   - [Iterators & CSS class scoping](#iterators--css-class-scoping)
   - [Nested selectors](#nested-selectors)
+    - [Parent selector](#parent-selector)
   - [Pseudo-classes](#pseudo-classes)
   - [Attribute selectors](#attribute-selectors)
   - [Auto-prefixed properties](#auto-prefixed-properties)
@@ -121,7 +122,7 @@ For Node.js REPL:
 const hiccupCss = await import("@thi.ng/hiccup-css");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 2.21 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.23 KB
 
 ## Dependencies
 
@@ -348,6 +349,67 @@ header, footer {
     font-size: 1.25rem;
 }
 ```
+#### Parent selector
+
+Child selectors can use the special `&` prefix to refer to their direct parent
+to form derived selectors, for example:
+
+```js
+import { css, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
+    ["#test", { color: "white" },
+        ["&.alt", { color: "black" }],
+        ["&-alt-bg", { background: "black" }]],
+    { format: css.PRETTY }
+);
+```
+
+```css
+#test.alt {
+    color: black;
+}
+
+#test-alt-bg {
+    background: black;
+}
+
+#test {
+    color: white;
+}
+```
+
+The `&`-prefixed selectors only refer to their immediate parent, but otherwise
+behave like all other nested selectors:
+
+```js
+import { css, PRETTY } from "@thi.ng/hiccup-css";
+
+css(
+    ["outer1", "outer2",
+        [".inner1", ".inner2", { color: "red" },
+            ["&--green", { color: "green" }],
+            ["&--blue", { color: "blue" }]]],
+    { format: css.PRETTY }
+);
+```
+
+```css
+outer1 .inner1--green, outer1 .inner2--green,
+outer2 .inner1--green, outer2 .inner2--green {
+    color: green;
+}
+
+outer1 .inner1--blue, outer1 .inner2--blue,
+outer2 .inner1--blue, outer2 .inner2--blue {
+    color: blue;
+}
+
+outer1 .inner1, outer1 .inner2,
+outer2 .inner1, outer2 .inner2 {
+    color: red;
+}
+```
 
 ### Pseudo-classes
 

package/animation.js

@@ -1,6 +1,6 @@
 import { at_keyframes } from "./keyframes.js";
 const animation = (id, opts, ...keyframes) => {
-  opts = {
+  const $opts = {
     duration: "250ms",
     name: id,
     ...opts
@@ -9,8 +9,8 @@ const animation = (id, opts, ...keyframes) => {
     at_keyframes.apply(null, [id, ...keyframes]),
     [
       `.${id}`,
-      Object.keys(opts).reduce(
-        (acc, k) => (acc[`animation-${k}`] = opts[k], acc),
+      Object.entries($opts).reduce(
+        (acc, [k, v]) => (acc[`animation-${k}`] = v, acc),
         {}
       )
     ]

package/attribs.js

@@ -1,4 +1,4 @@
-const $ = (op) => (id, x, caseSensitve = false) => `[${id}${op}="${x}"${caseSensitve ? " i" : ""}]`;
+const $ = (op) => (id, x, caseSensitve = true) => `[${id}${op}="${x}"${caseSensitve ? "" : " i"}]`;
 const withAttrib = (id) => `[${id}]`;
 const attribEq = $("");
 const attribContains = $("~");

package/impl.js

@@ -15,11 +15,13 @@ const EMPTY = /* @__PURE__ */ new Set();
 const NO_SPACES = ":[";
 const xfSel = comp(
   flatten(),
-  map((x) => NO_SPACES.indexOf(x.charAt(0)) >= 0 ? x : " " + x)
+  map(
+    (x) => x[0] === "&" ? x.substring(1) : NO_SPACES.includes(x[0]) ? x : " " + x
+  )
 );
 const withScope = (xf, scope) => comp(
   xf,
-  map((x) => isString(x) && x.indexOf(" .") == 0 ? x + scope : x)
+  map((x) => isString(x) && x.startsWith(" .") ? x + scope : x)
 );
 const expand = (acc, parent, rules, opts) => {
   const n = rules.length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-css",
-  "version": "2.6.13",
+  "version": "2.7.0",
   "description": "CSS from nested JS data structures",
   "type": "module",
   "module": "./index.js",
@@ -39,7 +39,7 @@
     "@thi.ng/api": "^8.9.30",
     "@thi.ng/checks": "^3.5.4",
     "@thi.ng/errors": "^2.5.1",
-    "@thi.ng/transducers": "^8.9.14"
+    "@thi.ng/transducers": "^8.9.15"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.42.3",
@@ -127,5 +127,5 @@
     ],
     "year": 2016
   },
-  "gitHead": "4b3d4ab6ce373ca817ad780f679572169a9ed733\n"
+  "gitHead": "da965520b2f3f8c259a791e8e8864308be2ba0be\n"
 }