@webstudio-is/css-engine 0.95.0 → 0.97.0

package/lib/core/css-engine.js

@@ -1,105 +0,0 @@
-"use strict";
-import {
-  FontFaceRule,
-  MediaRule,
-  PlaintextRule,
-  StyleRule
-} from "./rules";
-import { compareMedia } from "./compare-media";
-import { StyleElement } from "./style-element";
-import { StyleSheet } from "./style-sheet";
-const defaultMediaRuleId = "__default-media-rule__";
-export class CssEngine {
-  #element;
-  #mediaRules = /* @__PURE__ */ new Map();
-  #plainRules = /* @__PURE__ */ new Map();
-  #fontFaceRules = [];
-  #sheet;
-  #isDirty = false;
-  #cssText = "";
-  constructor({ name }) {
-    this.#element = new StyleElement(name);
-    this.#sheet = new StyleSheet(this.#element);
-  }
-  addMediaRule(id, options) {
-    let mediaRule = this.#mediaRules.get(id);
-    if (mediaRule === void 0) {
-      mediaRule = new MediaRule(options);
-      this.#mediaRules.set(id, mediaRule);
-      this.#isDirty = true;
-      return mediaRule;
-    }
-    if (options) {
-      mediaRule.options = options;
-      this.#isDirty = true;
-    }
-    return mediaRule;
-  }
-  addStyleRule(selectorText, rule, transformValue) {
-    const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
-    this.#isDirty = true;
-    const styleRule = new StyleRule(selectorText, rule.style, transformValue);
-    styleRule.onChange = this.#onChangeRule;
-    if (mediaRule === void 0) {
-      throw new Error("No media rule found");
-    }
-    mediaRule.insertRule(styleRule);
-    return styleRule;
-  }
-  addPlaintextRule(cssText) {
-    const rule = this.#plainRules.get(cssText);
-    if (rule !== void 0) {
-      return rule;
-    }
-    this.#isDirty = true;
-    return this.#plainRules.set(cssText, new PlaintextRule(cssText));
-  }
-  addFontFaceRule(options) {
-    this.#isDirty = true;
-    return this.#fontFaceRules.push(new FontFaceRule(options));
-  }
-  clear() {
-    this.#mediaRules.clear();
-    this.#plainRules.clear();
-    this.#fontFaceRules = [];
-    this.#isDirty = true;
-  }
-  render() {
-    this.#element.mount();
-    this.#sheet.replaceSync(this.cssText);
-  }
-  unmount() {
-    this.#element.unmount();
-  }
-  setAttribute(name, value) {
-    this.#element.setAttribute(name, value);
-  }
-  getAttribute(name) {
-    return this.#element.getAttribute(name);
-  }
-  get cssText() {
-    if (this.#isDirty === false) {
-      return this.#cssText;
-    }
-    this.#isDirty = false;
-    const css = [];
-    css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
-    for (const plaintextRule of this.#plainRules.values()) {
-      css.push(plaintextRule.cssText);
-    }
-    const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
-      (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
-    );
-    for (const mediaRule of sortedMediaRules) {
-      const { cssText } = mediaRule;
-      if (cssText !== "") {
-        css.push(cssText);
-      }
-    }
-    this.#cssText = css.join("\n");
-    return this.#cssText;
-  }
-  #onChangeRule = () => {
-    this.#isDirty = true;
-  };
-}

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

@@ -1,48 +0,0 @@
-"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/lib/core/css-engine.test.js

