@webstudio-is/css-engine 0.91.0 → 0.92.0

package/lib/__generated__/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/core/compare-media.js

@@ -1,4 +1,5 @@
-const compareMedia = (optionA, optionB) => {
+"use strict";
+export const compareMedia = (optionA, optionB) => {
   if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
     return -1;
   }
@@ -13,6 +14,3 @@ const compareMedia = (optionA, optionB) => {
   }
   return "minWidth" in optionA ? 1 : -1;
 };
-export {
-  compareMedia
-};

package/{src/core/compare-media.test.ts → lib/core/compare-media.test.js}

@@ -1,6 +1,6 @@
+"use strict";
 import { describe, test, expect } from "@jest/globals";
 import { compareMedia } from "./compare-media";
-
 describe("Compare media", () => {
   test("min-width", () => {
     const initial = [
@@ -8,38 +8,36 @@ describe("Compare media", () => {
       { minWidth: 1280 },
       { minWidth: 0 },
       { minWidth: 1024 },
-      { minWidth: 768 },
+      { minWidth: 768 }
     ];
     const expected = [
       {},
       { minWidth: 0 },
       { minWidth: 768 },
       { minWidth: 1024 },
-      { minWidth: 1280 },
+      { minWidth: 1280 }
     ];
     const sorted = initial.sort(compareMedia);
     expect(sorted).toStrictEqual(expected);
   });
-
   test("max-width", () => {
     const initial = [
       {},
       { maxWidth: 1280 },
       { maxWidth: 0 },
       { maxWidth: 1024 },
-      { maxWidth: 768 },
+      { maxWidth: 768 }
     ];
     const expected = [
       {},
       { maxWidth: 1280 },
       { maxWidth: 1024 },
       { maxWidth: 768 },
-      { maxWidth: 0 },
+      { maxWidth: 0 }
     ];
     const sorted = initial.sort(compareMedia);
     expect(sorted).toStrictEqual(expected);
   });
-
   test("mixed max and min", () => {
     const initial = [
       {},
@@ -48,7 +46,7 @@ describe("Compare media", () => {
       { maxWidth: 767 },
       { minWidth: 1440 },
       { minWidth: 1280 },
-      { minWidth: 1920 },
+      { minWidth: 1920 }
     ];
     const expected = [
       {},
@@ -57,7 +55,7 @@ describe("Compare media", () => {
       { maxWidth: 479 },
       { minWidth: 1280 },
       { minWidth: 1440 },
-      { minWidth: 1920 },
+      { minWidth: 1920 }
     ];
     const sorted = initial.sort(compareMedia);
     expect(sorted).toStrictEqual(expected);

package/lib/core/create-css-engine.js

@@ -1,7 +1,5 @@
+"use strict";
 import { CssEngine } from "./css-engine";
-const createCssEngine = (options = {}) => {
+export const createCssEngine = (options = {}) => {
   return new CssEngine(options);
 };
-export {
-  createCssEngine
-};

package/lib/core/css-engine.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   FontFaceRule,
   MediaRule,
@@ -8,7 +9,7 @@ import { compareMedia } from "./compare-media";
 import { StyleElement } from "./style-element";
 import { StyleSheet } from "./style-sheet";
 const defaultMediaRuleId = "__default-media-rule__";
-class CssEngine {
+export class CssEngine {
   #element;
   #mediaRules = /* @__PURE__ */ new Map();
   #plainRules = /* @__PURE__ */ new Map();
@@ -102,6 +103,3 @@ class CssEngine {
     this.#isDirty = true;
   };
 }
-export {
-  CssEngine
-};

package/lib/core/css-engine.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CssEngine } from "./css-engine";
+export default {
+  component: "CssEngine"
+};
+const style0 = {
+  color: { type: "keyword", value: "red" }
+};
+const mediaRuleOptions0 = { minWidth: 0 };
+const mediaId = "0";
+export const Basic = () => {
+  const engine = new CssEngine({ name: "test" });
+  engine.addMediaRule(mediaId, mediaRuleOptions0);
+  const rule = engine.addStyleRule(".test", {
+    style: style0,
+    breakpoint: "0"
+  });
+  engine.render();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "test", children: "Should be red" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => {
+          rule.styleMap.set("color", { type: "keyword", value: "green" });
+          engine.render();
+        },
+        children: "Make it green"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => {
+          engine.addStyleRule(".test", {
+            style: {
+              backgroundColor: { type: "keyword", value: "yellow" }
+            },
+            breakpoint: "0"
+          });
+          engine.render();
+        },
+        children: "Add rule with yellow background"
+      }
+    )
+  ] });
+};

package/{src/core/css-engine.test.ts → lib/core/css-engine.test.js}

@@ -1,39 +1,31 @@
+"use strict";
 import { describe, beforeEach, test, expect } from "@jest/globals";
 import { CssEngine } from "./css-engine";
-
 const style0 = {
-  display: { type: "keyword", value: "block" },
-} as const;
-
-const mediaRuleOptions0 = { minWidth: 0 } as const;
+  display: { type: "keyword", value: "block" }
+};
+const mediaRuleOptions0 = { minWidth: 0 };
 const mediaId0 = "0";
-
 const style1 = {
-  display: { type: "keyword", value: "flex" },
-} as const;
-
+  display: { type: "keyword", value: "flex" }
+};
 const style2 = {
   display: { type: "keyword", value: "block" },
-  color: { type: "keyword", value: "black" },
-} as const;
-
-const mediaRuleOptions1 = { minWidth: 300 } as const;
+  color: { type: "keyword", value: "black" }
+};
+const mediaRuleOptions1 = { minWidth: 300 };
 const mediaId1 = "1";
-
 describe("CssEngine", () => {
-  let engine: CssEngine;
-
+  let engine;
   const reset = () => {
     engine = new CssEngine({ name: "test" });
   };
-
   beforeEach(reset);
-
   test("minWidth media rule", () => {
     engine.addMediaRule("0", { minWidth: 0 });
     engine.addStyleRule(".c1", {
       style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -43,12 +35,11 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("maxWidth media rule", () => {
-    engine.addMediaRule("0", { maxWidth: 1000 });
+    engine.addMediaRule("0", { maxWidth: 1e3 });
     engine.addStyleRule(".c1", {
       style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (max-width: 1000px) {
@@ -58,12 +49,11 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("maxWidth and maxWith media rule", () => {
-    engine.addMediaRule("0", { maxWidth: 1000, minWidth: 360 });
+    engine.addMediaRule("0", { maxWidth: 1e3, minWidth: 360 });
     engine.addStyleRule(".c1", {
       style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 360px) and (max-width: 1000px) {
@@ -73,11 +63,10 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("use default media rule when there is no matching one registered", () => {
     engine.addStyleRule(".c", {
       style: style0,
-      breakpoint: "x",
+      breakpoint: "x"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
@@ -88,7 +77,7 @@ describe("CssEngine", () => {
     `);
     engine.addStyleRule(".c1", {
       style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "x",
+      breakpoint: "x"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
@@ -100,13 +89,11 @@ describe("CssEngine", () => {
         }
       }"
     `);
-
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c1", {
       style: { color: { type: "keyword", value: "blue" } },
-      breakpoint: mediaId0,
+      breakpoint: mediaId0
     });
-    // Default media query should allways be the first to have the lowest source order specificity
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
         .c {
@@ -123,26 +110,21 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("sort media queries based on lower min-width", () => {
     engine.addMediaRule(mediaId1, mediaRuleOptions1);
     engine.addStyleRule(".c2", {
       style: style1,
-      breakpoint: mediaId1,
+      breakpoint: mediaId1
     });
-
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c1", {
       style: style0,
-      breakpoint: mediaId0,
+      breakpoint: mediaId0
     });
-
     engine.addStyleRule(".c3", {
       style: style0,
-      breakpoint: "x",
+      breakpoint: "x"
     });
-
-    // Default media query should allways be the first to have the lowest source order specificity
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
         .c3 {
@@ -161,15 +143,14 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("keep the sort order when minWidth is not defined", () => {
     engine.addStyleRule(".c0", {
       style: style0,
-      breakpoint: "x",
+      breakpoint: "x"
     });
     engine.addStyleRule(".c1", {
       style: style1,
-      breakpoint: "x",
+      breakpoint: "x"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
@@ -181,16 +162,14 @@ describe("CssEngine", () => {
         }
       }"
     `);
-
     reset();
-
     engine.addStyleRule(".c1", {
       style: style1,
-      breakpoint: "x",
+      breakpoint: "x"
     });
     engine.addStyleRule(".c0", {
       style: style0,
-      breakpoint: "x",
+      breakpoint: "x"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
@@ -203,15 +182,14 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("rule with multiple properties", () => {
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: {
         ...style0,
-        color: { type: "keyword", value: "red" },
+        color: { type: "keyword", value: "red" }
       },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -222,14 +200,13 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("hyphenate property", () => {
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: {
-        backgroundColor: { type: "keyword", value: "red" },
+        backgroundColor: { type: "keyword", value: "red" }
       },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -239,15 +216,14 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("add rule", () => {
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     const rule1 = engine.addStyleRule(".c", {
       style: {
         ...style0,
-        color: { type: "keyword", value: "red" },
+        color: { type: "keyword", value: "red" }
       },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -266,9 +242,9 @@ describe("CssEngine", () => {
     engine.addStyleRule(".c2", {
       style: {
         ...style0,
-        color: { type: "keyword", value: "green" },
+        color: { type: "keyword", value: "green" }
       },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -283,15 +259,14 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("update rule", () => {
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     const rule = engine.addStyleRule(".c", {
       style: {
         ...style0,
-        color: { type: "keyword", value: "red" },
+        color: { type: "keyword", value: "red" }
       },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -307,16 +282,13 @@ describe("CssEngine", () => {
         color: red
       }"
     `);
-
     rule.styleMap.set("color", { type: "keyword", value: "green" });
-
     expect(rule.cssText).toMatchInlineSnapshot(`
       ".c {
         display: block;
         color: green
       }"
     `);
-
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
         .c {
@@ -326,14 +298,13 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("update media rule options", () => {
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: {
-        color: { type: "keyword", value: "red" },
+        color: { type: "keyword", value: "red" }
       },
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -351,12 +322,11 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("don't override media queries", () => {
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: style0,
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
@@ -374,12 +344,10 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("plaintext rule", () => {
     engine.addPlaintextRule(".c { color: red }");
     expect(engine.cssText).toMatchInlineSnapshot(`".c { color: red }"`);
   });
-
   test("plaintext - no duplicates", () => {
     engine.addPlaintextRule(".c { color: red }");
     engine.addPlaintextRule(".c { color: red }");
@@ -389,14 +357,13 @@ describe("CssEngine", () => {
       .c { color: green }"
     `);
   });
-
   test("font family rule", () => {
     engine.addFontFaceRule({
       fontFamily: "Roboto",
       fontStyle: "normal",
       fontWeight: 400,
       fontDisplay: "swap",
-      src: "url(/src)",
+      src: "url(/src)"
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@font-face {
@@ -404,20 +371,18 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("clear", () => {
     engine.addStyleRule(".c", {
       style: style0,
-      breakpoint: "0",
+      breakpoint: "0"
     });
     engine.clear();
     expect(engine.cssText).toMatchInlineSnapshot(`""`);
   });
-
   test("get all rule style keys", () => {
     const rule = engine.addStyleRule(".c", {
       style: style2,
-      breakpoint: "0",
+      breakpoint: "0"
     });
     expect(Array.from(rule.styleMap.keys())).toMatchInlineSnapshot(`
       [
@@ -426,11 +391,10 @@ describe("CssEngine", () => {
       ]
     `);
   });
-
   test("delete style from rule", () => {
     const rule = engine.addStyleRule(".c", {
       style: style2,
-      breakpoint: "0",
+      breakpoint: "0"
     });
     rule.styleMap.delete("display");
     expect(engine.cssText).toMatchInlineSnapshot(`
@@ -441,10 +405,9 @@ describe("CssEngine", () => {
       }"
     `);
   });
-
   test("render images with injected asset url", () => {
-    const assets = new Map<string, { path: string }>([
-      ["1234", { path: "foo.png" }],
+    const assets = /* @__PURE__ */ new Map([
+      ["1234", { path: "foo.png" }]
     ]);
     const rule = engine.addStyleRule(
       ".c",
@@ -454,24 +417,24 @@ describe("CssEngine", () => {
             type: "image",
             value: {
               type: "asset",
-              value: "1234",
-            },
-          },
+              value: "1234"
+            }
+          }
         },
-        breakpoint: "0",
+        breakpoint: "0"
       },
       (styleValue) => {
         if (styleValue.type === "image" && styleValue.value.type === "asset") {
           const asset = assets.get(styleValue.value.value);
-          if (asset === undefined) {
+          if (asset === void 0) {
             return { type: "keyword", value: "none" };
           }
           return {
             type: "image",
             value: {
               type: "url",
-              url: asset.path,
-            },
+              url: asset.path
+            }
           };
         }
       }

package/lib/core/equal-media.js

@@ -1,6 +1,4 @@
-const equalMedia = (left, right) => {
+"use strict";
+export const equalMedia = (left, right) => {
   return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
 };
-export {
-  equalMedia
-};

package/{src/core/equal-media.test.ts → lib/core/equal-media.test.js}

@@ -1,19 +1,17 @@
+"use strict";
 import { describe, expect, test } from "@jest/globals";
 import { equalMedia } from "./equal-media";
-
 describe("equalMedia", () => {
   test("minWidth", () => {
     expect(equalMedia({ minWidth: 100 }, { minWidth: 10 })).toBe(false);
     expect(equalMedia({ minWidth: 100 }, { minWidth: 100 })).toBe(true);
     expect(equalMedia({ minWidth: 100 }, { minWidth: 101 })).toBe(false);
   });
-
   test("maxWidth", () => {
     expect(equalMedia({ maxWidth: 100 }, { maxWidth: 101 })).toBe(false);
     expect(equalMedia({ maxWidth: 100 }, { maxWidth: 100 })).toBe(true);
     expect(equalMedia({ maxWidth: 100 }, { maxWidth: 10 })).toBe(false);
   });
-
   test("minWidth and maxWidth", () => {
     expect(equalMedia({ maxWidth: 100, minWidth: 10 }, { maxWidth: 100 })).toBe(
       false

package/lib/core/find-applicable-media.js

@@ -1,6 +1,7 @@
+"use strict";
 import { compareMedia } from "./compare-media";
 import { matchMedia } from "./match-media";
-const findApplicableMedia = (media, width) => {
+export const findApplicableMedia = (media, width) => {
   const sortedMedia = [...media].sort(compareMedia).reverse();
   for (const options of sortedMedia) {
     if (matchMedia(options, width)) {
@@ -8,6 +9,3 @@ const findApplicableMedia = (media, width) => {
     }
   }
 };
-export {
-  findApplicableMedia
-};

package/{src/core/find-applicable-media.test.ts → lib/core/find-applicable-media.test.js}

@@ -1,6 +1,6 @@
+"use strict";
 import { describe, test, expect } from "@jest/globals";
 import { findApplicableMedia } from "./find-applicable-media";
-
 const media = [
   {},
   { maxWidth: 991 },
@@ -8,23 +8,22 @@ const media = [
   { maxWidth: 479 },
   { minWidth: 1280 },
   { minWidth: 1440 },
-  { minWidth: 1920 },
+  { minWidth: 1920 }
 ];
-
 describe("Find applicable media", () => {
   test("200", () => {
     expect(findApplicableMedia([...media], 200)).toStrictEqual({
-      maxWidth: 479,
+      maxWidth: 479
     });
   });
   test("479", () => {
     expect(findApplicableMedia([...media], 479)).toStrictEqual({
-      maxWidth: 479,
+      maxWidth: 479
     });
   });
   test("480", () => {
     expect(findApplicableMedia([...media], 480)).toStrictEqual({
-      maxWidth: 767,
+      maxWidth: 767
     });
   });
   test("1279", () => {
@@ -32,12 +31,12 @@ describe("Find applicable media", () => {
   });
   test("1280", () => {
     expect(findApplicableMedia([...media], 1280)).toStrictEqual({
-      minWidth: 1280,
+      minWidth: 1280
     });
   });
   test("1440", () => {
     expect(findApplicableMedia([...media], 1440)).toStrictEqual({
-      minWidth: 1440,
+      minWidth: 1440
     });
   });
 });