@jackens/nnn 2024.3.2 → 2024.3.3

package/nnn.d.ts

@@ -1,28 +1,3 @@
-/**
- * The type of arguments of the `c` helper.
- */
-export type CNode = {
-    [attributeOrSelector: string]: string | number | CNode | undefined;
-};
-
-/**
- * The type of arguments of the `c` helper.
- */
-export type CRoot = Partial<Record<PropertyKey, CNode>>;
-
-/**
- * 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 declare const c: (root: CRoot, splitter?: string) => string;
-
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
  *
@@ -151,6 +126,31 @@ export declare const is: {
     <T extends abstract new (...args: any[]) => any>(type: T, arg: any): arg is InstanceType<T>;
 };
 
+/**
+ * The type of arguments of the `jc` helper.
+ */
+export type JcNode = {
+    [attributeOrSelector: string]: string | number | JcNode | undefined;
+};
+
+/**
+ * The type of arguments of the `jc` helper.
+ */
+export type JcRoot = Partial<Record<PropertyKey, JcNode>>;
+
+/**
+ * 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 declare const jc: (root: JcRoot, splitter?: string) => string;
+
 /**
  * `JSON.parse` with “JavaScript turned on”.
  *

package/nnn.js

@@ -1,59 +1,6 @@
 // src/nnn/is.ts
 var is = (type, arg) => arg?.constructor === type;
 
-// src/nnn/c.ts
-var _c = (node, prefix, result, split) => {
-  const queue = [[node, prefix]];
-  while (queue.length > 0) {
-    const [style0, prefix0] = queue.shift() ?? [];
-    if (style0 == null || prefix0 == null) {
-      continue;
-    }
-    if (is(Array, style0)) {
-      result.push(prefix0, prefix0 !== "" ? "{" : "", style0.join(";"), prefix0 !== "" ? "}" : "");
-    } else {
-      const todo = [];
-      let attributes = [];
-      let attributesPushed = false;
-      for (const key in style0) {
-        const value = style0[key];
-        if (is(String, value) || is(Number, value)) {
-          if (!attributesPushed) {
-            attributesPushed = true;
-            attributes = [];
-            todo.push([attributes, prefix0]);
-          }
-          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => "-" + letter.toLowerCase())}:${value}`);
-        } else if (value != null) {
-          attributesPushed = false;
-          const prefixN = [];
-          const keyChunks = key.split(",");
-          prefix0.split(",").forEach((prefixChunk) => keyChunks.forEach((keyChunk) => prefixN.push(prefixChunk + keyChunk)));
-          todo.push([value, prefixN.join(",")]);
-        }
-      }
-      queue.unshift(...todo);
-    }
-  }
-};
-var c = (root, splitter = "$$") => {
-  const split = (text) => text.split(splitter)[0];
-  const chunks = [];
-  for (const key in root) {
-    const value = root[key];
-    if (value != null) {
-      if (key[0] === "@") {
-        chunks.push(split(key) + "{");
-        _c(value, "", chunks, split);
-        chunks.push("}");
-      } else {
-        _c(value, split(key), chunks, split);
-      }
-    }
-  }
-  return chunks.join("");
-};
-
 // src/nnn/h.ts
 var NS = {
   xlink: "http://www.w3.org/1999/xlink"
@@ -141,9 +88,9 @@ var chartable = ({
   const zxValues = [];
   const xLabels = [];
   const zLabels = [];
-  table.querySelectorAll("tr").forEach((row, r) => row.querySelectorAll("td,th").forEach((col, c2) => {
+  table.querySelectorAll("tr").forEach((row, r) => row.querySelectorAll("td,th").forEach((col, c) => {
     const x = r - 1;
-    const z = c2 - +headerColumn;
+    const z = c - +headerColumn;
     const value = col.innerText;
     if (x >= 0 && z >= 0) {
       zxValues[z] = zxValues[z] ?? [];
@@ -303,6 +250,59 @@ var fixTypography = (node) => {
 // src/nnn/has.ts
 var has = (key, ref) => (is(String, key) || is(Number, key) || is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key);
 
+// src/nnn/jc.ts
+var _jc = (node, prefix, result, split) => {
+  const queue = [[node, prefix]];
+  while (queue.length > 0) {
+    const [style0, prefix0] = queue.shift() ?? [];
+    if (style0 == null || prefix0 == null) {
+      continue;
+    }
+    if (is(Array, style0)) {
+      result.push(prefix0, prefix0 !== "" ? "{" : "", style0.join(";"), prefix0 !== "" ? "}" : "");
+    } else {
+      const todo = [];
+      let attributes = [];
+      let attributesPushed = false;
+      for (const key in style0) {
+        const value = style0[key];
+        if (is(String, value) || is(Number, value)) {
+          if (!attributesPushed) {
+            attributesPushed = true;
+            attributes = [];
+            todo.push([attributes, prefix0]);
+          }
+          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => "-" + letter.toLowerCase())}:${value}`);
+        } else if (value != null) {
+          attributesPushed = false;
+          const prefixN = [];
+          const keyChunks = key.split(",");
+          prefix0.split(",").forEach((prefixChunk) => keyChunks.forEach((keyChunk) => prefixN.push(prefixChunk + keyChunk)));
+          todo.push([value, prefixN.join(",")]);
+        }
+      }
+      queue.unshift(...todo);
+    }
+  }
+};
+var jc = (root, splitter = "$$") => {
+  const split = (text) => text.split(splitter)[0];
+  const chunks = [];
+  for (const key in root) {
+    const value = root[key];
+    if (value != null) {
+      if (key[0] === "@") {
+        chunks.push(split(key) + "{");
+        _jc(value, "", chunks, split);
+        chunks.push("}");
+      } else {
+        _jc(value, split(key), chunks, split);
+      }
+    }
+  }
+  return chunks.join("");
+};
+
 // src/nnn/jsOnParse.ts
 var jsOnParse = (handlers, text) => JSON.parse(text, (key, value) => {
   if (is(Object, value)) {
@@ -408,6 +408,7 @@ export {
   nanolight,
   locale,
   jsOnParse,
+  jc,
   is,
   has,
   h,
@@ -415,6 +416,5 @@ export {
   escapeValues,
   escape,
   eq,
-  chartable,
-  c
+  chartable
 };

package/package.json

@@ -20,7 +20,8 @@
     "HyperScript",
     "in",
     "is",
-    "jcss",
+    "jc",
+    "JS-to-CSS",
     "JSON",
     "jsOnParse",
     "locale",
@@ -42,5 +43,5 @@
   "types": "nnn.d.ts",
   "name": "@jackens/nnn",
   "type": "module",
-  "version": "2024.3.2"
+  "version": "2024.3.3"
 }

package/readme.md

@@ -2,15 +2,15 @@
 
 Jackens’ JavaScript helpers.
 
-<sub>Version: <code class="version">2024.3.2</code></sub>
+<sub>Version: <code class="version">2024.3.3</code></sub>
 
 ## Examples
 
-- [Chartable Demo](/nnn/chartable/)
-- [Chessboard Demo](/nnn/chessboard/)
-- [Documentation](/nnn/doc/)
-- [Gant Chart Demo](/nnn/gantt/)
-- [Responsive Web Design Demo](/nnn/rwd/)
+- [Chartable Demo](https://jackens.github.io/nnn/chartable/)
+- [Chessboard Demo](https://jackens.github.io/nnn/chessboard/)
+- [Documentation](https://jackens.github.io/nnn/doc/)
+- [Gant Chart Demo](https://jackens.github.io/nnn/gantt/)
+- [Responsive Web Design Demo](https://jackens.github.io/nnn/rwd/)
 
 ## Installation
 
@@ -40,12 +40,11 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 
 ## Exports
 
-- `CNode`: The type of arguments of the `c` helper.
-- `CRoot`: The type of arguments of the `c` helper.
 - `EscapeMap`: The type of arguments of the `escapeValues` and `escape` helpers.
 - `HArgs`: The type of arguments of the `h` and `s` helpers.
 - `HArgs1`: The type of arguments of the `h` and `s` helpers.
-- `c`: A simple CSS-in-JS helper.
+- `JcNode`: The type of arguments of the `jc` helper.
+- `JcRoot`: The type of arguments of the `jc` helper.
 - `chartable`: A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
 - `eq`: A helper that checks equality of the given arguments.
 - `escape`: A generic helper for escaping `values` by given `escapeMap` (in *TemplateStrings* flavor).
@@ -54,6 +53,7 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `h`: A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `s`).
 - `has`: A replacement for the `in` operator (not to be confused with the `for-in` loop) that works properly.
 - `is`: A helper that checks if the given argument is of a certain type.
+- `jc`: A simple CSS-in-JS helper.
 - `jsOnParse`: `JSON.parse` with “JavaScript turned on”.
 - `locale`: Language translations helper.
 - `nanolight`: A generic helper for syntax highlighting (see also `nanolightJs`).
@@ -66,24 +66,6 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `s`: A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `h`).
 - `uuid1`: A helper that generates a UUID v1 identifier (with a creation timestamp).
 
-### CNode
-
-```ts
-type CNode = {
-    [attributeOrSelector: string]: string | number | CNode | undefined;
-};
-```
-
-The type of arguments of the `c` helper.
-
-### CRoot
-
-```ts
-type CRoot = Partial<Record<PropertyKey, CNode>>;
-```
-
-The type of arguments of the `c` helper.
-
 ### EscapeMap
 
 ```ts
@@ -108,217 +90,23 @@ type HArgs1 = Partial<Record<PropertyKey, any>> | null | undefined | Node | stri
 
 The type of arguments of the `h` and `s` helpers.
 
-### c
+### JcNode
 
 ```ts
-const c: (root: CRoot, splitter?: string) => string;
-```
-
-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.
-
-#### Usage Examples
-
-```js
-const actual = c({
-  a: {
-    color: 'red',
-    margin: 1,
-    '.c': { margin: 2, padding: 2 },
-    padding: 1
-  }
-})
-
-const expected = `
-a{
-  color:red;
-  margin:1
-}
-a.c{
-  margin:2;
-  padding:2
-}
-a{
-  padding:1
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
-```js
-const actual = c({
-  a: {
-    '.b': {
-      color: 'red',
-      margin: 1,
-      '.c': { margin: 2, padding: 2 },
-      padding: 1
-    }
-  }
-})
-
-const expected = `
-a.b{
-  color:red;
-  margin:1
-}
-a.b.c{
-  margin:2;
-  padding:2
-}
-a.b{
-  padding:1
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
-```js
-const actual = c({
-  '@font-face$$1': {
-    fontFamily: 'Jackens',
-    src$$1: 'url(otf/jackens.otf)',
-    src$$2: "url(otf/jackens.otf) format('opentype')," +
-      "url(svg/jackens.svg) format('svg')",
-    fontWeight: 'normal',
-    fontStyle: 'normal'
-  },
-  '@font-face$$2': {
-    fontFamily: 'C64',
-    src: 'url(fonts/C64_Pro_Mono-STYLE.woff)'
-  },
-  '@keyframes spin': {
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' }
-  },
-  div: {
-    border: 'solid red 1px',
-    '.c1': { 'background-color': '#000' },
-    ' .c1': { backgroundColor: 'black' },
-    '.c2': { backgroundColor: 'rgb(0,0,0)' }
-  },
-  '@media(min-width:200px)': {
-    div: { margin: 0, padding: 0 },
-    span: { color: '#000' }
-  }
-})
-
-const expected = `
-@font-face{
-  font-family:Jackens;
-  src:url(otf/jackens.otf);
-  src:url(otf/jackens.otf) format('opentype'),url(svg/jackens.svg) format('svg');
-  font-weight:normal;
-  font-style:normal
-}
-@font-face{
-  font-family:C64;
-  src:url(fonts/C64_Pro_Mono-STYLE.woff)
-}
-@keyframes spin{
-  0%{
-    transform:rotate(0deg)
-  }
-  100%{
-    transform:rotate(360deg)
-  }
-}
-div{
-  border:solid red 1px
-}
-div.c1{
-  background-color:#000
-}
-div .c1{
-  background-color:black
-}
-div.c2{
-  background-color:rgb(0,0,0)
-}
-@media(min-width:200px){
-  div{
-    margin:0;
-    padding:0
-  }
-  span{
-    color:#000
-  }
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
-```js
-const actual = c({
-  a: {
-    '.b,.c': {
-      margin: 1,
-      '.d': {
-        margin: 2
-      }
-    }
-  }
-})
-
-const expected = `
-a.b,a.c{
-  margin:1
-}
-a.b.d,a.c.d{
-  margin:2
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
+type JcNode = {
+    [attributeOrSelector: string]: string | number | JcNode | undefined;
+};
 ```
 
-```js
-const actual = c({
-  '.b,.c': {
-    margin: 1,
-    '.d': {
-      margin: 2
-    }
-  }
-})
+The type of arguments of the `jc` helper.
 
-const expected = `
-.b,.c{
-  margin:1
-}
-.b.d,.c.d{
-  margin:2
-}`.replace(/\n\s*/g, '')
+### JcRoot
 
