@jackens/nnn 2026.11.16 → 2026.11.17

package/README.md

@@ -1,6 +1,6 @@
 # nnn
 
-A collection of Jackens’ JavaScript helper utilities (version: `2026.11.16`).
+A collection of Jackens’ JavaScript helper utilities (version: `2026.11.17`).
 
 ## Installation
 
@@ -89,7 +89,8 @@ Keys are selectors or at-rules; values are either CSS property values or nested
 Nested selectors are appended to the parent selector as is (e.g. `'.c'` inside `a` → `a.c`), so a leading space is needed for a descendant combinator (e.g. `' .c'` → `a .c`).
 If a nested selector contains `&`, every `&` is replaced with the parent selector instead (e.g. `'&:hover'` → `a:hover`, `'.c &'` → `.c a`).
 A selector key may contain comma-separated alternatives (e.g. `'.b,.c'`); when nested, each alternative is combined with each parent alternative (cartesian product), producing a comma-joined selector list (e.g. `'a.b,a.c'`).
-Commas inside brackets or quotes (e.g. `':is(.b,.c)'`, `'[title="b,c"]'`) do not separate alternatives; whitespace after a separating comma is ignored (use `&` for a descendant combinator in a non-first alternative, e.g. `'.b,& .c'` → `a.b,a .c`).
+Commas inside brackets or quotes (e.g. `':is(.b,.c)'`, `'[title="b,c"]'`) do not separate alternatives.
+Whitespace after a separating comma belongs to the next alternative, so like a leading space of the first one it makes a descendant combinator when nested (e.g. `' .b, .c'` → `a .b,a .c`, `'.b, .c'` → `a.b,a .c`); leading whitespace of a resulting selector is ignored (e.g. `'h1, h2'` → `h1,h2`, `'.b, &:hover'` → `a.b,a:hover`).
 At-rules (e.g. `'@media …'`) wrap their nested rules; an at-rule nested in a selector wraps that selector (e.g. `{ a: { '@media(…)': { color: 'red' } } }` → `@media(…){a{color:red}}`).
 Inside a top-level `:root` rule nested keys are concatenated into property names (e.g. `{ ':root': { '--': { bg: 'red' } } }` → `:root{--bg:red}`).
 Properties without a selector (top-level or directly in a top-level at-rule, e.g. `@font-face`) are emitted as bare declarations.
@@ -440,12 +441,12 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
-Commas inside brackets or quotes do not split selectors and whitespace after a comma is ignored:
+Commas inside brackets or quotes do not split selectors:
 
 ```ts
 const actual = c({
   ':is(.a,.b)': {
-    '.c, .d': { margin: 1 },
+    '.c,.d': { margin: 1 },
     '[title="x,y"]': { margin: 2 },
   },
 })
@@ -462,6 +463,32 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+Whitespace after a comma is kept, but leading whitespace of a resulting selector is ignored:
+
+```ts
+const actual = c({
+  'h1, h2': {
+    margin: 0,
+    ' .a, .b': { margin: 1 },
+    '.c, .d , &:hover': { margin: 2 },
+  },
+})
+
+const expected = `
+  h1,h2{
+    margin:0
+  }
+  h1 .a,h1 .b,h2 .a,h2 .b{
+    margin:1
+  }
+  h1.c,h1 .d,h1:hover,h2.c,h2 .d,h2:hover{
+    margin:2
+  }
+`.replace(/\n\s*/g, '')
+
+expect(actual).toBe(expected)
+```
+
 At-rules nested in selectors wrap these selectors:
 
 ```ts
@@ -531,9 +558,9 @@ expect(c({ a: { b$$c: 1 } }, '')).toBe('a{b$$c:1}')
 ```ts
 const h: {
   <T extends keyof HTMLElementTagNameMap>(tag: T, ...args: HArgs1[]): HTMLElementTagNameMap[T]
-  (tag: string, ...args: HArgs1[]): HTMLElement
   <N extends Node>(node: N, ...args: HArgs1[]): N
-  (tagOrNode: string | Node, ...args: HArgs1[]): Node
+  (tag: string, ...args: HArgs1[]): HTMLElement
+  (node: Node, ...args: HArgs1[]): Node
 }
 ```
 
