@webstudio-is/css-engine 0.3.0 → 0.4.1

package/lib/core/to-value.js

@@ -1,31 +1,35 @@
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
 const defaultOptions = {
-    withFallback: true,
+  withFallback: true
 };
-export const toValue = (value, options = defaultOptions) => {
-    if (value === undefined)
-        return "";
-    if (value.type === "unit") {
-        return value.value + (value.unit === "number" ? "" : value.unit);
+const toValue = (value, options = defaultOptions) => {
+  if (value === void 0) {
+    return "";
+  }
+  if (value.type === "unit") {
+    return value.value + (value.unit === "number" ? "" : value.unit);
+  }
+  if (value.type === "fontFamily") {
+    if (options.withFallback === false) {
+      return value.value[0];
     }
-    if (value.type === "fontFamily") {
-        if (options.withFallback === false) {
-            return value.value[0];
-        }
-        const family = value.value[0];
-        const fallbacks = SYSTEM_FONTS.get(family);
-        if (Array.isArray(fallbacks)) {
-            return [...value.value, ...fallbacks].join(", ");
-        }
-        return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
+    const family = value.value[0];
+    const fallbacks = SYSTEM_FONTS.get(family);
+    if (Array.isArray(fallbacks)) {
+      return [...value.value, ...fallbacks].join(", ");
     }
-    if (value.type === "var") {
-        const fallbacks = [];
-        for (const fallback of value.fallbacks) {
-            fallbacks.push(toValue(fallback, options));
-        }
-        const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
-        return `var(--${value.value}${fallbacksString})`;
+    return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
+  }
+  if (value.type === "var") {
+    const fallbacks = [];
+    for (const fallback of value.fallbacks) {
+      fallbacks.push(toValue(fallback, options));
     }
-    return value.value;
+    const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
+    return `var(--${value.value}${fallbacksString})`;
+  }
+  return value.value;
+};
+export {
+  toValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,8 +8,8 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "checks": "yarn typecheck && yarn lint && yarn test",
-    "dev": "tsup --watch",
-    "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
+    "dev": "build-package --watch",
+    "build": "build-package",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "storybook:run": "start-storybook -p 6006",
@@ -34,26 +34,19 @@
     "@storybook/testing-library": "^0.0.13",
     "@webstudio-is/jest-config": "*",
     "@webstudio-is/css-data": "*",
-    "tsup": "^6.1.3",
+    "@webstudio-is/scripts": "*",
     "typescript": "4.7.4",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9"
   },
   "exports": "./lib/index.js",
-  "types": "lib/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "lib/*",
-    "README.md",
+    "src/*",
     "!*.test.*"
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false,
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "format": "esm",
-    "outDir": "lib"
-  }
+  "sideEffects": false
 }

package/src/core/create-css-engine.ts

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

package/src/core/css-engine.stories.tsx

@@ -0,0 +1,48 @@
+import { CssEngine } from "./css-engine";
+
+export default {
+  component: "CssEngine",
+};
+
+const style0 = {
+  color: { type: "keyword", value: "red" },
+} as const;
+
+const mediaRuleOptions0 = { minWidth: 0 } as const;
+const mediaId = "0";
+
+export const Basic = () => {
+  const engine = new CssEngine();
+  engine.addMediaRule(mediaId, mediaRuleOptions0);
+  const rule = engine.addStyleRule(".test", {
+    style: style0,
+    breakpoint: "0",
+  });
+  engine.render();
+  return (
+    <>
+      <div className="test">Should be red</div>
+      <button
+        onClick={() => {
+          rule.styleMap.set("color", { type: "keyword", value: "green" });
+          engine.render();
+        }}
+      >
+        Make it green
+      </button>
+      <button
+        onClick={() => {
+          engine.addStyleRule(".test", {
+            style: {
+              background: { type: "keyword", value: "yellow" },
+            },
+            breakpoint: "0",
+          });
+          engine.render();
+        }}
+      >
+        Add rule with yellow background
+      </button>
+    </>
+  );
+};

package/src/core/css-engine.test.ts

@@ -0,0 +1,206 @@
+import { CssEngine } from "./css-engine";
+
+const style0 = {
+  display: { type: "keyword", value: "block" },
+} as const;
+
+const mediaRuleOptions0 = { minWidth: 0 } as const;
+const mediaId = "0";
+
+describe("CssEngine", () => {
+  let engine: CssEngine;
+
+  beforeEach(() => {
+    engine = new CssEngine();
+  });
+
+  test("use default media rule when there is no matching one registrered", () => {
+    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(mediaId, mediaRuleOptions0);
+    engine.addStyleRule(".c1", {
+      style: { color: { type: "keyword", value: "blue" } },
+      breakpoint: mediaId,
+    });
+    // Default media query should allways be the first to have the lowest source order specificity
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c { display: block }
+        .c1 { color: red }
+      }
+      @media all and (min-width: 0px) {
+        .c1 { color: blue }
+      }"
+    `);
+  });
+
+  test("rule with multiple properties", () => {
+    engine.addMediaRule(mediaId, 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(mediaId, 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(mediaId, 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(mediaId, 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("don't override media queries", () => {
+    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addStyleRule(".c", {
+      style: style0,
+      breakpoint: "0",
+    });
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all and (min-width: 0px) {
+        .c { display: block }
+      }"
+    `);
+    engine.addMediaRule(mediaId, 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(`""`);
+  });
+});

package/src/core/css-engine.ts

@@ -0,0 +1,98 @@
+import type { CssRule } from "@webstudio-is/css-data";
+import {
+  FontFaceRule,
+  MediaRule,
+  PlaintextRule,
+  StyleRule,
+  type FontFaceOptions,
+  type MediaRuleOptions,
+} from "./rules";
+import { StyleElement } from "./style-element";
+import { StyleSheet } from "./style-sheet";
+
+const defaultMediaRuleId = "__default-media-rule__";
+
+export class CssEngine {
+  #element;
+  #mediaRules: Map<string, MediaRule> = new Map();
+  #plainRules: Map<string, PlaintextRule> = new Map();
+  #fontFaceRules: Array<FontFaceRule> = [];
+  #sheet: StyleSheet;
+  #isDirty = false;
+  #cssText = "";
+  constructor() {
+    this.#element = new StyleElement();
+    this.#sheet = new StyleSheet(this.#element);
+  }
+  addMediaRule(id: string, options?: MediaRuleOptions) {
+    let mediaRule = this.#mediaRules.get(id);
+    if (mediaRule === undefined) {
+      mediaRule = new MediaRule(options);
+      this.#mediaRules.set(id, mediaRule);
+      this.#isDirty = true;
+    }
+    return mediaRule;
+  }
+  addStyleRule(selectorText: string, rule: CssRule) {
+    const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
+    this.#isDirty = true;
+    const styleRule = new StyleRule(selectorText, rule.style);
+    styleRule.onChange = this.#onChangeRule;
+    if (mediaRule === undefined) {
+      // Should be impossible to reach.
+      throw new Error("No media rule found");
+    }
+    mediaRule.insertRule(styleRule);
+    return styleRule;
+  }
+  addPlaintextRule(cssText: string) {
+    const rule = this.#plainRules.get(cssText);
+    if (rule !== undefined) {
+      return rule;
+    }
+    this.#isDirty = true;
+    return this.#plainRules.set(cssText, new PlaintextRule(cssText));
+  }
+  addFontFaceRule(options: FontFaceOptions) {
+    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 isn't going to do anything if the `cssText` hasn't changed.
+    this.#sheet.replaceSync(this.cssText);
+  }
+  unmount() {
+    this.#element.unmount();
+  }
+  get cssText() {
+    if (this.#isDirty === false) {
+      return this.#cssText;
+    }
+    this.#isDirty = false;
+    const css: Array<string> = [];
+
+    css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
+    for (const plaintextRule of this.#plainRules.values()) {
+      css.push(plaintextRule.cssText);
+    }
+    for (const mediaRule of this.#mediaRules.values()) {
+      const { cssText } = mediaRule;
+      if (cssText !== "") {
+        css.push(cssText);
+      }
+    }
+    this.#cssText = css.join("\n");
+    return this.#cssText;
+  }
+
+  #onChangeRule = () => {
+    this.#isDirty = true;
+  };
+}

package/src/core/index.ts

@@ -0,0 +1,10 @@
+export { CssEngine } from "./css-engine";
+export type {
+  AnyRule,
+  StyleRule,
+  MediaRule,
+  PlaintextRule,
+  FontFaceRule,
+} from "./rules";
+export * from "./create-css-engine";
+export * from "./to-value";

package/src/core/rules.ts

@@ -0,0 +1,132 @@
+import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
+import hyphenate from "hyphenate-style-name";
+import { toValue } from "./to-value";
+
+class StylePropertyMap {
+  #styleMap: Map<StyleProperty, StyleValue | undefined> = new Map();
+  #isDirty = false;
+  #string = "";
+  onChange?: () => void;
+  set(property: StyleProperty, value?: StyleValue) {
+    this.#styleMap.set(property, value);
+    this.#isDirty = true;
+    this.onChange?.();
+  }
+  has(property: StyleProperty) {
+    return this.#styleMap.has(property);
+  }
+  clear() {
+    this.#styleMap.clear();
+    this.#isDirty = true;
+    this.onChange?.();
+  }
+  toString() {
+    if (this.#isDirty === false) {
+      return this.#string;
+    }
+    const block: Array<string> = [];
+    for (const [property, value] of this.#styleMap) {
+      if (value === undefined) {
+        continue;
+      }
+      block.push(`${hyphenate(property)}: ${toValue(value)}`);
+    }
+    this.#string = block.join("; ");
+    this.#isDirty = false;
+    return this.#string;
+  }
+}
+
+export class StyleRule {
+  styleMap;
+  selectorText;
+  onChange?: () => void;
+  constructor(selectorText: string, style: Style) {
+    this.styleMap = new StylePropertyMap();
+    this.selectorText = selectorText;
+    let property: StyleProperty;
+    for (property in style) {
+      this.styleMap.set(property, style[property]);
+    }
+    this.styleMap.onChange = this.#onChange;
+  }
+  #onChange = () => {
+    this.onChange?.();
+  };
+  get cssText() {
+    return `${this.selectorText} { ${this.styleMap} }`;
+  }
+}
+
+export type MediaRuleOptions = {
+  minWidth?: number;
+  maxWidth?: number;
+  mediaType?: "all" | "screen" | "print";
+};
+
+export class MediaRule {
+  #options: MediaRuleOptions;
+  rules: Array<StyleRule | PlaintextRule> = [];
+  #mediaType;
+  constructor(options: MediaRuleOptions = {}) {
+    this.#options = options;
+    this.#mediaType = options.mediaType ?? "all";
+  }
+  insertRule(rule: StyleRule | PlaintextRule) {
+    this.rules.push(rule);
+    return rule;
+  }
+  get cssText() {
+    if (this.rules.length === 0) {
+      return "";
+    }
+    const rules = [];
+    for (const rule of this.rules) {
+      rules.push(`  ${rule.cssText}`);
+    }
+    let conditionText = "";
+    const { minWidth, maxWidth } = this.#options;
+    if (minWidth !== undefined) {
+      conditionText = `min-width: ${minWidth}px`;
+    }
+    if (maxWidth !== undefined) {
+      conditionText = `max-width: ${maxWidth}px`;
+    }
+    if (conditionText) {
+      conditionText = `and (${conditionText}) `;
+    }
+    return `@media ${this.#mediaType} ${conditionText}{\n${rules.join(
+      "\n"
+    )}\n}`;
+  }
+}
+
+export class PlaintextRule {
+  cssText;
+  styleMap = new StylePropertyMap();
+  constructor(cssText: string) {
+    this.cssText = cssText;
+  }
+}
+
+export type FontFaceOptions = {
+  fontFamily: string;
+  fontStyle: "normal" | "italic" | "oblique";
+  fontWeight: number;
+  fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
+  src: string;
+};
+
+export class FontFaceRule {
+  #options: FontFaceOptions;
+  constructor(options: FontFaceOptions) {
+    this.#options = options;
+  }
+  get cssText() {
+    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } =
+      this.#options;
+    return `@font-face {\n  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};\n}`;
+  }
+}
+
+export type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;

package/src/core/style-element.ts

@@ -0,0 +1,24 @@
+export class StyleElement {
+  #element?: HTMLStyleElement;
+  get isMounted() {
+    return this.#element?.parentElement != null;
+  }
+  mount() {
+    if (this.isMounted === false) {
+      this.#element = document.createElement("style");
+      this.#element.setAttribute("data-webstudio", "");
+      document.head.appendChild(this.#element);
+    }
+  }
+  unmount() {
+    if (this.isMounted) {
+      this.#element?.parentElement?.removeChild(this.#element);
+      this.#element = undefined;
+    }
+  }
+  render(cssText: string) {
+    if (this.#element) {
+      this.#element.textContent = cssText;
+    }
+  }
+}

package/src/core/style-sheet.ts

@@ -0,0 +1,15 @@
+import { StyleElement } from "./style-element";
+
+export class StyleSheet {
+  #cssText = "";
+  #element;
+  constructor(element: StyleElement) {
+    this.#element = element;
+  }
+  replaceSync(cssText: string) {
+    if (cssText !== this.#cssText) {
+      this.#cssText = cssText;
+      this.#element.render(cssText);
+    }
+  }
+}