Move stringify to a toCss util

Author: efoken

src/css.js

@@ -1,45 +1,5 @@
-import { $, IS_NON_DIMENSIONAL } from "./render.js";
+import { $ } from "./render.js";
 import { options } from "./options.js";
-import { isNumber, isObject, isTagged } from "./utils.js";
-
-/**
- * @type {{[id:string]:string}}
- */
-const PROPS = {};
-
-/**
- * @param {string} str
- */
-const hyphenate = (str) =>
-    (PROPS[str] =
-        PROPS[str] ||
-        str
-            .replace(/([A-Z])/g, "-$1")
-            .toLowerCase()
-            .replace(/^ms-/, "-ms-"));
-
-/**
- * @param {object} obj
- * @returns {string}
- */
-function stringify(obj) {
-    return Object.entries(obj)
-        .map(([key, value]) => {
-            if (isObject(value)) {
-                return `${key}{${stringify(value)};}`.replace(/;;/g, ";");
-            }
-            if (key[0] === "-") {
-                return `${key}:${value}`;
-            }
-            return `${hyphenate(key)}:${
-                !isNumber(value) || IS_NON_DIMENSIONAL.test(key)
-                    ? value
-                    : `${value}px`
-            }`;
-        })
-        .join(";")
-        .replace(/};/g, "}");
-}
 
 /**
  * It is used only if the browser supports adoptedStyleSheets.
@@ -50,16 +10,14 @@ const SHEETS = {};
 
 /**
  * Create a Style from a string
- * @param {TemplateStringsArray|{[key:string]:import("csstype").Properties<string | number>}} template
- * @param {...any} args
+ * @param {TemplateStringsArray} template
+ * @param  {...any} args
  */
 export function css(template, ...args) {
-    const cssText = !isTagged(template)
-        ? stringify(template)
-        : (template.raw || template).reduce(
-              (cssText, part, i) => cssText + part + (args[i] || ""),
-              ""
-          );
+    const cssText = (template.raw || template).reduce(
+        (cssText, part, i) => cssText + part + (args[i] || ""),
+        ""
+    );
     return (SHEETS[cssText] = SHEETS[cssText] || createSheet(cssText));
 }
 

src/tests/css.test.js

@@ -21,25 +21,4 @@ describe("src/css", () => {
         options.sheet = true;
         expect(styleSheet).to.an.instanceOf(HTMLStyleElement);
     });
-    it("stringify", () => {
-        const styleSheet = css({
-            ":host": {
-                width: 696,
-                height: 100,
-                flex: 1,
-            },
-            ".root": {
-                fontSize: 12,
-                lineHeight: 1.5,
-            },
-        });
-        const cssText =
-            "cssRules" in styleSheet
-                ? Object.values(styleSheet.cssRules).map((v) => v.cssText)
-                : [];
-        expect(cssText).to.eql([
-            ":host { width: 696px; height: 100px; flex: 1 1 0%; }",
-            ".root { font-size: 12px; line-height: 1.5; }",
-        ]);
-    });
 });

src/utils.js

@@ -38,12 +38,6 @@ export const { isArray } = Array;
  */
 export const isNumber = (value) => typeof value == "number";
 
-/**
- * @param {any} value
- * @returns {value is TemplateStringsArray}
- */
-export const isTagged = (value) => value && value.length && value.raw;
-
 /**
  *
  * @param {Element & {dataset?:object}} node

tests/utils.test.js

@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { serialize, checkIncompatibility } from "../utils";
+import { serialize, checkIncompatibility, toCss } from "../utils";
 
 describe("utils", () => {
     it("serialize", () => {
@@ -19,4 +19,25 @@ describe("utils", () => {
         expect(checkIncompatibility()).to.instanceOf(Array);
         expect(checkIncompatibility().length).to.equal(0);
     });
+    it("toCss", () => {
+        const styleSheet = toCss({
+            ":host": {
+                width: 696,
+                height: 100,
+                flex: 1,
+            },
+            ".root": {
+                fontSize: 12,
+                lineHeight: 1.5,
+            },
+        });
+        const cssText =
+            "cssRules" in styleSheet
+                ? Object.values(styleSheet.cssRules).map((v) => v.cssText)
+                : [];
+        expect(cssText).to.eql([
+            ":host { width: 696px; height: 100px; flex: 1 1 0%; }",
+            ".root { font-size: 12px; line-height: 1.5; }",
+        ]);
+    });
 });

types/css.d.ts

@@ -1,9 +1,6 @@
-import * as CSS from "csstype";
-
 export type Sheet = CSSStyleSheet | HTMLStyleElement;
 
 export type Sheets = Sheet | Sheet[] | Sheets[];
-
 /**
  * Create a CSSStyleSheet if the browser supports it and
  * otherwise an HTMLStyleElement to be used as a polyfill
@@ -21,6 +18,3 @@ export type Sheets = Sheet | Sheet[] | Sheets[];
  * @param values
  */
 export function css(strings: TemplateStringsArray, ...values: any[]): Sheet;
-export function css(strings: {
-    [key: string]: CSS.Properties<string | number>;
-}): Sheet;

utils.js

@@ -1,3 +1,7 @@
+import { css } from "./src/css.js";
+import { IS_NON_DIMENSIONAL } from "./src/render.js";
+import { isNumber, isObject } from "./src/utils.js";
+
 const W = globalThis;
 
 const COMPATIBILITY_LIST = [
@@ -26,3 +30,51 @@ export const checkIncompatibility = () =>
         //@ts-ignore
         .map(([check, ctx]) => (!ctx || !(check in ctx) ? check : 0))
         .filter((check) => check);
+
+/**
+ * @type {{[id:string]:string}}
+ */
+const PROPS = {};
+
+/**
+ * @param {string} str
+ */
+const hyphenate = (str) =>
+    (PROPS[str] =
+        PROPS[str] ||
+        str
+            .replace(/([A-Z])/g, "-$1")
+            .toLowerCase()
+            .replace(/^ms-/, "-ms-"));
+
+/**
+ * @param {object} obj
+ * @returns {string}
+ */
+const stringify = (obj) =>
+    Object.entries(obj)
+        .map(([key, value]) => {
+            if (isObject(value)) {
+                return `${key}{${stringify(value)};}`.replace(/;;/g, ";");
+            }
+            if (key[0] === "-") {
+                return `${key}:${value}`;
+            }
+            return `${hyphenate(key)}:${
+                !isNumber(value) || IS_NON_DIMENSIONAL.test(key)
+                    ? value
+                    : `${value}px`
+            }`;
+        })
+        .join(";")
+        .replace(/};/g, "}");
+
+/**
+ * Create a Style from an object
+ * @param {{[key:string]:import("csstype").Properties<string | number>}} obj
+ */
+export function toCss(obj) {
+    return css`
+        ${stringify(obj)}
+    `;
+}