@@ -575,13 +602,11 @@ const i = h('i', 'text')
 h(b, i)
 
 expect(i.outerHTML).toBe('<i>text</i>')
-
 expect(b.outerHTML).toBe('<b><i>text</i></b>')
 
 h(i, { $className: 'some class' })
 
 expect(i.outerHTML).toBe('<i class="some class">text</i>')
-
 expect(b.outerHTML).toBe('<b><i class="some class">text</i></b>')
 ```
 
@@ -589,11 +614,9 @@ Text content from strings, numbers and `$innerText`:
 
 ```ts
 expect(h('span', 'text').outerHTML).toBe('<span>text</span>')
-
 expect(h('span', { $innerText: 'text' }).outerHTML).toBe('<span>text</span>')
 
 expect(h('span', '42').outerHTML).toBe('<span>42</span>')
-
 expect(h('span', 42).outerHTML).toBe('<span>42</span>')
 ```
 
@@ -601,9 +624,7 @@ expect(h('span', 42).outerHTML).toBe('<span>42</span>')
 
 ```ts
 expect(h('div', { style: 'margin:0;padding:0' }).outerHTML).toBe('<div style="margin:0;padding:0"></div>')
-
 expect(h('div', { $style: 'margin:0;padding:0' }).outerHTML).toBe('<div style="margin: 0px; padding: 0px;"></div>')
-
 expect(h('div', { $style: { margin: 0, padding: 0 } }).outerHTML).toBe(
   '<div style="margin: 0px; padding: 0px;"></div>'
 )
@@ -639,14 +660,13 @@ expect(checkbox1.checked).toBe(true)
 expect(checkbox2.checked).toBe(true)
 
 expect(checkbox1.outerHTML).toBe('<input type="checkbox" checked="">')
-
 expect(checkbox2.outerHTML).toBe('<input type="checkbox">')
 ```
 
 Object values of `$`-prefixed properties are merged:
 
 ```ts
-const div = h('div')
+const div = h('div') as any
 
 expect(div.key).toBeUndefined()
 
