@jackens/nnn 2023.8.20 → 2023.8.26

package/nnn.d.ts

@@ -1,40 +1,27 @@
 /**
- * The type of arguments of the `$c` helper.
+ * The type of arguments of the `escapeValues` and `escape` helpers.
  */
-export type $CNode = {
-  [attributeOrSelector: string]: string | number | $CNode;
-};
-
-/**
- * The type of arguments of the `$c` helper.
- */
-export type $CRoot = Record<string, $CNode>;
+export type EscapeMap = Map<any, (value?: any) => string>;
 
 /**
- * The type of arguments of the `$escapeValues` and `$escape` helpers.
+ * The type of arguments of the `h` and `s` helpers.
  */
-export type $EscapeMap = Map<any, (value?: any) => string>;
+export type HArgs = [
+  string | Node,
+  ...(Record<string, any> | null | undefined | Node | string | number | HArgs)[]
+];
 
 /**
- * The type of arguments of the `$h` and `$s` helpers.
+ * The type of arguments of the `jcss` helper.
  */
-export type $HArgs = [
-  string | Node,
-  ...(Record<string, any> | null | undefined | Node | string | number | $HArgs)[]
-];
+export type JcssNode = {
+  [attributeOrSelector: string]: string | number | JcssNode;
+};
 
 /**
- * A simple CSS-in-JS helper.
- *
- * The `root` parameter provides a hierarchical description of CSS rules.
- *
- * - Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
- * - All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
- * - In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
- * - Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
- * - Top-level keys that begin with `@` are not concatenated with sub-object keys.
+ * The type of arguments of the `jcss` helper.
  */
-export function $c(root: $CRoot, splitter?: string): string;
+export type JcssRoot = Record<string, JcssNode>;
 
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
@@ -57,7 +44,7 @@ export function $c(root: $CRoot, splitter?: string): string;
  * - `zLabels`: data series labels
  * - `zxY`: chart data
  */