-expect(actual).toStrictEqual(expected)
+```ts
+type JcRoot = Partial<Record<PropertyKey, JcNode>>;
 ```
 
-```js
-const actual = c({
-  '.a,.b': {
-    margin: 1,
-    '.c,.d': {
-      margin: 2
-    }
-  }
-})
-
-const expected = `
-.a,.b{
-  margin:1
-}
-.a.c,.a.d,.b.c,.b.d{
-  margin:2
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
+The type of arguments of the `jc` helper.
 
 ### chartable
 
@@ -665,6 +453,218 @@ try {
 expect(is(Number, num)).toBeTrue()
 ```
 
+### jc
+
+```ts
+const jc: (root: JcRoot, splitter?: string) => string;
+```
+
+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.
+
+#### Usage Examples
+
+```js
+const actual = jc({
+  a: {
+    color: 'red',
+    margin: 1,
+    '.c': { margin: 2, padding: 2 },
+    padding: 1
+  }
+})
+
+const expected = `
+a{
+  color:red;
+  margin:1
+}
+a.c{
+  margin:2;
+  padding:2
+}
+a{
+  padding:1
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = jc({
+  a: {
+    '.b': {
+      color: 'red',
+      margin: 1,
+      '.c': { margin: 2, padding: 2 },
+      padding: 1
+    }
+  }
+})
+
+const expected = `
+a.b{
+  color:red;
+  margin:1
+}
+a.b.c{
+  margin:2;
+  padding:2
+}
+a.b{
+  padding:1
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = jc({
+  '@font-face$$1': {
+    fontFamily: 'Jackens',
+    src$$1: 'url(otf/jackens.otf)',
+    src$$2: "url(otf/jackens.otf) format('opentype')," +
+      "url(svg/jackens.svg) format('svg')",
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  },
+  '@font-face$$2': {
+    fontFamily: 'C64',
+    src: 'url(fonts/C64_Pro_Mono-STYLE.woff)'
+  },
+  '@keyframes spin': {
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' }
+  },
+  div: {
+    border: 'solid red 1px',
+    '.c1': { 'background-color': '#000' },
+    ' .c1': { backgroundColor: 'black' },
+    '.c2': { backgroundColor: 'rgb(0,0,0)' }
+  },
+  '@media(min-width:200px)': {
+    div: { margin: 0, padding: 0 },
+    span: { color: '#000' }
+  }
+})
+
+const expected = `
+@font-face{
+  font-family:Jackens;
+  src:url(otf/jackens.otf);
+  src:url(otf/jackens.otf) format('opentype'),url(svg/jackens.svg) format('svg');
+  font-weight:normal;
+  font-style:normal
+}
+@font-face{
+  font-family:C64;
+  src:url(fonts/C64_Pro_Mono-STYLE.woff)
+}
+@keyframes spin{
+  0%{
+    transform:rotate(0deg)
+  }
+  100%{
+    transform:rotate(360deg)
+  }
+}
+div{
+  border:solid red 1px
+}
+div.c1{
+  background-color:#000
+}
+div .c1{
+  background-color:black
+}
+div.c2{
+  background-color:rgb(0,0,0)
+}
+@media(min-width:200px){
+  div{
+    margin:0;
+    padding:0
+  }
+  span{
+    color:#000
+  }
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = jc({
+  a: {
+    '.b,.c': {
+      margin: 1,
+      '.d': {
+        margin: 2
+      }
+    }
+  }
+})
+
+const expected = `
+a.b,a.c{
+  margin:1
+}
+a.b.d,a.c.d{
+  margin:2
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = jc({
+  '.b,.c': {
+    margin: 1,
+    '.d': {
+      margin: 2
+    }
+  }
+})
+
+const expected = `
+.b,.c{
+  margin:1
+}
+.b.d,.c.d{
+  margin:2
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = jc({
+  '.a,.b': {
+    margin: 1,
+    '.c,.d': {
+      margin: 2
+    }
+  }
+})
+
+const expected = `
+.a,.b{
+  margin:1
+}
+.a.c,.a.d,.b.c,.b.d{
+  margin:2
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
 ### jsOnParse
 
 ```ts
@@ -783,8 +783,15 @@ A helper for highlighting JavaScript.
 ```js
 const codeJs = 'const answerToLifeTheUniverseAndEverything = 42'
 
-expect(h('pre', ['code', ...nanolightJs(codeJs)]).outerHTML).toStrictEqual(
-  '<pre><code><span class="keyword">const</span> <span class="literal">answerToLifeTheUniverseAndEverything</span> <span class="operator">=</span> <span class="number">42</span></code></pre>')
+expect(nanolightJs(codeJs)).toStrictEqual([
+  ['span', { class: 'keyword' }, 'const'],
+  ' ',
+  ['span', { class: 'literal' }, 'answerToLifeTheUniverseAndEverything'],
+  ' ',
+  ['span', { class: 'operator' }, '='],
+  ' ',
+  ['span', { class: 'number' }, '42']
+])
 ```
 
 ### omit