Implement toCss with URL

Author: efoken

tests/utils.test.js

@@ -4,23 +4,24 @@ import { serialize, checkIncompatibility, toCss } from "../utils";
 describe("utils", () => {
     it("serialize", () => {
         expect(serialize(true && "1", true && "2", true && "3")).to.equal(
-            "1 2 3"
+            "1 2 3",
         );
 
         expect(serialize(false && "1", true && "2", true && "3")).to.equal(
-            "2 3"
+            "2 3",
         );
 
         expect(serialize(false && "1", true && "2", false && "3")).to.equal(
-            "2"
+            "2",
         );
     });
     it("checkIncompatibility", () => {
         expect(checkIncompatibility()).to.instanceOf(Array);
         expect(checkIncompatibility().length).to.equal(0);
     });
     it("toCss", () => {
-        const styleSheet = toCss({
+        const extract = (s) => Object.values(s.cssRules).map((v) => v.cssText);
+        let styleSheet = toCss({
             ":host": {
                 width: 696,
                 height: 100,
@@ -31,13 +32,11 @@ describe("utils", () => {
                 lineHeight: 1.5,
             },
         });
-        const cssText =
-            "cssRules" in styleSheet
-                ? Object.values(styleSheet.cssRules).map((v) => v.cssText)
-                : [];
-        expect(cssText).to.eql([
+        expect(extract(styleSheet)).to.eql([
             ":host { width: 696px; height: 100px; flex: 1 1 0%; }",
             ".root { font-size: 12px; line-height: 1.5; }",
         ]);
+        styleSheet = toCss("https://unpkg.com/open-props");
+        expect(extract(styleSheet)).to.have.length.gt(1);
     });
 });

types/utils.d.ts

@@ -1,3 +1,6 @@
+import * as CSS from "csstype";
+import { Sheet } from "./css.js";
+
 /**
  * Filter the parameters and join in a string only those that are considered different from
  * `"" | false | 0 | null | undefined`.
@@ -12,3 +15,8 @@ export function serialize(...args: any): string;
  * check Atomico's leveraged compatibility with the current browser
  */
 export function checkIncompatibility(): string[];
+
+export function toCss(obj: {
+    [key: string]: CSS.Properties<string | number>;
+}): Sheet;
+export function toCss(obj: string): Sheet | undefined;

utils.js

@@ -71,9 +71,21 @@ const stringify = (obj) =>
 
 /**
  * Create a Style from an object
- * @param {{[key:string]:import("csstype").Properties<string | number>}} obj
+ * @param {{[key:string]:import("csstype").Properties<string | number>}|string} obj
+ * @returns {import("./types/css.js").Sheet | undefined}
  */
 export function toCss(obj) {
+    if (typeof obj === "string") {
+        if (obj.match(/^https?:\/\//)) {
+            const request = new XMLHttpRequest();
+            request.open("get", obj, false);
+            request.send();
+            if (request.status === 200)
+                return css`
+                    ${request.responseText}
+                `;
+        }
+    }
     return css`
         ${stringify(obj)}
     `;