@@ -691,7 +711,7 @@ Only plain objects are merged into `$`-prefixed properties:
 
 ```ts
 const date = new Date(0)
-const div = h('div', { $date: date, $list: [1, 2] })
+const div = h('div', { $date: date, $list: [1, 2] }) as any
 
 expect(div.date).toBe(date)
 
@@ -859,9 +879,9 @@ expect(() => rwd({}, '.x', 100, 50, [2, 1, 1.5])).toThrow(RangeError)
 ```ts
 const s: {
   <T extends keyof SVGElementTagNameMap>(tag: T, ...args: HArgs1[]): SVGElementTagNameMap[T]
-  (tag: string, ...args: HArgs1[]): SVGElement
   <N extends Node>(node: N, ...args: HArgs1[]): N
-  (tagOrNode: string | Node, ...args: HArgs1[]): Node
+  (tag: string, ...args: HArgs1[]): SVGElement
+  (node: Node, ...args: HArgs1[]): Node
 }
 ```
 

package/nnn.d.ts

@@ -12,7 +12,8 @@ export type CNode = {
  * Nested selectors are appended to the parent selector as is (e.g. `'.c'` inside `a` → `a.c`), so a leading space is needed for a descendant combinator (e.g. `' .c'` → `a .c`).
  * If a nested selector contains `&`, every `&` is replaced with the parent selector instead (e.g. `'&:hover'` → `a:hover`, `'.c &'` → `.c a`).
  * A selector key may contain comma-separated alternatives (e.g. `'.b,.c'`); when nested, each alternative is combined with each parent alternative (cartesian product), producing a comma-joined selector list (e.g. `'a.b,a.c'`).
- * Commas inside brackets or quotes (e.g. `':is(.b,.c)'`, `'[title="b,c"]'`) do not separate alternatives; whitespace after a separating comma is ignored (use `&` for a descendant combinator in a non-first alternative, e.g. `'.b,& .c'` → `a.b,a .c`).
+ * Commas inside brackets or quotes (e.g. `':is(.b,.c)'`, `'[title="b,c"]'`) do not separate alternatives.
+ * Whitespace after a separating comma belongs to the next alternative, so like a leading space of the first one it makes a descendant combinator when nested (e.g. `' .b, .c'` → `a .b,a .c`, `'.b, .c'` → `a.b,a .c`); leading whitespace of a resulting selector is ignored (e.g. `'h1, h2'` → `h1,h2`, `'.b, &:hover'` → `a.b,a:hover`).
  * At-rules (e.g. `'@media …'`) wrap their nested rules; an at-rule nested in a selector wraps that selector (e.g. `{ a: { '@media(…)': { color: 'red' } } }` → `@media(…){a{color:red}}`).
  * Inside a top-level `:root` rule nested keys are concatenated into property names (e.g. `{ ':root': { '--': { bg: 'red' } } }` → `:root{--bg:red}`).
  * Properties without a selector (top-level or directly in a top-level at-rule, e.g. `@font-face`) are emitted as bare declarations.
@@ -60,9 +61,9 @@ export type HArgs = [string | Node, ...HArgs1[]]
  */
 export declare const h: {
   <T extends keyof HTMLElementTagNameMap>(tag: T, ...args: HArgs1[]): HTMLElementTagNameMap[T]
-  (tag: string, ...args: HArgs1[]): HTMLElement
   <N extends Node>(node: N, ...args: HArgs1[]): N
-  (tagOrNode: string | Node, ...args: HArgs1[]): Node
+  (tag: string, ...args: HArgs1[]): HTMLElement
+  (node: Node, ...args: HArgs1[]): Node
 }
 /**
  * A lightweight _HyperScript_-style helper for creating and modifying `SVGElement`s (see also {@link h}).
@@ -91,9 +92,9 @@ export declare const h: {
  */
 export declare const s: {
   <T extends keyof SVGElementTagNameMap>(tag: T, ...args: HArgs1[]): SVGElementTagNameMap[T]
-  (tag: string, ...args: HArgs1[]): SVGElement
   <N extends Node>(node: N, ...args: HArgs1[]): N
-  (tagOrNode: string | Node, ...args: HArgs1[]): Node
+  (tag: string, ...args: HArgs1[]): SVGElement
+  (node: Node, ...args: HArgs1[]): Node
 }
 /**
  * Shorthand for creating an `<svg>` element with a `<use>` child referencing a symbol (e.g. an icon) by ID.

package/nnn.js

@@ -29,7 +29,7 @@ var splitSelectorList = (selectorList) => {
       selectors[selectors.length - 1] += char;
     }
   });
-  return selectors.map((selector, index) => (index === 0 ? selector : selector.trimStart()).trimEnd());
+  return selectors.map((selector) => selector.trimEnd());
 };
 var nestSelector = (parent, selector) => {
   let nested = "";
@@ -42,7 +42,7 @@ var nestSelector = (parent, selector) => {
       nested += char;
     }
   });
-  return ampersandFound ? nested : parent + selector;
+  return (ampersandFound ? nested : parent + selector).trimStart();
 };
 var stripSplitter = (key, splitter) => {
   const splitterIndex = splitter === "" ? -1 : key.indexOf(splitter);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackens/nnn",
-  "version": "2026.11.16",
+  "version": "2026.11.17",
   "description": "Jackens’ JavaScript helpers.",
   "keywords": [
     "CSS-in-JS",