feat(hiccup-css): update conditional handling, add formatCond()

thi-ng · Mar 4, 2018 · 57533c7 · 57533c7
1 parent 428de3c
commit 57533c7
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/packages/hiccup-css/src/api.ts b/packages/hiccup-css/src/api.ts
@@ -1,5 +1,9 @@
+import { IObjectOf } from "@thi.ng/api/api";
+
 export type RuleFn = (acc: string[], opts: CSSOpts) => string[];
 
+export type Conditional = string | IObjectOf<boolean | number | string>;
+
 export interface Format {
     rules: string;
     ruleSep: string;

diff --git a/packages/hiccup-css/src/conditional.ts b/packages/hiccup-css/src/conditional.ts
@@ -1,15 +1,39 @@
-import { CSSOpts, RuleFn } from "./api";
+import { isString } from "@thi.ng/checks/is-string";
+import { Conditional, CSSOpts, RuleFn } from "./api";
 import { _css } from "./css";
 import { indent } from "./utils";
 
-export function conditional(type: string, cond: string, rules: any[]): RuleFn {
+export function conditional(type: string, cond: Conditional, rules: any[]): RuleFn {
     return (acc: string[], opts: CSSOpts) => {
         const space = indent(opts);
-        acc.push(`${space}${type}(${cond})${opts.format.declStart}`);
+        acc.push(`${space}${type} ${formatCond(cond)}${opts.format.declStart}`);
         opts.depth++;
         _css(acc, [], rules, opts);
         opts.depth--;
         acc.push(space + opts.format.declEnd);
         return acc;
     };
 }
+
+function formatCond(cond: any) {
+    if (isString(cond)) {
+        return cond;
+    }
+    const acc = [];
+    for (let c in cond) {
+        if (cond.hasOwnProperty(c)) {
+            let v = cond[c];
+            if (v === true) {
+                v = c;
+            } else if (v === false) {
+                v = "not " + c;
+            } else if (v === "only") {
+                v += " " + c;
+            } else {
+                v = `(${c}:${v})`;
+            }
+            acc.push(v);
+        }
+    }
+    return acc.join(" and ");
+}
diff --git a/packages/hiccup-css/src/media.ts b/packages/hiccup-css/src/media.ts
@@ -1,6 +1,6 @@
-import { RuleFn } from "./api";
+import { RuleFn, Conditional } from "./api";
 import { conditional } from "./conditional";
 
-export function at_media(cond, rules: any[]): RuleFn {
+export function at_media(cond: Conditional, rules: any[]): RuleFn {
     return conditional("@media", cond, rules);
 }
diff --git a/packages/hiccup-css/src/supports.ts b/packages/hiccup-css/src/supports.ts
@@ -1,6 +1,6 @@
-import { RuleFn } from "./api";
+import { RuleFn, Conditional } from "./api";
 import { conditional } from "./conditional";
 
-export function at_supports(cond, rules: any[]): RuleFn {
+export function at_supports(cond: Conditional, rules: any[]): RuleFn {
     return conditional("@supports", cond, rules);
 }