@@ -1,451 +0,0 @@
-"use strict";
-import { describe, beforeEach, test, expect } from "@jest/globals";
-import { CssEngine } from "./css-engine";
-const style0 = {
-  display: { type: "keyword", value: "block" }
-};
-const mediaRuleOptions0 = { minWidth: 0 };
-const mediaId0 = "0";
-const style1 = {
-  display: { type: "keyword", value: "flex" }
-};
-const style2 = {
-  display: { type: "keyword", value: "block" },
-  color: { type: "keyword", value: "black" }
-};
-const mediaRuleOptions1 = { minWidth: 300 };
-const mediaId1 = "1";
-describe("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"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c1 {
-          color: red
-        }
-      }"
-    `);
-  });
-  test("maxWidth media rule", () => {
-    engine.addMediaRule("0", { maxWidth: 1e3 });
-    engine.addStyleRule(".c1", {
-      style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (max-width: 1000px) {
-        .c1 {
-          color: red
-        }
-      }"
-    `);
-  });
-  test("maxWidth and maxWith media rule", () => {
-    engine.addMediaRule("0", { maxWidth: 1e3, minWidth: 360 });
-    engine.addStyleRule(".c1", {
-      style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 360px) and (max-width: 1000px) {
-        .c1 {
-          color: red
-        }
-      }"
-    `);
-  });
-  test("use default media rule when there is no matching one registered", () => {
-    engine.addStyleRule(".c", {
-      style: style0,
-      breakpoint: "x"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c {
-          display: block
-        }
-      }"
-    `);
-    engine.addStyleRule(".c1", {
-      style: { color: { type: "keyword", value: "red" } },
-      breakpoint: "x"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c {
-          display: block
-        }
-        .c1 {
-          color: red
-        }
-      }"
-    `);
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    engine.addStyleRule(".c1", {
-      style: { color: { type: "keyword", value: "blue" } },
-      breakpoint: mediaId0
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c {
-          display: block
-        }
-        .c1 {
-          color: red
-        }
-      }
-      @media all and (min-width: 0px) {
-        .c1 {
-          color: blue
-        }
-      }"
-    `);
-  });
-  test("sort media queries based on lower min-width", () => {
-    engine.addMediaRule(mediaId1, mediaRuleOptions1);
-    engine.addStyleRule(".c2", {
-      style: style1,
-      breakpoint: mediaId1
-    });
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    engine.addStyleRule(".c1", {
-      style: style0,
-      breakpoint: mediaId0
-    });
-    engine.addStyleRule(".c3", {
-      style: style0,
-      breakpoint: "x"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c3 {
-          display: block
-        }
-      }
-      @media all and (min-width: 0px) {
-        .c1 {
-          display: block
-        }
-      }
-      @media all and (min-width: 300px) {
-        .c2 {
-          display: flex
-        }
-      }"
-    `);
-  });
-  test("keep the sort order when minWidth is not defined", () => {
-    engine.addStyleRule(".c0", {
-      style: style0,
-      breakpoint: "x"
-    });
-    engine.addStyleRule(".c1", {
-      style: style1,
-      breakpoint: "x"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c0 {
-          display: block
-        }
-        .c1 {
-          display: flex
-        }
-      }"
-    `);
-    reset();
-    engine.addStyleRule(".c1", {
-      style: style1,
-      breakpoint: "x"
-    });
-    engine.addStyleRule(".c0", {
-      style: style0,
-      breakpoint: "x"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c1 {
-          display: flex
-        }
-        .c0 {
-          display: block
-        }
-      }"
-    `);
-  });
-  test("rule with multiple properties", () => {
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    engine.addStyleRule(".c", {
-      style: {
-        ...style0,
-        color: { type: "keyword", value: "red" }
-      },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          display: block;
-          color: red
-        }
-      }"
-    `);
-  });
-  test("hyphenate property", () => {
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    engine.addStyleRule(".c", {
-      style: {
-        backgroundColor: { type: "keyword", value: "red" }
-      },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          background-color: red
-        }
-      }"
-    `);
-  });
-  test("add rule", () => {
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    const rule1 = engine.addStyleRule(".c", {
-      style: {
-        ...style0,
-        color: { type: "keyword", value: "red" }
-      },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          display: block;
-          color: red
-        }
-      }"
-    `);
-    expect(rule1.cssText).toMatchInlineSnapshot(`
-      ".c {
-        display: block;
-        color: red
-      }"
-    `);
-    engine.addStyleRule(".c2", {
-      style: {
-        ...style0,
-        color: { type: "keyword", value: "green" }
-      },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          display: block;
-          color: red
-        }
-        .c2 {
-          display: block;
-          color: green
-        }
-      }"
-    `);
-  });
-  test("update rule", () => {
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    const rule = engine.addStyleRule(".c", {
-      style: {
-        ...style0,
-        color: { type: "keyword", value: "red" }
-      },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          display: block;
-          color: red
-        }
-      }"
-    `);
-    expect(rule.cssText).toMatchInlineSnapshot(`
-      ".c {
-        display: block;
-        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 {
-          display: block;
-          color: green
-        }
-      }"
-    `);
-  });
-  test("update media rule options", () => {
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    engine.addStyleRule(".c", {
-      style: {
-        color: { type: "keyword", value: "red" }
-      },
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          color: red
-        }
-      }"
-    `);
-    engine.addMediaRule(mediaId0, { minWidth: 10 });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 10px) {
-        .c {
-          color: red
-        }
-      }"
-    `);
-  });
-  test("don't override media queries", () => {
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    engine.addStyleRule(".c", {
-      style: style0,
-      breakpoint: "0"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          display: block
-        }
-      }"
-    `);
-    engine.addMediaRule(mediaId0, mediaRuleOptions0);
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c {
-          display: block
-        }
-      }"
-    `);
-  });
-  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 }");
-    engine.addPlaintextRule(".c { color: green }");
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      ".c { color: red }
-      .c { color: green }"
-    `);
-  });
-  test("font family rule", () => {
-    engine.addFontFaceRule({
-      fontFamily: "Roboto",
-      fontStyle: "normal",
-      fontWeight: 400,
-      fontDisplay: "swap",
-      src: "url(/src)"
-    });
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@font-face {
-        font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/src);
-      }"
-    `);
-  });
-  test("clear", () => {
-    engine.addStyleRule(".c", {
-      style: style0,
-      breakpoint: "0"
-    });
-    engine.clear();
-    expect(engine.cssText).toMatchInlineSnapshot(`""`);
-  });
-  test("get all rule style keys", () => {
-    const rule = engine.addStyleRule(".c", {
-      style: style2,
-      breakpoint: "0"
-    });
-    expect(Array.from(rule.styleMap.keys())).toMatchInlineSnapshot(`
-      [
-        "display",
-        "color",
-      ]
-    `);
-  });
-  test("delete style from rule", () => {
-    const rule = engine.addStyleRule(".c", {
-      style: style2,
-      breakpoint: "0"
-    });
-    rule.styleMap.delete("display");
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c {
-          color: black
-        }
-      }"
-    `);
-  });
-  test("render images with injected asset url", () => {
-    const assets = /* @__PURE__ */ new Map([
-      ["1234", { path: "foo.png" }]
-    ]);
-    const rule = engine.addStyleRule(
-      ".c",
-      {
-        style: {
-          backgroundImage: {
-            type: "image",
-            value: {
-              type: "asset",
-              value: "1234"
-            }
-          }
-        },
-        breakpoint: "0"
-      },
-      (styleValue) => {
-        if (styleValue.type === "image" && styleValue.value.type === "asset") {
-          const asset = assets.get(styleValue.value.value);
-          if (asset === void 0) {
-            return { type: "keyword", value: "none" };
-          }
-          return {
-            type: "image",
-            value: {
-              type: "url",
-              url: asset.path
-            }
-          };
-        }
-      }
-    );
-    rule.styleMap.delete("display");
-    expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c {
-          background-image: url(foo.png)
-        }
-      }"
-    `);
-  });
-});

package/lib/core/equal-media.js

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

package/lib/core/equal-media.test.js

@@ -1,29 +0,0 @@
-"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
-    );
-    expect(equalMedia({ maxWidth: 100, minWidth: 10 }, { minWidth: 10 })).toBe(
-      false
-    );
-    expect(
-      equalMedia(
-        { maxWidth: 100, minWidth: 10 },
-        { maxWidth: 100, minWidth: 10 }
-      )
-    ).toBe(true);
-  });
-});

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

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

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

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

package/lib/core/index.js

@@ -1,9 +0,0 @@
-"use strict";
-export { CssEngine } from "./css-engine";
-export * from "./create-css-engine";
-export * from "./to-value";
-export * from "./to-property";
-export * from "./match-media";
-export * from "./equal-media";
-export * from "./compare-media";
-export * from "./find-applicable-media";

package/lib/core/match-media.js

@@ -1,6 +0,0 @@
-"use strict";
-export const matchMedia = (options, width) => {
-  const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
-  const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;
-  return width >= minWidth && width <= maxWidth;
-};