@thi.ng/hiccup-css 2.2.18 → 2.2.20

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-03T12:13:31Z
+- **Last updated**: 2023-12-11T10:07:09Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/animation.js

@@ -1,53 +1,21 @@
 import { at_keyframes } from "./keyframes.js";
-/**
- * Defines new `@keyframes` with given `id` and creates related class of
- * same name to configure given animation `opts`. Only the `duration`
- * option is given a default value (250ms), all others are optional.
- *
- * @example
- * ```ts
- * css(
- *   animation(
- *     "fadein",
- *     { delay: "0.5s" },
- *     { opacity: 0 },
- *     { opacity: 1 }
- *   )
- * );
- * ```
- *
- * ```css
- * @keyframes fadein {
- *     0% {
- *         opacity: 0;
- *     }
- *     100% {
- *         opacity: 1;
- *     }
- * }
- *
- * .fadein {
- *     animation-duration: 250ms;
- *     animation-name: fadein;
- *     animation-delay: 0.5s;
- * }
- * ```
- *
- * @param id - animation name
- * @param opts - animation config options
- * @param keyframes - keyframes
- */
-export const animation = (id, opts, ...keyframes) => {
-    opts = {
-        duration: "250ms",
-        name: id,
-        ...opts,
-    };
-    return [
-        at_keyframes.apply(null, [id, ...keyframes]),
-        [
-            `.${id}`,
-            Object.keys(opts).reduce((acc, k) => ((acc[`animation-${k}`] = opts[k]), acc), {}),
-        ],
-    ];
+const animation = (id, opts, ...keyframes) => {
+  opts = {
+    duration: "250ms",
+    name: id,
+    ...opts
+  };
+  return [
+    at_keyframes.apply(null, [id, ...keyframes]),
+    [
+      `.${id}`,
+      Object.keys(opts).reduce(
+        (acc, k) => (acc[`animation-${k}`] = opts[k], acc),
+        {}
+      )
+    ]
+  ];
+};
+export {
+  animation
 };

package/api.js

@@ -1,30 +1,26 @@
-export const DEFAULT_VENDORS = ["-moz-", "-ms-", "-o-", "-webkit-"];
-/**
- * Default format config used by {@link css} function.
- * Forms "minimized" CSS without obsolete white space
- * and omits comments unless they were forced.
- */
-export const COMPACT = {
-    rules: "",
-    ruleSep: ",",
-    valSep: "",
-    decls: "",
-    declStart: "{",
-    declEnd: "}",
-    indent: "",
-    comments: false,
+const DEFAULT_VENDORS = ["-moz-", "-ms-", "-o-", "-webkit-"];
+const COMPACT = {
+  rules: "",
+  ruleSep: ",",
+  valSep: "",
+  decls: "",
+  declStart: "{",
+  declEnd: "}",
+  indent: "",
+  comments: false
 };
-/**
- * Pretty printing format config with line breaks
- * and indentation.
- */
-export const PRETTY = {
-    rules: "\n",
-    ruleSep: ", ",
-    valSep: " ",
-    decls: "\n",
-    declStart: " {\n",
-    declEnd: "}\n",
-    indent: "    ",
-    comments: true,
+const PRETTY = {
+  rules: "\n",
+  ruleSep: ", ",
+  valSep: " ",
+  decls: "\n",
+  declStart: " {\n",
+  declEnd: "}\n",
+  indent: "    ",
+  comments: true
+};
+export {
+  COMPACT,
+  DEFAULT_VENDORS,
+  PRETTY
 };

package/attribs.js

@@ -1,46 +1,15 @@
 const $ = (op) => (id, x, caseSensitve = false) => `[${id}${op}="${x}"${caseSensitve ? " i" : ""}]`;
-/**
- * Returns attrib selector: `[id]`
- *
- * @param id -
- */
-export const withAttrib = (id) => `[${id}]`;
-/**
- * Returns attrib selector `[id=x]`
- *
- * @param id -
- * @param x -
- * @param caseSensitive -
- */
-export const attribEq = $("");
-/**
- * Returns attrib selector `[id~=x]`
- *
- * @param id -
- * @param x -
- * @param caseSensitive -
- */
-export const attribContains = $("~");
-/**
- * Returns attrib selector `[id^=x]`
- *
- * @param id -
- * @param x -
- * @param caseSensitive -
- */
-export const attribPrefix = $("^");
-/**
- * Returns attrib selector `[id$=x]`
- *
- * @param id -
- * @param x -
- * @param caseSensitive -
- */
-export const attribSuffix = $("$");
-/**
- * Returns attrib selector `[id*=x]`
- * @param id -
- * @param x -
- * @param caseSensitive -
- */
-export const attribMatches = $("*");
+const withAttrib = (id) => `[${id}]`;
+const attribEq = $("");
+const attribContains = $("~");
+const attribPrefix = $("^");
+const attribSuffix = $("$");
+const attribMatches = $("*");
+export {
+  attribContains,
+  attribEq,
+  attribMatches,
+  attribPrefix,
+  attribSuffix,
+  withAttrib
+};

package/comment.js

@@ -1,12 +1,16 @@
 import { indent } from "./impl.js";
-export const comment = (body, force = false) => (acc, opts) => {
-    const space = indent(opts);
-    const inner = indent(opts, opts.depth + 1);
-    if (opts.format.comments || force) {
-        acc.push(space + "/*", body
-            .split("\n")
-            .map((l) => inner + l)
-            .join("\n"), space + "*/");
-    }
-    return acc;
+const comment = (body, force = false) => (acc, opts) => {
+  const space = indent(opts);
+  const inner = indent(opts, opts.depth + 1);
+  if (opts.format.comments || force) {
+    acc.push(
+      space + "/*",
+      body.split("\n").map((l) => inner + l).join("\n"),
+      space + "*/"
+    );
+  }
+  return acc;
+};
+export {
+  comment
 };

package/conditional.js

@@ -1,36 +1,36 @@
 import { isString } from "@thi.ng/checks/is-string";
 import { expand, indent } from "./impl.js";
-export const conditional = (type, cond, rules) => (acc, opts) => {
-    const space = indent(opts);
-    acc.push(`${space}${type} ${formatCond(cond)}${opts.format.declStart}`);
-    opts.depth++;
-    expand(acc, [], rules, opts);
-    opts.depth--;
-    acc.push(space + opts.format.declEnd);
-    return acc;
+const conditional = (type, cond, rules) => (acc, opts) => {
+  const space = indent(opts);
+  acc.push(`${space}${type} ${formatCond(cond)}${opts.format.declStart}`);
+  opts.depth++;
+  expand(acc, [], rules, opts);
+  opts.depth--;
+  acc.push(space + opts.format.declEnd);
+  return acc;
 };
 const formatCond = (cond) => {
-    if (isString(cond)) {
-        return cond;
+  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);
     }
-    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 ");
+  }
+  return acc.join(" and ");
+};
+export {
+  conditional
 };

package/css.js

@@ -5,22 +5,22 @@ import { isPlainObject } from "@thi.ng/checks/is-plain-object";
 import { illegalArgs } from "@thi.ng/errors/illegal-arguments";
 import { COMPACT, DEFAULT_VENDORS } from "./api.js";
 import { expand, formatDecls } from "./impl.js";
-export const css = (rules, opts) => {
-    opts = {
-        format: COMPACT,
-        vendors: DEFAULT_VENDORS,
-        fns: {},
-        depth: 0,
-        ...opts,
-    };
-    isArray(opts.autoprefix) && (opts.autoprefix = new Set(opts.autoprefix));
-    return isPlainObject(rules)
-        ? formatDecls(rules, opts)
-        : isFunction(rules)
-            ? rules([], opts).join(opts.format.rules)
-            : expand([], [], isArray(rules)
-                ? rules
-                : isNotStringAndIterable(rules)
-                    ? [...rules]
-                    : illegalArgs(`invalid rules`), opts).join(opts.format.rules);
+const css = (rules, opts) => {
+  opts = {
+    format: COMPACT,
+    vendors: DEFAULT_VENDORS,
+    fns: {},
+    depth: 0,
+    ...opts
+  };
+  isArray(opts.autoprefix) && (opts.autoprefix = new Set(opts.autoprefix));
+  return isPlainObject(rules) ? formatDecls(rules, opts) : isFunction(rules) ? rules([], opts).join(opts.format.rules) : expand(
+    [],
+    [],
+    isArray(rules) ? rules : isNotStringAndIterable(rules) ? [...rules] : illegalArgs(`invalid rules`),
+    opts
+  ).join(opts.format.rules);
+};
+export {
+  css
 };

package/impl.js

@@ -11,97 +11,99 @@ import { permutations } from "@thi.ng/transducers/permutations";
 import { repeat } from "@thi.ng/transducers/repeat";
 import { str } from "@thi.ng/transducers/str";
 import { transduce } from "@thi.ng/transducers/transduce";
-const EMPTY = new Set();
+const EMPTY = /* @__PURE__ */ new Set();
 const NO_SPACES = ":[";
-const xfSel = comp(flatten(), map((x) => (NO_SPACES.indexOf(x.charAt(0)) >= 0 ? x : " " + x)));
-const withScope = (xf, scope) => comp(xf, map((x) => (isString(x) && x.indexOf(" .") == 0 ? x + scope : x)));
-/** @internal */
-export const expand = (acc, parent, rules, opts) => {
-    const n = rules.length;
-    const sel = [];
-    let curr, isFn;
-    const process = (i, r) => {
-        let rfn = null;
-        if (isArray(r)) {
-            expand(acc, makeSelector(parent, sel), r, opts);
-        }
-        else if (isIterable(r) && !isString(r)) {
-            expand(acc, makeSelector(parent, sel), [...r], opts);
-        }
-        else if ((isFn = isFunction(r)) || (rfn = opts.fns[r])) {
-            if (!parent.length) {
-                if (rfn) {
-                    rfn.apply(null, rules.slice(i + 1))(acc, opts);
-                    return true;
-                }
-                r(acc, opts);
-            }
-            else if (isFn) {
-                process(i, r());
-            }
-            else {
-                illegalArgs(`quoted fn ('${r}') only allowed at head position`);
-            }
-        }
-        else if (isPlainObject(r)) {
-            curr = Object.assign(curr || {}, r);
-        }
-        else if (r != null) {
-            sel.push(r);
-        }
-    };
-    for (let i = 0; i < n; i++) {
-        if (process(i, rules[i])) {
-            return acc;
+const xfSel = comp(
+  flatten(),
+  map((x) => NO_SPACES.indexOf(x.charAt(0)) >= 0 ? x : " " + x)
+);
+const withScope = (xf, scope) => comp(
+  xf,
+  map((x) => isString(x) && x.indexOf(" .") == 0 ? x + scope : x)
+);
+const expand = (acc, parent, rules, opts) => {
+  const n = rules.length;
+  const sel = [];
+  let curr, isFn;
+  const process = (i, r) => {
+    let rfn = null;
+    if (isArray(r)) {
+      expand(acc, makeSelector(parent, sel), r, opts);
+    } else if (isIterable(r) && !isString(r)) {
+      expand(acc, makeSelector(parent, sel), [...r], opts);
+    } else if ((isFn = isFunction(r)) || (rfn = opts.fns[r])) {
+      if (!parent.length) {
+        if (rfn) {
+          rfn.apply(null, rules.slice(i + 1))(acc, opts);
+          return true;
         }
+        r(acc, opts);
+      } else if (isFn) {
+        process(i, r());
+      } else {
+        illegalArgs(`quoted fn ('${r}') only allowed at head position`);
+      }
+    } else if (isPlainObject(r)) {
+      curr = Object.assign(curr || {}, r);
+    } else if (r != null) {
+      sel.push(r);
+    }
+  };
+  for (let i = 0; i < n; i++) {
+    if (process(i, rules[i])) {
+      return acc;
     }
-    curr && acc.push(formatRule(parent, sel, curr, opts));
-    return acc;
+  }
+  curr && acc.push(formatRule(parent, sel, curr, opts));
+  return acc;
 };
 const makeSelector = (parent, curr) => parent.length ? [...permutations(parent, curr)] : curr;
 const formatRule = (parent, sel, curr, opts) => {
-    const f = opts.format;
-    const space = indent(opts);
-    const xf = opts.scope ? withScope(xfSel, opts.scope) : xfSel;
-    return [
-        space,
-        transduce(map((sel) => transduce(xf, str(), isArray(sel) ? sel : [sel]).trim()), str(f.ruleSep), makeSelector(parent, sel)),
-        f.declStart,
-        formatDecls(curr, opts),
-        space,
-        f.declEnd,
-    ].join("");
+  const f = opts.format;
+  const space = indent(opts);
+  const xf = opts.scope ? withScope(xfSel, opts.scope) : xfSel;
+  return [
+    space,
+    transduce(
+      map(
+        (sel2) => transduce(xf, str(), isArray(sel2) ? sel2 : [sel2]).trim()
+      ),
+      str(f.ruleSep),
+      makeSelector(parent, sel)
+    ),
+    f.declStart,
+    formatDecls(curr, opts),
+    space,
+    f.declEnd
+  ].join("");
 };
-/** @internal */
-export const formatDecls = (rules, opts) => {
-    const f = opts.format;
-    const prefixes = (opts.autoprefix || EMPTY);
-    const space = indent(opts, opts.depth + 1);
-    const acc = [];
-    for (let r in rules) {
-        if (rules.hasOwnProperty(r)) {
-            let val = rules[r];
-            if (isFunction(val)) {
-                val = val(rules);
-            }
-            if (isArray(val)) {
-                val = val
-                    .map((v) => (isArray(v) ? v.join(" ") : v))
-                    .join(f.ruleSep);
-            }
-            if (prefixes.has(r)) {
-                for (let v of opts.vendors) {
-                    acc.push(`${space}${v}${r}:${f.valSep}${val};`);
-                }
-            }
-            acc.push(`${space}${r}:${f.valSep}${val};`);
+const formatDecls = (rules, opts) => {
+  const f = opts.format;
+  const prefixes = opts.autoprefix || EMPTY;
+  const space = indent(opts, opts.depth + 1);
+  const acc = [];
+  for (let r in rules) {
+    if (rules.hasOwnProperty(r)) {
+      let val = rules[r];
+      if (isFunction(val)) {
+        val = val(rules);
+      }
+      if (isArray(val)) {
+        val = val.map((v) => isArray(v) ? v.join(" ") : v).join(f.ruleSep);
+      }
+      if (prefixes.has(r)) {
+        for (let v of opts.vendors) {
+          acc.push(`${space}${v}${r}:${f.valSep}${val};`);
         }
+      }
+      acc.push(`${space}${r}:${f.valSep}${val};`);
     }
-    return acc.join(f.decls) + f.decls;
+  }
+  return acc.join(f.decls) + f.decls;
+};
+const indent = (opts, d = opts.depth) => d > 1 ? [...repeat(opts.format.indent, d)].join("") : d > 0 ? opts.format.indent : "";
+export {
+  expand,
+  formatDecls,
+  indent
 };
-/** @internal */
-export const indent = (opts, d = opts.depth) => d > 1
-    ? [...repeat(opts.format.indent, d)].join("")
-    : d > 0
-        ? opts.format.indent
-        : "";

package/import.js

@@ -1,4 +1,6 @@
-export const at_import = (url, ...queries) => (acc, opts) => (acc.push(queries.length
-    ? `@import url(${url}) ${queries.join(opts.format.ruleSep)};`
-    : `@import url(${url});`),
-    acc);
+const at_import = (url, ...queries) => (acc, opts) => (acc.push(
+  queries.length ? `@import url(${url}) ${queries.join(opts.format.ruleSep)};` : `@import url(${url});`
+), acc);
+export {
+  at_import
+};

package/inject.js

@@ -1,28 +1,19 @@
-// https://davidwalsh.name/add-rules-stylesheets
-/**
- * Injects given CSS string as global stylesheet in DOM head. If `first`
- * is true, inserts it as first stylesheet, else (default) appends it.
- *
- * Returns created style DOM element.
- *
- * @param css - CSS string
- * @param first - true, if prepend to stylesheet list (else append)
- */
-export const injectStyleSheet = (css, first = false) => {
-    const head = document.getElementsByTagName("head")[0];
-    const sheet = document.createElement("style");
-    sheet.setAttribute("type", "text/css");
-    if (sheet.styleSheet !== undefined) {
-        sheet.styleSheet.cssText = css;
-    }
-    else {
-        sheet.textContent = css;
-    }
-    if (first) {
-        head.insertBefore(sheet, head.firstChild);
-    }
-    else {
-        head.appendChild(sheet);
-    }
-    return sheet;
+const injectStyleSheet = (css, first = false) => {
+  const head = document.getElementsByTagName("head")[0];
+  const sheet = document.createElement("style");
+  sheet.setAttribute("type", "text/css");
+  if (sheet.styleSheet !== void 0) {
+    sheet.styleSheet.cssText = css;
+  } else {
+    sheet.textContent = css;
+  }
+  if (first) {
+    head.insertBefore(sheet, head.firstChild);
+  } else {
+    head.appendChild(sheet);
+  }
+  return sheet;
+};
+export {
+  injectStyleSheet
 };

package/keyframes.js

@@ -1,25 +1,30 @@
 import { formatDecls, indent } from "./impl.js";
-export function at_keyframes(id, ...args) {
-    const stops = args.length === 1 ? args[0] : { 0: args[0], 100: args[1] };
-    return (acc, opts) => {
-        const outer = indent(opts);
-        opts.depth++;
-        const inner = indent(opts);
-        acc.push(`${outer}@keyframes ${id}${opts.format.declStart}`);
-        for (let s in stops) {
-            if (stops.hasOwnProperty(s)) {
-                acc.push([
-                    inner,
-                    s + "%",
-                    opts.format.declStart,
-                    formatDecls(stops[s], opts),
-                    inner,
-                    opts.format.declEnd,
-                ].join(""));
-            }
-        }
-        opts.depth--;
-        acc.push(outer + opts.format.declEnd);
-        return acc;
-    };
+function at_keyframes(id, ...args) {
+  const stops = args.length === 1 ? args[0] : { 0: args[0], 100: args[1] };
+  return (acc, opts) => {
+    const outer = indent(opts);
+    opts.depth++;
+    const inner = indent(opts);
+    acc.push(`${outer}@keyframes ${id}${opts.format.declStart}`);
+    for (let s in stops) {
+      if (stops.hasOwnProperty(s)) {
+        acc.push(
+          [
+            inner,
+            s + "%",
+            opts.format.declStart,
+            formatDecls(stops[s], opts),
+            inner,
+            opts.format.declEnd
+          ].join("")
+        );
+      }
+    }
+    opts.depth--;
+    acc.push(outer + opts.format.declEnd);
+    return acc;
+  };
 }
+export {
+  at_keyframes
+};

package/media.js

@@ -1,2 +1,5 @@
 import { conditional } from "./conditional.js";
-export const at_media = (cond, rules) => conditional("@media", cond, rules);
+const at_media = (cond, rules) => conditional("@media", cond, rules);
+export {
+  at_media
+};

package/namespace.js

@@ -1,6 +1,8 @@
-export function at_namespace(...args) {
-    return (acc, _) => (acc.push(args.length > 1
-        ? `@namespace ${args[0]} url(${args[1]});`
-        : `@namespace url(${args[0]});`),
-        acc);
+function at_namespace(...args) {
+  return (acc, _) => (acc.push(
+    args.length > 1 ? `@namespace ${args[0]} url(${args[1]});` : `@namespace url(${args[0]});`
+  ), acc);
 }
+export {
+  at_namespace
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-css",
-  "version": "2.2.18",
+  "version": "2.2.20",
   "description": "CSS from nested JS data structures",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,14 +35,14 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.10",
-    "@thi.ng/checks": "^3.4.10",
-    "@thi.ng/errors": "^2.4.4",
-    "@thi.ng/transducers": "^8.8.13"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/checks": "^3.4.12",
+    "@thi.ng/errors": "^2.4.6",
+    "@thi.ng/transducers": "^8.8.15"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
-    "@thi.ng/testament": "^0.4.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -126,5 +128,5 @@
     ],
     "year": 2016
   },
-  "gitHead": "04d1de79f256d7a53c6b5fd157b37f49bc88e11d\n"
+  "gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
 }

package/quoted-functions.js

@@ -4,12 +4,14 @@ import { at_keyframes } from "./keyframes.js";
 import { at_media } from "./media.js";
 import { at_namespace } from "./namespace.js";
 import { at_supports } from "./supports.js";
-/** @internal */
-export const QUOTED_FNS = {
-    "@comment": comment,
-    "@import": at_import,
-    "@keyframes": at_keyframes,
-    "@media": at_media,
-    "@namespace": at_namespace,
-    "@supports": at_supports,
+const QUOTED_FNS = {
+  "@comment": comment,
+  "@import": at_import,
+  "@keyframes": at_keyframes,
+  "@media": at_media,
+  "@namespace": at_namespace,
+  "@supports": at_supports
+};
+export {
+  QUOTED_FNS
 };

package/supports.js

@@ -1,2 +1,5 @@
 import { conditional } from "./conditional.js";
-export const at_supports = (cond, rules) => conditional("@supports", cond, rules);
+const at_supports = (cond, rules) => conditional("@supports", cond, rules);
+export {
+  at_supports
+};

package/units.js

@@ -1,28 +1,39 @@
-export let PRECISION = 4;
-/**
- * Sets the number of fractional digits used for formatting various floating
- * point values in the serialized SVG. The current value can be read via
- * {@link PRECISION}.
- *
- * @param n
- */
-export const setPrecision = (n) => (PRECISION = n);
-/** @internal */
-const ff = (x) => (x === (x | 0) ? String(x) : x.toFixed(PRECISION));
-export const em = (x) => `${ff(x)}em`;
-export const ex = (x) => `${ff(x)}ex`;
-export const rem = (x) => `${ff(x)}rem`;
-export const percent = (x) => `${ff(x)}%`;
-export const px = (x) => `${ff(x)}px`;
-export const vh = (x) => `${ff(x)}vh`;
-export const vw = (x) => `${ff(x)}vw`;
-export const vmin = (x) => `${ff(x)}vmin`;
-export const vmax = (x) => `${ff(x)}vmax`;
-export const ms = (x) => `${x | 0}ms`;
-export const second = (x) => `${ff(x)}s`;
-/** @deprecated use {@link second} */
-export const sec = second;
-export const deg = (x) => `${ff(x)}deg`;
-export const rad = (x) => `${ff(x)}rad`;
-export const turn = (x) => `${ff(x)}turn`;
-export const url = (x) => `url(${x})`;
+let PRECISION = 4;
+const setPrecision = (n) => PRECISION = n;
+const ff = (x) => x === (x | 0) ? String(x) : x.toFixed(PRECISION);
+const em = (x) => `${ff(x)}em`;
+const ex = (x) => `${ff(x)}ex`;
+const rem = (x) => `${ff(x)}rem`;
+const percent = (x) => `${ff(x)}%`;
+const px = (x) => `${ff(x)}px`;
+const vh = (x) => `${ff(x)}vh`;
+const vw = (x) => `${ff(x)}vw`;
+const vmin = (x) => `${ff(x)}vmin`;
+const vmax = (x) => `${ff(x)}vmax`;
+const ms = (x) => `${x | 0}ms`;
+const second = (x) => `${ff(x)}s`;
+const sec = second;
+const deg = (x) => `${ff(x)}deg`;
+const rad = (x) => `${ff(x)}rad`;
+const turn = (x) => `${ff(x)}turn`;
+const url = (x) => `url(${x})`;
+export {
+  PRECISION,
+  deg,
+  em,
+  ex,
+  ms,
+  percent,
+  px,
+  rad,
+  rem,
+  sec,
+  second,
+  setPrecision,
+  turn,
+  url,
+  vh,
+  vmax,
+  vmin,
+  vw
+};