-export function $chartable(options?: {
+export function chartable(options?: {
   bottom?: number;
   gapX?: number;
   gapY?: number;
@@ -79,30 +66,30 @@ export function $chartable(options?: {
 /**
  * A helper that checks equality of the given arguments.
  */
-export function $eq(x: any, y: any): boolean;
+export function eq(x: any, y: any): boolean;
 
 /**
  * A generic helper for escaping `values` by given `escapeMap` (in *TemplateStrings* flavor).
  */
-export function $escape(escapeMap: $EscapeMap, template: TemplateStringsArray, ...values: any[]): string;
+export function escape(escapeMap: EscapeMap, template: TemplateStringsArray, ...values: any[]): string;
 
 /**
  * A generic helper for escaping `values` by given `escapeMap`.
  */
-export function $escapeValues(escapeMap: $EscapeMap, values: any[]): string[];
+export function escapeValues(escapeMap: EscapeMap, values: any[]): string[];
 
 /**
  * A helper that implements typographic corrections specific to Polish typography.
  */
-export function $fixTypography(node: Node): void;
+export function fixTypography(node: Node): void;
 
 /**
  * A convenient helper for getting values of nested objects.
  */
-export function $get(defaultValue: any, ref: any, ...keys: (string | number | symbol)[]): any;
+export function get(defaultValue: any, ref: any, ...keys: (string | number | symbol)[]): any;
 
 /**
- * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `$s`).
+ * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `s`).
  *
  * - The first argument of type `string` specifies the tag of the element to be created.
  * - The first argument of type `Node` specifies the element to be modified.
@@ -114,58 +101,71 @@ export function $get(defaultValue: any, ref: any, ...keys: (string | number | sy
  * - All other arguments of type `null` or `undefined` are simply ignored.
  * - All other arguments of type `Node` are appended to the element being created or modified.
  * - All other arguments of type `string`/`number` are converted to `Text` nodes and appended to the element being created or modified.
- * - All other arguments of type `$HArgs` are passed to `$h` and the results are appended to the element being created or modified.
+ * - All other arguments of type `HArgs` are passed to `h` and the results are appended to the element being created or modified.
  */
-export function $h<T extends keyof HTMLElementTagNameMap>(tag: T, ...args: $HArgs[1][]): HTMLElementTagNameMap[T];
-export function $h<N extends Node>(node: N, ...args: $HArgs[1][]): N;
-export function $h(...args: $HArgs): Node;
+export function h<T extends keyof HTMLElementTagNameMap>(tag: T, ...args: HArgs[1][]): HTMLElementTagNameMap[T];
+export function h<N extends Node>(node: N, ...args: HArgs[1][]): N;
+export function h(...args: HArgs): Node;
 
 /**
  * A replacement for the `in` operator (not to be confused with the `for-in` loop) that works properly.
  */
-export function $in(key: any, ref: any): boolean;
+export function has(key: any, ref: any): boolean;
 
 /**
  * A helper that checks if the given argument is of a certain type.
  */
-export function $is(type: BigIntConstructor, arg: any): arg is bigint;
-export function $is(type: BooleanConstructor, arg: any): arg is boolean;
-export function $is(type: NumberConstructor, arg: any): arg is number;
-export function $is(type: StringConstructor, arg: any): arg is string;
-export function $is(type: SymbolConstructor, arg: any): arg is symbol;
-export function $is(type: undefined, arg: any): arg is null | undefined;
-export function $is<T extends abstract new (...args: any[]) => any>(type: T, arg: any): arg is InstanceType<T>;
+export function is(type: BigIntConstructor, arg: any): arg is bigint;
+export function is(type: BooleanConstructor, arg: any): arg is boolean;
+export function is(type: NumberConstructor, arg: any): arg is number;
+export function is(type: StringConstructor, arg: any): arg is string;
+export function is(type: SymbolConstructor, arg: any): arg is symbol;
+export function is(type: undefined, arg: any): arg is null | undefined;
+export function is<T extends abstract new (...args: any[]) => any>(type: T, arg: any): arg is InstanceType<T>;
+
+/**
+ * A simple CSS-in-JS helper.
+ *
+ * The `root` parameter provides a hierarchical description of CSS rules.
+ *
+ * - Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
+ * - All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
+ * - In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
+ * - Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
+ * - Top-level keys that begin with `@` are not concatenated with sub-object keys.
+ */
+export function jcss(root: JcssRoot, splitter?: string): string;
 
 /**
  * Language translations helper.
  */
-export function $locale(
+export function locale(
   locales: Record<string, Record<string, string | Record<string, string>>>,
   defaultLanguage: string,
   languages?: readonly string[]
 ): (text?: string, version?: string) => string;
 
 /**
- * A generic helper for syntax highlighting (see also `$nanolightJs`).
+ * A generic helper for syntax highlighting (see also `nanolightJs`).
  */
-export function $nanolight(
+export function nanolight(
   pattern: RegExp,
-  highlighters: ((chunk: string, index: number) => $HArgs[1])[],
+  highlighters: ((chunk: string, index: number) => HArgs[1])[],
   code: string
-): $HArgs[1][];
+): HArgs[1][];
 
 /**
  * A helper for highlighting JavaScript.
  */
-export function $nanolightJs(codeJs: string): $HArgs[1][];
+export function nanolightJs(codeJs: string): HArgs[1][];
 
 /**
  * A helper for choosing the correct singular and plural.
  */
-export function $plUral(singular: string, plural2: string, plural5: string, value: number): string;
+export function plUral(singular: string, plural2: string, plural5: string, value: number): string;
 
 /**
- * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `$h`).
+ * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `h`).
  *
  * - The first argument of type `string` specifies the tag of the element to be created.
  * - The first argument of type `Node` specifies the element to be modified.
@@ -177,16 +177,16 @@ export function $plUral(singular: string, plural2: string, plural5: string, valu
  * - All other arguments of type `null` or `undefined` are simply ignored.
  * - All other arguments of type `Node` are appended to the element being created or modified.
  * - All other arguments of type `string`/`number` are converted to `Text` nodes and appended to the element being created or modified.
- * - All other arguments of type `$HArgs` are passed to `$s` and the results are appended to the element being created or modified.
+ * - All other arguments of type `HArgs` are passed to `s` and the results are appended to the element being created or modified.
  */
-export function $s<T extends keyof SVGElementTagNameMap>(tag: T, ...args: $HArgs[1][]): SVGElementTagNameMap[T];
-export function $s<N extends Node>(node: N, ...args: $HArgs[1][]): N;
-export function $s(...args: $HArgs): Node;
+export function s<T extends keyof SVGElementTagNameMap>(tag: T, ...args: HArgs[1][]): SVGElementTagNameMap[T];
+export function s<N extends Node>(node: N, ...args: HArgs[1][]): N;
+export function s(...args: HArgs): Node;
 
 /**
  * A convenient helper for setting values of nested objects.
  */
-export function $set(value: any, ref: any, ...keys: (string | number | symbol)[]): void;
+export function set(value: any, ref: any, ...keys: (string | number | symbol)[]): void;
 
 /**
  * A helper that generates a UUID v1 identifier (with a creation timestamp).
@@ -194,7 +194,7 @@ export function $set(value: any, ref: any, ...keys: (string | number | symbol)[]
  * - The optional `node` parameter should have the format `/^[0123456789abcdef]+$/`.
  *   Its value will be trimmed to last 12 characters and left padded with zeros.
  */
-export function $uuid1(options?: {
+export function uuid1(options?: {
   date?: Date;
   node?: string;
 }): string;

package/nnn.js

@@ -1,97 +1,24 @@
 /**
- * @typedef {[
- *   string | Node,
- *   ...(Record<string, any> | null | undefined | Node | string | number | $HArgs)[]
- * ]} $HArgs
+ * @typedef {Map<any, (value?: any) => string>} EscapeMap
  */
 
 /**
- * @typedef {{
- *   [attributeOrSelector: string]: string | number | $CNode;
- * }} $CNode
+ * @typedef {[
+ *   string | Node,
+ *   ...(Record<string, any> | null | undefined | Node | string | number | HArgs)[]
+ * ]} HArgs
  */
 
 /**
- * @typedef {Record<string, $CNode>} $CRoot
+ * @typedef {{
+ *   [attributeOrSelector: string]: string | number | JcssNode;
+ * }} JcssNode
  */
 
 /**
- * @typedef {Map<any, (value?: any) => string>} $EscapeMap
+ * @typedef {Record<string, JcssNode>} JcssRoot
  */
 
-const _c = (
-  /** @type {$CNode}   */ node,
-  /** @type {string}   */ prefix,
-  /** @type {string[]} */ result,
-  /** @type {(text: string) => string} */ split
-) => {
-  const /** @type {[$CNode | string[], string][]} */ queue = [[node, prefix]]
-
-  while (queue.length) {
-    const [style2, prefix2] = queue.shift() ?? []
-
-    if (style2 == null || prefix2 == null) {
-      continue
-    }
-
-    if ($is(Array, style2)) {
-      result.push(prefix2, prefix2 !== '' ? '{' : '', style2.join(';'), prefix2 !== '' ? '}' : '')
-    } else {
-      const /** @type {[$CNode | string[], string][]} */ todo = []
-      let /** @type {string[]} */ attributes = []
-      let attributesPushed = false
-
-      for (const key in style2) {
-        const value = style2[key]
-
-        if ($is(String, value) || $is(Number, value)) {
-          if (!attributesPushed) {
-            attributesPushed = true
-            attributes = []
-            todo.push([attributes, prefix2])
-          }
-
-          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => '-' + letter.toLowerCase())}:${value}`)
-        } else {
-          attributesPushed = false
-
-          const /** @type {string[]} */ newPrefix = []
-          const keySplitted = key.split(',')
-
-          for (const prefixItem of prefix2.split(',')) {
-            for (const keyItem of keySplitted) {
-              newPrefix.push(prefixItem + keyItem)
-            }
-          }
-
-          todo.push([value, newPrefix.join(',')])
-        }
-      }
-
-      queue.unshift(...todo)
-    }
-  }
-}
-
-export const $c = (/** @type {$CRoot} */ root, splitter = '$$') => {
-  const split = (/** @type {string} */ text) => text.split(splitter)[0]
-  const /** @type {string[]} */ result = []
-
-  for (const key in root) {
-    const value = root[key]
-
-    if (key[0] === '@') {
-      result.push(split(key) + '{')
-      _c(value, '', result, split)
-      result.push('}')
-    } else {
-      _c(value, split(key), result, split)
-    }
-  }
-
-  return result.join('')
-}
-
 const _COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
 
 /**
@@ -114,7 +41,7 @@ const _COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
  *   zxY?: number[][];
  * }} options
  */
-export const $chartable = ({
+export const chartable = ({
   bottom = 50,
   gapX = 70,
   gapY = 30,
@@ -144,7 +71,7 @@ export const $chartable = ({
       const value = col.innerText
 
       if (x >= 0 && z >= 0 && zxYNotPassed) {
-        $set(parseFloat(value), zxY, z, x)
+        set(parseFloat(value), zxY, z, x)
       } else if (x >= 0 && z < 0 && xLabelsNotPassed) {
         xLabels[x] = value
       } else if (x < 0 && z >= 0 && zLabelsNotPassed) {
@@ -203,13 +130,13 @@ export const $chartable = ({
   const h = gapY * (maxY - 1)
   const svgW = left + w + right
   const svgH = top + h + bottom
-  const /** @type {$HArgs} */ graph = ['g', { transform: `translate(${left} ${top})` },
+  const /** @type {HArgs} */ graph = ['g', { transform: `translate(${left} ${top})` },
     ...yi.map(y => ['line', { x1: 0, x2: w, y1: y, y2: y, stroke: '#8888' }]),
     ...xi.map(x => ['line', { x1: x, x2: x, y1: 0, y2: h, stroke: '#8888' }])]
-  const /** @type {$HArgs} */ lColors = ['g', { class: 'chartable-z-colors', transform: 'translate(-80 0)' }]
-  const /** @type {$HArgs} */ lLabels = ['g', { class: 'chartable-z-labels', transform: 'translate(-95 0)' }]
-  const /** @type {$HArgs} */ rColors = ['g', { class: 'chartable-z-colors', transform: 'translate(80 0)' }]
-  const /** @type {$HArgs} */ rLabels = ['g', { class: 'chartable-z-labels', transform: 'translate(95 0)' }]
+  const /** @type {HArgs} */ lColors = ['g', { class: 'chartable-z-colors', transform: 'translate(-80 0)' }]
+  const /** @type {HArgs} */ lLabels = ['g', { class: 'chartable-z-labels', transform: 'translate(-95 0)' }]
+  const /** @type {HArgs} */ rColors = ['g', { class: 'chartable-z-colors', transform: 'translate(80 0)' }]
+  const /** @type {HArgs} */ rLabels = ['g', { class: 'chartable-z-labels', transform: 'translate(95 0)' }]
   const yLabel = (/** @type {number} */ min, /** @type {number} */ max, /** @type {number} */ y) =>
     (min + (max - min) * (maxY - 1 - y) / (maxY - 1)).toFixed(2).replace(/\.?0+$/, '')
 
@@ -247,7 +174,7 @@ export const $chartable = ({
     })
   })
 
-  return $s('svg', {
+  return s('svg', {
     viewBox: `0 0 ${svgW} ${svgH}`,
     width: `${svgW}px`,
     height: `${svgH}px`,
@@ -284,7 +211,7 @@ export const $chartable = ({
   )
 }
 
-export const $eq = /** @returns {boolean} */ (/** @type {any} */ x, /** @type {any} */ y) => {
+export const eq = /** @returns {boolean} */ (/** @type {any} */ x, /** @type {any} */ y) => {
   if (x === y) {
     return true
   }
@@ -305,12 +232,12 @@ export const $eq = /** @returns {boolean} */ (/** @type {any} */ x, /** @type {a
     }
 
     if (xConstructor === Array) {
-      return x.length === y.length && x.every((/** @type {any} */ item, /** @type {number} */ index) => $eq(item, y[index]))
+      return x.length === y.length && x.every((/** @type {any} */ item, /** @type {number} */ index) => eq(item, y[index]))
     }
 
     if (xConstructor === Object) {
       const keysOfX = Object.keys(x)
-      return keysOfX.length === Object.keys(y).length && keysOfX.every(key => $eq(x[key], y[key]))
+      return keysOfX.length === Object.keys(y).length && keysOfX.every(key => eq(x[key], y[key]))
     }
 
     if (xConstructor === Set || xConstructor === Map) {
@@ -319,27 +246,27 @@ export const $eq = /** @returns {boolean} */ (/** @type {any} */ x, /** @type {a
       }
       const xa = [...x]
       const ya = [...y]
-      return xa.every(xv => ya.find(yv => $eq(xv, yv)))
+      return xa.every(xv => ya.find(yv => eq(xv, yv)))
     }
   }
 
   return false
 }
 
-export const $escape = (
-  /** @type {$EscapeMap}           */ escapeMap,
+export const escape = (
+  /** @type {EscapeMap}            */ escapeMap,
   /** @type {TemplateStringsArray} */ template,
   /** @type {any[]}                */ ...values
-) => String.raw(template, ...$escapeValues(escapeMap, values))
+) => String.raw(template, ...escapeValues(escapeMap, values))
 
-export const $escapeValues = (
-  /** @type {$EscapeMap} */ escapeMap,
+export const escapeValues = (
+  /** @type {EscapeMap}  */ escapeMap,
   /** @type {any[]}      */ values
 ) => values.map(value => (escapeMap.get(value?.constructor) ?? escapeMap.get(undefined))?.(value) ?? '')
 
 const TAGS_TO_SKIP = { IFRAME: 1, NOSCRIPT: 1, PRE: 1, SCRIPT: 1, STYLE: 1, TEXTAREA: 1 }
 
-export const $fixTypography = (/** @type {Node} */ node) => {
+export const fixTypography = (/** @type {Node} */ node) => {
   const /** @type {Node[]} */ queue = [node]
 
   while (queue.length > 0) {
@@ -351,7 +278,7 @@ export const $fixTypography = (/** @type {Node} */ node) => {
 
         if (childNode instanceof Text) {
           queue.push(childNode)
-        } else if (childNode instanceof Element && !$in(childNode.tagName, TAGS_TO_SKIP)) {
+        } else if (childNode instanceof Element && !has(childNode.tagName, TAGS_TO_SKIP)) {
           queue.push(childNode)
         }
       }
@@ -362,7 +289,7 @@ export const $fixTypography = (/** @type {Node} */ node) => {
         i %= 3
 
         const currentNode = i === 2
-          ? $h('span', { style: 'white-space:nowrap' }, chunk)
+          ? h('span', { style: 'white-space:nowrap' }, chunk)
           : i === 1
             ? document.createTextNode(chunk)
             : document.createTextNode(chunk.replace(/(\/(?=[^/\s])|\.(?=[^\s]))/g, '$1\u200B'))
@@ -379,13 +306,13 @@ export const $fixTypography = (/** @type {Node} */ node) => {
   }
 }
 
-export const $get = (
+export const get = (
   /** @type {any} */ defaultValue,
   /** @type {any} */ ref,
   /** @type {(string | number | symbol)[]} */ ...keys
 ) => {
   for (const key of keys) {
-    if (!$in(key, ref)) {
+    if (!has(key, ref)) {
       return defaultValue
     }
 
@@ -402,14 +329,14 @@ const /** @type {Record<string, string>} */ NS = {
 /**
  * @type {{
  *   (namespaceURI?: null | undefined): {
- *     <T extends keyof HTMLElementTagNameMap>(tag:  T, ...args: $HArgs[1][]): HTMLElementTagNameMap[T];
- *     <N extends Node>                       (node: N, ...args: $HArgs[1][]): N;
- *     (...args: $HArgs): Node;
+ *     <T extends keyof HTMLElementTagNameMap>(tag:  T, ...args: HArgs[1][]): HTMLElementTagNameMap[T];
+ *     <N extends Node>                       (node: N, ...args: HArgs[1][]): N;
+ *     (...args: HArgs): Node;
  *   };
  *   (namespaceURI: 'http://www.w3.org/2000/svg'): {
- *     <T extends keyof SVGElementTagNameMap> (tag:  T, ...args: $HArgs[1][]): SVGElementTagNameMap[T];
- *     <N extends Node>                       (node: N, ...args: $HArgs[1][]): N;
- *     (...args: $HArgs): Node;
+ *     <T extends keyof SVGElementTagNameMap> (tag:  T, ...args: HArgs[1][]): SVGElementTagNameMap[T];
+ *     <N extends Node>                       (node: N, ...args: HArgs[1][]): N;
+ *     (...args: HArgs): Node;
  *   };
  * }}
  */
@@ -418,18 +345,18 @@ const _h = (/** @type {string?=} */ namespaceURI) => {
     ? (/** @type {string } */ tag) => document.createElement(tag)
     : (/** @type {string } */ tag) => document.createElementNS(namespaceURI, tag)
 
-  const h = (/** @type {$HArgs[0]} */ tagOrNode, /** @type {$HArgs[1][]} */ ...args) => {
-    const node = $is(String, tagOrNode) ? createElement(tagOrNode) : tagOrNode
+  const h = (/** @type {HArgs[0]} */ tagOrNode, /** @type {HArgs[1][]} */ ...args) => {
+    const node = is(String, tagOrNode) ? createElement(tagOrNode) : tagOrNode
 
     for (const arg of args) {
       let child = null
 
       if (arg instanceof Node) {
         child = arg
-      } else if ($is(String, arg) || $is(Number, arg)) {
+      } else if (is(String, arg) || is(Number, arg)) {
         // @ts-expect-error
         child = new Text(arg)
-      } else if ($is(Array, arg)) {
+      } else if (is(Array, arg)) {
         // @ts-expect-error
         child = h(...arg)
       } else if (arg != null) {
@@ -439,7 +366,7 @@ const _h = (/** @type {string?=} */ namespaceURI) => {
           if (name[0] === '$') {
             const name1 = name.slice(1)
 
-            if ($is(Object, value)) {
+            if (is(Object, value)) {
               // @ts-expect-error
               node[name1] = node[name1] ?? {}
               // @ts-expect-error
@@ -462,7 +389,7 @@ const _h = (/** @type {string?=} */ namespaceURI) => {
                 } else if (value === false) {
                   node.removeAttributeNS(ns, basename)
                 } else {
-                  node.setAttributeNS(ns, basename, $is(String, value) ? value : '' + value)
+                  node.setAttributeNS(ns, basename, is(String, value) ? value : '' + value)
                 }
               }
             } else {
@@ -471,7 +398,7 @@ const _h = (/** @type {string?=} */ namespaceURI) => {
               } else if (value === false) {
                 node.removeAttribute(name)
               } else {
-                node.setAttribute(name, $is(String, value) ? value : '' + value)
+                node.setAttribute(name, is(String, value) ? value : '' + value)
               }
             }
           }
@@ -489,10 +416,10 @@ const _h = (/** @type {string?=} */ namespaceURI) => {
   return h
 }
 
-export const $h = _h()
+export const h = _h()
 
-export const $in = (/** @type {any} */ key, /** @type {any} */ ref) =>
-  ($is(String, key) || $is(Number, key) || $is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key)
+export const has = (/** @type {any} */ key, /** @type {any} */ ref) =>
+  (is(String, key) || is(Number, key) || is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key)
 
 /**
  * @template {abstract new (...args: any[]) => any} T
@@ -509,7 +436,80 @@ export const $in = (/** @type {any} */ key, /** @type {any} */ ref) =>
  *
  * @returns {arg is bigint | boolean | number | string | symbol | undefined | null | InstanceType<T>}
  */
-export const $is = (/** @type {T} */ type, /** @type {any} */ arg) => arg?.constructor === type
+export const is = (/** @type {T} */ type, /** @type {any} */ arg) => arg?.constructor === type
+
+const _jcss = (
+  /** @type {JcssNode} */ node,
+  /** @type {string}   */ prefix,
+  /** @type {string[]} */ result,
+  /** @type {(text: string) => string} */ split
+) => {
+  const /** @type {[JcssNode | string[], string][]} */ queue = [[node, prefix]]
+
+  while (queue.length) {
+    const [style2, prefix2] = queue.shift() ?? []
+
+    if (style2 == null || prefix2 == null) {
+      continue
+    }
+
+    if (is(Array, style2)) {
+      result.push(prefix2, prefix2 !== '' ? '{' : '', style2.join(';'), prefix2 !== '' ? '}' : '')
+    } else {
+      const /** @type {[JcssNode | string[], string][]} */ todo = []
+      let /** @type {string[]} */ attributes = []
+      let attributesPushed = false
+
+      for (const key in style2) {
+        const value = style2[key]
+
+        if (is(String, value) || is(Number, value)) {
+          if (!attributesPushed) {
+            attributesPushed = true
+            attributes = []
+            todo.push([attributes, prefix2])
+          }
+
+          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => '-' + letter.toLowerCase())}:${value}`)
+        } else {
+          attributesPushed = false
+
+          const /** @type {string[]} */ newPrefix = []
+          const keySplitted = key.split(',')
+
+          for (const prefixItem of prefix2.split(',')) {
+            for (const keyItem of keySplitted) {
+              newPrefix.push(prefixItem + keyItem)
+            }
+          }
+
+          todo.push([value, newPrefix.join(',')])
+        }
+      }
+
+      queue.unshift(...todo)
+    }
+  }
+}
+
+export const jcss = (/** @type {JcssRoot} */ root, splitter = '$$') => {
+  const split = (/** @type {string} */ text) => text.split(splitter)[0]
+  const /** @type {string[]} */ result = []
+
+  for (const key in root) {
+    const value = root[key]
+
+    if (key[0] === '@') {
+      result.push(split(key) + '{')
+      _jcss(value, '', result, split)
+      result.push('}')
+    } else {
+      _jcss(value, split(key), result, split)
+    }
+  }
+
+  return result.join('')
+}
 
 const _locale = (
   /** @type {Record<string, Record<string, string | Record<string, string>>>} */ locales,
@@ -520,22 +520,22 @@ const _locale = (
   // @ts-expect-error
   const v = locales?.[language]?.[version]?.[text]
 
-  if ($is(String, v)) {
+  if (is(String, v)) {
     return v
   }
 
   const t = locales?.[language]?.[text]
 
-  return $is(String, t) ? t : text
+  return is(String, t) ? t : text
 }
 
-export const $locale = (
+export const locale = (
   /** @type {Record<string, Record<string, string | Record<string, string>>>} */ locales,
   /** @type {string} */ defaultLanguage,
   languages = navigator.languages
 ) => {
   for (const language of languages) {
-    if ($in(language, locales)) {
+    if (has(language, locales)) {
       // @ts-expect-error
       return _locale.bind(0, locales, language)
     }
@@ -545,12 +545,12 @@ export const $locale = (
   return _locale.bind(0, locales, defaultLanguage)
 }
 
-export const $nanolight = (
+export const nanolight = (
   /** @type {RegExp} */ pattern,
-  /** @type {((chunk: string, index: number) => $HArgs[1])[]} */ highlighters,
+  /** @type {((chunk: string, index: number) => HArgs[1])[]} */ highlighters,
   /** @type {string} */ code
 ) => {
-  const /** @type {$HArgs[1][]} */ result = []
+  const /** @type {HArgs[1][]} */ result = []
 
   code.split(pattern).forEach((chunk, index) => {
     index %= highlighters.length
@@ -563,7 +563,7 @@ export const $nanolight = (
 }
 
 // @ts-expect-error
-export const $nanolightJs = $nanolight.bind(0,
+export const nanolightJs = nanolight.bind(0,
   /('.*?'|".*?"|`[\s\S]*?`)|(\/\/.*?\n|\/\*[\s\S]*?\*\/)|(break|case|catch|const|continue|debugger|default|delete|do|else|eval|export\s+type|export|extends|false|finally|for|from|function|goto|if|import|in|instanceof|is|keyof|let|NaN|new|null|package|return|super|switch|this|throw|true|try|typeof|undefined|var|void|while|with|yield)(?!\w)|([<>=.?:&|!~*/%+-])|(0x[\dabcdef]+|0o[01234567]+|0b[01]+|\d+(?:\.[\d_]+)?(?:e[+-]?[\d_]+)?)|([$\w]+)(?=\()|([$\wąćęłńóśżźĄĆĘŁŃÓŚŻŹ]+)/,
   [
     chunk => chunk, // no match
@@ -577,7 +577,7 @@ export const $nanolightJs = $nanolight.bind(0,
   ]
 )
 
-export const $plUral = (
+export const plUral = (
   /** @type {string} */ singular,
   /** @type {string} */ plural2,
   /** @type {string} */ plural5,
@@ -595,9 +595,9 @@ export const $plUral = (
         : plural5
 }
 
-export const $s = _h('http://www.w3.org/2000/svg')
+export const s = _h('http://www.w3.org/2000/svg')
 
-export const $set = (
+export const set = (
   /** @type {any} */ value,
   /** @type {any} */ ref,
   /** @type {(string | number | symbol)[]} */ ...keys
@@ -611,8 +611,8 @@ export const $set = (
   for (let k = 0; k < last; ++k) {
     const key = keys[k]
 
-    if (!$in(key, ref)) {
-      ref[key] = $is(Number, keys[k + 1]) ? [] : {}
+    if (!has(key, ref)) {
+      ref[key] = is(Number, keys[k + 1]) ? [] : {}
     }
 
     ref = ref[key]
@@ -624,7 +624,7 @@ export const $set = (
 const _ZEROS = '0'.repeat(16)
 let _counter = 0
 
-export const $uuid1 = ({
+export const uuid1 = ({
   date = new Date(),
   node = Math.random().toString(16).slice(2)
 } = {}) => {

package/package.json

@@ -9,14 +9,17 @@
     "CSS-in-JS",
     "deepEqual",
     "DOM",
+    "eq",
     "equal",
     "escape",
+    "gantt",
     "graph",
     "h",
     "highlight",
     "HyperScript",
     "in",
     "is",
+    "jcss",
     "locale",
     "localization",
     "nanolight",
@@ -33,5 +36,5 @@
   "types": "nnn.d.ts",
   "name": "@jackens/nnn",
   "type": "module",
-  "version": "2023.8.20"
+  "version": "2023.8.26"
 }