@jackens/nnn 2023.8.25 → 2023.8.26

package/nnn.d.ts

@@ -1,15 +1,3 @@
-/**
- * The type of arguments of the `css` helper.
- */
-export type CNode = {
-  [attributeOrSelector: string]: string | number | CNode;
-};
-
-/**
- * The type of arguments of the `css` helper.
- */
-export type CRoot = Record<string, CNode>;
-
 /**
  * The type of arguments of the `escapeValues` and `escape` helpers.
  */
@@ -24,17 +12,16 @@ export type HArgs = [
 ];
 
 /**
- * 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 css(root: CRoot, splitter?: string): string;
+export type JcssNode = {
+  [attributeOrSelector: string]: string | number | JcssNode;
+};
+
+/**
+ * The type of arguments of the `jcss` helper.
+ */
+export type JcssRoot = Record<string, JcssNode>;
 
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
@@ -136,6 +123,19 @@ 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.
  */

package/nnn.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {Map<any, (value?: any) => string>} EscapeMap
+ */
+
 /**
  * @typedef {[
  *   string | Node,
@@ -7,91 +11,14 @@
 
 /**
  * @typedef {{
- *   [attributeOrSelector: string]: string | number | CNode;
- * }} CNode
+ *   [attributeOrSelector: string]: string | number | JcssNode;
+ * }} JcssNode
  */
 
 /**
- * @typedef {Record<string, CNode>} CRoot
+ * @typedef {Record<string, JcssNode>} JcssRoot
  */
 
-/**
- * @typedef {Map<any, (value?: any) => string>} EscapeMap
- */
-
-const _css = (
-  /** @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 css = (/** @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) + '{')
-      _css(value, '', result, split)
-      result.push('}')
-    } else {
-      _css(value, split(key), result, split)
-    }
-  }
-
-  return result.join('')
-}
-
 const _COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
 
 /**
@@ -511,6 +438,79 @@ export const has = (/** @type {any} */ key, /** @type {any} */ ref) =>
  */
 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,
   /** @type {string} */ language,

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.25"
+  "version": "2023.8.26"
 }