feat(hiccup-css): update fn handling, add iterator support, units, co…

…mment - update fn exec rules (now only head pos vs. other pos in array) - add comment() fn - add Format.comments flag - update COMPACT preset to omit comments - add unit format wrappers - rename attribIncl() => attribContains() - rename attribContains() => attribMatches()
thi-ng · Mar 4, 2018 · 428de3c · 428de3c
1 parent 6de6b27
commit 428de3c
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 22 deletions.
diff --git a/packages/hiccup-css/src/api.ts b/packages/hiccup-css/src/api.ts
@@ -8,6 +8,7 @@ export interface Format {
     declStart: string;
     declEnd: string;
     indent: string;
+    comments: boolean;
 }
 
 export interface CSSOpts {
@@ -25,5 +26,24 @@ export const DEFAULT_VENDORS = [
     "-webkit-"
 ];
 
-export const COMPACT: Format = { rules: "", ruleSep: ",", valSep: "", decls: "", declStart: "{", declEnd: "}", indent: "" };
-export const PRETTY: Format = { rules: "\n", ruleSep: ", ", valSep: " ", decls: "\n", declStart: " {\n", declEnd: "}\n", indent: "    " };
+export const COMPACT: Format = {
+    rules: "",
+    ruleSep: ",",
+    valSep: "",
+    decls: "",
+    declStart: "{",
+    declEnd: "}",
+    indent: "",
+    comments: false,
+};
+
+export const PRETTY: Format = {
+    rules: "\n",
+    ruleSep: ", ",
+    valSep: " ",
+    decls: "\n",
+    declStart: " {\n",
+    declEnd: "}\n",
+    indent: "    ",
+    comments: true,
+};
diff --git a/packages/hiccup-css/src/attribs.ts b/packages/hiccup-css/src/attribs.ts
@@ -1,7 +1,7 @@
 const $ = (op) => (id: string, x: string | number, caseSensitve = false) => `[${id}${op}="${x}"${caseSensitve ? " i" : ""}]`;
 export const withAttrib = (id: string) => `[${id}]`;
 export const attribEq = $("");
-export const attribIncl = $("~");
+export const attribContains = $("~");
 export const attribPrefix = $("^");
 export const attribSuffix = $("$");
-export const attribContains = $("*");
+export const attribMatches = $("*");
diff --git a/packages/hiccup-css/src/comment.ts b/packages/hiccup-css/src/comment.ts
@@ -0,0 +1,6 @@
+export function comment(body: string, force = false) {
+    return (acc, opts) =>
+        (opts.format.comments || force ?
+            (Array.prototype.push.apply(acc, ["/* ", body, " */"]), acc) :
+            acc);
+}
diff --git a/packages/hiccup-css/src/css.ts b/packages/hiccup-css/src/css.ts
@@ -1,6 +1,8 @@
 import { isArray } from "@thi.ng/checks/is-array";
 import { isFunction } from "@thi.ng/checks/is-function";
+import { isIterable } from "@thi.ng/checks/is-iterable";
 import { isPlainObject } from "@thi.ng/checks/is-plain-object";
+import { isString } from "@thi.ng/checks/is-string";
 import { transduce } from "@thi.ng/transducers/transduce";
 import { permutations } from "@thi.ng/transducers/iter/permutations";
 import { str } from "@thi.ng/transducers/rfn/str";
@@ -10,7 +12,7 @@ import { map } from "@thi.ng/transducers/xform/map";
 import { CSSOpts, COMPACT, DEFAULT_VENDORS } from "./api";
 import { indent } from "./utils";
 
-const NO_SPACES = ".:[";
+const NO_SPACES = ":[";
 
 const xfSel = ((a, b) => (x) => a(b(x)))(
     flatten(),
@@ -48,15 +50,17 @@ export function _css(acc: string[], parent: any[], rules: any[], opts: CSSOpts)
         const r = rules[i];
         if (isArray(r)) {
             _css(acc, makeSelector(parent, sel), r, opts);
+        } else if (isIterable(r) && !isString(r)) {
+            _css(acc, makeSelector(parent, sel), [...r], opts);
         } else if ((isFn = isFunction(r)) || opts.fns[r]) {
-            if (parent.length === 0) {
+            if (i === 0) {
                 return opts.fns[r] ?
                     opts.fns[r].apply(null, rules.slice(i + 1))(acc, opts) :
                     r(acc, opts);
             } else if (isFn) {
                 sel.push(r());
             } else {
-                throw new Error(`quoted fn ('${r}') only allowed @ root level`);
+                throw new Error(`quoted fn ('${r}') only allowed at head position`);
             }
         } else if (isPlainObject(r)) {
             curr = Object.assign(curr || {}, r);
@@ -103,14 +107,16 @@ function makeSelector(parent: any[], curr: any[]) {
 function formatRule(parent: any[], sel: any[], curr: any, opts: CSSOpts) {
     const f = opts.format;
     const space = indent(opts);
-    return space
-        + transduce(
+    return [
+        space,
+        transduce(
             map((sel: any[]) => transduce(xfSel, str(), isArray(sel) ? sel : [sel]).trim()),
             str(f.ruleSep),
-            makeSelector(parent, sel))
-        + f.declStart
-        + formatDecls(curr, opts)
-        + space
-        + f.declEnd;
+            makeSelector(parent, sel)),
+        f.declStart,
+        formatDecls(curr, opts),
+        space,
+        f.declEnd
+    ].join("");
 }
 
diff --git a/packages/hiccup-css/src/import.ts b/packages/hiccup-css/src/import.ts
@@ -1,4 +1,6 @@
-export function at_import(url: string, ...queries: string[]) {
+import { RuleFn } from "./api";
+
+export function at_import(url: string, ...queries: string[]): RuleFn {
     return (acc, _) => (
         acc.push(
             queries.length ?

diff --git a/packages/hiccup-css/src/index.ts b/packages/hiccup-css/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./api";
 export * from "./attribs";
+export * from "./comment";
 export * from "./conditional";
 export * from "./css";
 export * from "./import";
@@ -8,3 +9,4 @@ export * from "./media";
 export * from "./namespace";
 export * from "./quoted-functions";
 export * from "./supports";
+export * from "./units";
diff --git a/packages/hiccup-css/src/keyframes.ts b/packages/hiccup-css/src/keyframes.ts
@@ -1,10 +1,51 @@
-import { CSSOpts } from "./api";
+import { CSSOpts, RuleFn } from "./api";
 import { formatDecls } from "./css";
 import { indent } from "./utils";
 
-export function at_keyframes(id: string, stops: any);
-export function at_keyframes(id: string, from: any, to: any);
-export function at_keyframes(id: string, ...args: any[]) {
+/**
+ * Rule function for `@keyframes`. If a single declaration object is given,
+ * it's keys are used as keyframe stops and their values as their declarations
+ * objects. This way any number of stops can be specified.
+ *
+ * ```
+ * css(at_keyframes("fadein", {"0%": {opacity: 0}, "100%": {opacity: 1}}))
+ * // @keyframes fadein {
+ * //
+ * //     0% {
+ * //         opacity: 0;
+ * //     }
+ * //
+ * //     100% {
+ * //         opacity: 1;
+ * //     }
+ * //
+ * // }
+ * ```
+ *
+ * If called with two objects, the first one provides the declarations for the
+ * `from` keyframe and the 2nd for the `to` keyframe.
+ *
+ * ```
+ * css(at_keyframes("fadein", {opacity: 0}, {opacity: 1}));
+ * // @keyframes fadein {
+ * //
+ * //     from {
+ * //         opacity: 0;
+ * //     }
+ * //
+ * //     to {
+ * //         opacity: 1;
+ * //     }
+ * //
+ * // }
+ * ```
+ *
+ * @param id
+ * @param stops
+ */
+export function at_keyframes(id: string, stops: any): RuleFn;
+export function at_keyframes(id: string, from: any, to: any): RuleFn;
+export function at_keyframes(id: string, ...args: any[]): RuleFn {
     const stops = args.length === 1 ? args[0] : { from: args[0], to: args[1] };
     return (acc: string[], opts: CSSOpts) => {
         const outer = indent(opts);

diff --git a/packages/hiccup-css/src/namespace.ts b/packages/hiccup-css/src/namespace.ts
@@ -1,6 +1,8 @@
-export function at_namespace(url: string);
-export function at_namespace(prefix: string, url: string);
-export function at_namespace(...args: string[]) {
+import { RuleFn } from "./api";
+
+export function at_namespace(url: string): RuleFn;
+export function at_namespace(prefix: string, url: string): RuleFn;
+export function at_namespace(...args: string[]): RuleFn {
     return (acc, _) => (
         acc.push(
             args.length > 1 ?

diff --git a/packages/hiccup-css/src/quoted-functions.ts b/packages/hiccup-css/src/quoted-functions.ts
@@ -1,10 +1,12 @@
+import { comment } from "./comment";
 import { at_import } from "./import";
 import { at_keyframes } from "./keyframes";
 import { at_media } from "./media";
 import { at_namespace } from "./namespace";
 import { at_supports } from "./supports";
 
 export const QUOTED_FNS = {
+    "@comment": comment,
     "@import": at_import,
     "@keyframes": at_keyframes,
     "@media": at_media,

diff --git a/packages/hiccup-css/src/units.ts b/packages/hiccup-css/src/units.ts
@@ -0,0 +1,12 @@
+export const em = (x: number) => `${x}em`;
+export const ex = (x: number) => `${x}ex`;
+export const rem = (x: number) => `${x}rem`;
+export const perc = (x: number) => `${x}%`;
+export const px = (x: number) => `${x}px`;
+export const vh = (x: number) => `${x}vh`;
+export const vw = (x: number) => `${x}vw`;
+
+export const ms = (x: number) => `${x}ms`;
+export const sec = (x: number) => `${x}s`;
+
+export const deg = (x: number) => `${x}deg`;