@webstudio-is/css-engine 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Webstudio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,4 @@
+## CSS Engine
+
+This package is designed to render effectively CSS in the format produced by Webstudio Designer.
+It is using CSS variables for all dynamic parts and can render at runtime as for usage on Live Canvas in the Designer as well as for extracting a fully static style sheet for production.

package/lib/core/create-css-engine.d.ts

@@ -0,0 +1,3 @@
+import { CssEngine } from "./css-engine";
+export declare const createCssEngine: () => CssEngine;
+//# sourceMappingURL=create-css-engine.d.ts.map

package/lib/core/create-css-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-css-engine.d.ts","sourceRoot":"","sources":["../../src/core/create-css-engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,iBAE3B,CAAC"}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssEngine = void 0;
+const css_engine_1 = require("./css-engine");
+const createCssEngine = () => {
+    return new css_engine_1.CssEngine();
+};
+exports.createCssEngine = createCssEngine;

package/lib/core/css-engine.d.ts

@@ -0,0 +1,14 @@
+import type { CssRule } from "@webstudio-is/css-data";
+import { MediaRule, PlaintextRule, StyleRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
+export declare class CssEngine {
+    #private;
+    constructor();
+    addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
+    addStyleRule(selectorText: string, rule: CssRule): StyleRule | PlaintextRule;
+    addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
+    addFontFaceRule(options: FontFaceOptions): number;
+    clear(): void;
+    render(): void;
+    get cssText(): string;
+}
+//# sourceMappingURL=css-engine.d.ts.map

package/lib/core/css-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-engine.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAEL,SAAS,EACT,aAAa,EACb,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAC;AAMjB,qBAAa,SAAS;;;IAapB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;IASnD,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO;IAahD,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAKhC,eAAe,CAAC,OAAO,EAAE,eAAe;IAGxC,KAAK;IAML,MAAM;IAKN,IAAI,OAAO,WAiBV;CAKF"}

package/lib/core/css-engine.js

@@ -0,0 +1,97 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _CssEngine_element, _CssEngine_mediaRules, _CssEngine_plainRules, _CssEngine_fontFaceRules, _CssEngine_sheet, _CssEngine_isDirty, _CssEngine_cssText, _CssEngine_onChangeRule;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CssEngine = void 0;
+const rules_1 = require("./rules");
+const style_element_1 = require("./style-element");
+const style_sheet_1 = require("./style-sheet");
+const defaultMediaRuleId = "__default-media-rule__";
+class CssEngine {
+    constructor() {
+        _CssEngine_element.set(this, void 0);
+        _CssEngine_mediaRules.set(this, new Map());
+        _CssEngine_plainRules.set(this, new Map());
+        _CssEngine_fontFaceRules.set(this, []);
+        _CssEngine_sheet.set(this, void 0);
+        _CssEngine_isDirty.set(this, false);
+        _CssEngine_cssText.set(this, "");
+        _CssEngine_onChangeRule.set(this, () => {
+            __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
+        });
+        __classPrivateFieldSet(this, _CssEngine_element, new style_element_1.StyleElement(), "f");
+        __classPrivateFieldSet(this, _CssEngine_sheet, new style_sheet_1.StyleSheet(__classPrivateFieldGet(this, _CssEngine_element, "f")), "f");
+        this.addMediaRule(defaultMediaRuleId);
+    }
+    addMediaRule(id, options) {
+        let mediaRule = __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(id);
+        if (mediaRule === undefined) {
+            mediaRule = new rules_1.MediaRule(options);
+            __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").set(id, mediaRule);
+            __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
+        }
+        return mediaRule;
+    }
+    addStyleRule(selectorText, rule) {
+        const mediaRule = __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(rule.breakpoint) ??
+            __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(defaultMediaRuleId);
+        __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
+        const styleRule = new rules_1.StyleRule(selectorText, rule.style);
+        styleRule.onChange = __classPrivateFieldGet(this, _CssEngine_onChangeRule, "f");
+        if (mediaRule === undefined) {
+            // Should be impossible to reach.
+            throw new Error("No media rule found");
+        }
+        return mediaRule.insertRule(styleRule);
+    }
+    addPlaintextRule(cssText) {
+        const rule = __classPrivateFieldGet(this, _CssEngine_plainRules, "f").get(cssText);
+        if (rule !== undefined)
+            return rule;
+        return __classPrivateFieldGet(this, _CssEngine_plainRules, "f").set(cssText, new rules_1.PlaintextRule(cssText));
+    }
+    addFontFaceRule(options) {
+        return __classPrivateFieldGet(this, _CssEngine_fontFaceRules, "f").push(new rules_1.FontFaceRule(options));
+    }
+    clear() {
+        __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").clear();
+        __classPrivateFieldGet(this, _CssEngine_plainRules, "f").clear();
+        __classPrivateFieldSet(this, _CssEngine_fontFaceRules, [], "f");
+        __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
+    }
+    render() {
+        __classPrivateFieldGet(this, _CssEngine_element, "f").mount();
+        // This isn't going to do anything if the `cssText` hasn't changed.
+        __classPrivateFieldGet(this, _CssEngine_sheet, "f").replaceSync(this.cssText);
+    }
+    get cssText() {
+        if (__classPrivateFieldGet(this, _CssEngine_isDirty, "f") === false) {
+            return __classPrivateFieldGet(this, _CssEngine_cssText, "f");
+        }
+        __classPrivateFieldSet(this, _CssEngine_isDirty, false, "f");
+        const css = [];
+        css.push(...__classPrivateFieldGet(this, _CssEngine_fontFaceRules, "f").map((rule) => rule.cssText));
+        for (const plaintextRule of __classPrivateFieldGet(this, _CssEngine_plainRules, "f").values()) {
+            css.push(plaintextRule.cssText);
+        }
+        for (const mediaRule of __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").values()) {
+            const { cssText } = mediaRule;
+            if (cssText !== "")
+                css.push(cssText);
+        }
+        __classPrivateFieldSet(this, _CssEngine_cssText, css.join("\n"), "f");
+        return __classPrivateFieldGet(this, _CssEngine_cssText, "f");
+    }
+}
+exports.CssEngine = CssEngine;
+_CssEngine_element = new WeakMap(), _CssEngine_mediaRules = new WeakMap(), _CssEngine_plainRules = new WeakMap(), _CssEngine_fontFaceRules = new WeakMap(), _CssEngine_sheet = new WeakMap(), _CssEngine_isDirty = new WeakMap(), _CssEngine_cssText = new WeakMap(), _CssEngine_onChangeRule = new WeakMap();

package/lib/core/css-engine.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    component: string;
+};
+export default _default;
+export declare const Basic: () => JSX.Element;
+//# sourceMappingURL=css-engine.stories.d.ts.map

package/lib/core/css-engine.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-engine.stories.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.stories.tsx"],"names":[],"mappings":";;;AAEA,wBAEE;AASF,eAAO,MAAM,KAAK,mBAkCjB,CAAC"}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Basic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_engine_1 = require("./css-engine");
+exports.default = {
+    component: "CssEngine",
+};
+const style0 = {
+    color: { type: "keyword", value: "red" },
+};
+const mediaRuleOptions0 = { minWidth: 0 };
+const mediaId = "0";
+const Basic = () => {
+    const engine = new css_engine_1.CssEngine();
+    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    const rule = engine.addStyleRule(".test", {
+        style: style0,
+        breakpoint: "0",
+    });
+    engine.render();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "test", children: "Should be red" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    rule.styleMap.set("color", { type: "keyword", value: "green" });
+                    engine.render();
+                }, children: "Make it green" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    engine.addStyleRule(".test", {
+                        style: {
+                            background: { type: "keyword", value: "yellow" },
+                        },
+                        breakpoint: "0",
+                    });
+                    engine.render();
+                }, children: "Add rule with yellow background" })] }));
+};
+exports.Basic = Basic;

package/lib/core/css-engine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css-engine.test.d.ts.map

package/lib/core/css-engine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-engine.test.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_engine_1 = require("./css-engine");
+const style0 = {
+    display: { type: "keyword", value: "block" },
+};
+const mediaRuleOptions0 = { minWidth: 0 };
+const mediaId = "0";
+describe("CssEngine", () => {
+    let engine;
+    beforeEach(() => {
+        engine = new css_engine_1.CssEngine();
+    });
+    test("use default media rule when there is no matching one registrered", () => {
+        engine.addStyleRule(".c", {
+            style: style0,
+            breakpoint: "0",
+        });
+        expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c { display: block }
+      }"
+    `);
+        engine.addStyleRule(".c1", {
+            style: { color: { type: "keyword", value: "red" } },
+            breakpoint: "0",
+        });
+        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: "0",
+        });
+        // 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/lib/core/index.d.ts

@@ -0,0 +1,5 @@
+export { CssEngine } from "./css-engine";
+export type { AnyRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
+export * from "./create-css-engine";
+export * from "./to-value";
+//# sourceMappingURL=index.d.ts.map

package/lib/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACV,OAAO,EACP,SAAS,EACT,SAAS,EACT,aAAa,EACb,YAAY,GACb,MAAM,SAAS,CAAC;AACjB,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC"}

package/lib/core/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CssEngine = void 0;
+var css_engine_1 = require("./css-engine");
+Object.defineProperty(exports, "CssEngine", { enumerable: true, get: function () { return css_engine_1.CssEngine; } });
+__exportStar(require("./create-css-engine"), exports);
+__exportStar(require("./to-value"), exports);

package/lib/core/rules.d.ts

@@ -0,0 +1,47 @@
+import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
+declare class StylePropertyMap {
+    #private;
+    onChange?: () => void;
+    set(property: StyleProperty, value?: StyleValue): void;
+    toString(): string;
+}
+export declare class StyleRule {
+    #private;
+    styleMap: StylePropertyMap;
+    selectorText: string;
+    onChange?: () => void;
+    constructor(selectorText: string, style: Style);
+    get cssText(): string;
+}
+export declare type MediaRuleOptions = {
+    minWidth?: number;
+    maxWidth?: number;
+    mediaType?: "all" | "screen" | "print";
+};
+export declare class MediaRule {
+    #private;
+    rules: Array<StyleRule | PlaintextRule>;
+    constructor(options?: MediaRuleOptions);
+    insertRule(rule: StyleRule | PlaintextRule): StyleRule | PlaintextRule;
+    get cssText(): string;
+}
+export declare class PlaintextRule {
+    cssText: string;
+    styleMap: Map<any, any>;
+    constructor(cssText: string);
+}
+export declare type FontFaceOptions = {
+    fontFamily: string;
+    fontStyle: "normal" | "italic" | "oblique";
+    fontWeight: number;
+    fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
+    src: string;
+};
+export declare class FontFaceRule {
+    #private;
+    constructor(options: FontFaceOptions);
+    get cssText(): string;
+}
+export declare type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;
+export {};
+//# sourceMappingURL=rules.d.ts.map

package/lib/core/rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/core/rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAI/E,cAAM,gBAAgB;;IAIpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,UAAU;IAK/C,QAAQ;CAaT;AAED,qBAAa,SAAS;;IACpB,QAAQ,mBAAC;IACT,YAAY,SAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;gBACV,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK;IAY9C,IAAI,OAAO,WAEV;CACF;AAED,oBAAY,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEF,qBAAa,SAAS;;IAEpB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC,CAAM;gBAEjC,OAAO,GAAE,gBAAqB;IAI1C,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,aAAa;IAI1C,IAAI,OAAO,WAcV;CACF;AAED,qBAAa,aAAa;IACxB,OAAO,SAAC;IACR,QAAQ,gBAAa;gBACT,OAAO,EAAE,MAAM;CAG5B;AAED,oBAAY,eAAe,GAAG;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACjE,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qBAAa,YAAY;;gBAEX,OAAO,EAAE,eAAe;IAGpC,IAAI,OAAO,WAIV;CACF;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC"}

package/lib/core/rules.js

@@ -0,0 +1,117 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _StylePropertyMap_styleMap, _StylePropertyMap_isDirty, _StylePropertyMap_string, _StyleRule_onChange, _MediaRule_options, _MediaRule_mediaType, _FontFaceRule_options;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFaceRule = exports.PlaintextRule = exports.MediaRule = exports.StyleRule = void 0;
+const hyphenate_style_name_1 = __importDefault(require("hyphenate-style-name"));
+const to_value_1 = require("./to-value");
+class StylePropertyMap {
+    constructor() {
+        _StylePropertyMap_styleMap.set(this, new Map());
+        _StylePropertyMap_isDirty.set(this, false);
+        _StylePropertyMap_string.set(this, "");
+    }
+    set(property, value) {
+        __classPrivateFieldGet(this, _StylePropertyMap_styleMap, "f").set(property, value);
+        __classPrivateFieldSet(this, _StylePropertyMap_isDirty, true, "f");
+        this.onChange?.();
+    }
+    toString() {
+        if (__classPrivateFieldGet(this, _StylePropertyMap_isDirty, "f") === false) {
+            return __classPrivateFieldGet(this, _StylePropertyMap_string, "f");
+        }
+        const block = [];
+        for (const [property, value] of __classPrivateFieldGet(this, _StylePropertyMap_styleMap, "f")) {
+            if (value === undefined)
+                continue;
+            block.push(`${(0, hyphenate_style_name_1.default)(property)}: ${(0, to_value_1.toValue)(value)}`);
+        }
+        __classPrivateFieldSet(this, _StylePropertyMap_string, block.join("; "), "f");
+        __classPrivateFieldSet(this, _StylePropertyMap_isDirty, false, "f");
+        return __classPrivateFieldGet(this, _StylePropertyMap_string, "f");
+    }
+}
+_StylePropertyMap_styleMap = new WeakMap(), _StylePropertyMap_isDirty = new WeakMap(), _StylePropertyMap_string = new WeakMap();
+class StyleRule {
+    constructor(selectorText, style) {
+        _StyleRule_onChange.set(this, () => {
+            this.onChange?.();
+        });
+        this.styleMap = new StylePropertyMap();
+        this.selectorText = selectorText;
+        let property;
+        for (property in style) {
+            this.styleMap.set(property, style[property]);
+        }
+        this.styleMap.onChange = __classPrivateFieldGet(this, _StyleRule_onChange, "f");
+    }
+    get cssText() {
+        return `${this.selectorText} { ${this.styleMap} }`;
+    }
+}
+exports.StyleRule = StyleRule;
+_StyleRule_onChange = new WeakMap();
+class MediaRule {
+    constructor(options = {}) {
+        _MediaRule_options.set(this, void 0);
+        this.rules = [];
+        _MediaRule_mediaType.set(this, void 0);
+        __classPrivateFieldSet(this, _MediaRule_options, options, "f");
+        __classPrivateFieldSet(this, _MediaRule_mediaType, options.mediaType ?? "all", "f");
+    }
+    insertRule(rule) {
+        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 } = __classPrivateFieldGet(this, _MediaRule_options, "f");
+        if (minWidth !== undefined)
+            conditionText = `min-width: ${minWidth}px`;
+        if (maxWidth !== undefined)
+            conditionText = `max-width: ${maxWidth}px`;
+        if (conditionText)
+            conditionText = `and (${conditionText}) `;
+        return `@media ${__classPrivateFieldGet(this, _MediaRule_mediaType, "f")} ${conditionText}{\n${rules.join("\n")}\n}`;
+    }
+}
+exports.MediaRule = MediaRule;
+_MediaRule_options = new WeakMap(), _MediaRule_mediaType = new WeakMap();
+class PlaintextRule {
+    constructor(cssText) {
+        this.styleMap = new Map();
+        this.cssText = cssText;
+    }
+}
+exports.PlaintextRule = PlaintextRule;
+class FontFaceRule {
+    constructor(options) {
+        _FontFaceRule_options.set(this, void 0);
+        __classPrivateFieldSet(this, _FontFaceRule_options, options, "f");
+    }
+    get cssText() {
+        const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = __classPrivateFieldGet(this, _FontFaceRule_options, "f");
+        return `@font-face {\n  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};\n}`;
+    }
+}
+exports.FontFaceRule = FontFaceRule;
+_FontFaceRule_options = new WeakMap();

package/lib/core/style-element.d.ts

@@ -0,0 +1,8 @@
+export declare class StyleElement {
+    #private;
+    get isMounted(): boolean;
+    mount(): void;
+    unmount(): void;
+    render(cssText: string): void;
+}
+//# sourceMappingURL=style-element.d.ts.map

package/lib/core/style-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-element.d.ts","sourceRoot":"","sources":["../../src/core/style-element.ts"],"names":[],"mappings":"AAAA,qBAAa,YAAY;;IAEvB,IAAI,SAAS,YAEZ;IACD,KAAK;IAOL,OAAO;IAMP,MAAM,CAAC,OAAO,EAAE,MAAM;CAKvB"}

package/lib/core/style-element.js

@@ -0,0 +1,43 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _StyleElement_element;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleElement = void 0;
+class StyleElement {
+    constructor() {
+        _StyleElement_element.set(this, void 0);
+    }
+    get isMounted() {
+        return __classPrivateFieldGet(this, _StyleElement_element, "f")?.parentElement != null;
+    }
+    mount() {
+        if (this.isMounted === false) {
+            __classPrivateFieldSet(this, _StyleElement_element, document.createElement("style"), "f");
+            __classPrivateFieldGet(this, _StyleElement_element, "f").setAttribute("data-webstudio", "");
+            document.head.appendChild(__classPrivateFieldGet(this, _StyleElement_element, "f"));
+        }
+    }
+    unmount() {
+        if (this.isMounted) {
+            __classPrivateFieldGet(this, _StyleElement_element, "f")?.parentElement?.removeChild(__classPrivateFieldGet(this, _StyleElement_element, "f"));
+            __classPrivateFieldSet(this, _StyleElement_element, undefined, "f");
+        }
+    }
+    render(cssText) {
+        if (__classPrivateFieldGet(this, _StyleElement_element, "f")) {
+            __classPrivateFieldGet(this, _StyleElement_element, "f").textContent = cssText;
+        }
+    }
+}
+exports.StyleElement = StyleElement;
+_StyleElement_element = new WeakMap();

package/lib/core/style-sheet.d.ts

@@ -0,0 +1,7 @@
+import { StyleElement } from "./style-element";
+export declare class StyleSheet {
+    #private;
+    constructor(element: StyleElement);
+    replaceSync(cssText: string): void;
+}
+//# sourceMappingURL=style-sheet.d.ts.map

package/lib/core/style-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-sheet.d.ts","sourceRoot":"","sources":["../../src/core/style-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,qBAAa,UAAU;;gBAGT,OAAO,EAAE,YAAY;IAGjC,WAAW,CAAC,OAAO,EAAE,MAAM;CAM5B"}

package/lib/core/style-sheet.js

@@ -0,0 +1,30 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _StyleSheet_cssText, _StyleSheet_element;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleSheet = void 0;
+class StyleSheet {
+    constructor(element) {
+        _StyleSheet_cssText.set(this, "");
+        _StyleSheet_element.set(this, void 0);
+        __classPrivateFieldSet(this, _StyleSheet_element, element, "f");
+    }
+    replaceSync(cssText) {
+        if (cssText !== __classPrivateFieldGet(this, _StyleSheet_cssText, "f")) {
+            __classPrivateFieldSet(this, _StyleSheet_cssText, cssText, "f");
+            __classPrivateFieldGet(this, _StyleSheet_element, "f").render(cssText);
+        }
+    }
+}
+exports.StyleSheet = StyleSheet;
+_StyleSheet_cssText = new WeakMap(), _StyleSheet_element = new WeakMap();

package/lib/core/to-value.d.ts

@@ -0,0 +1,7 @@
+import type { StyleValue } from "@webstudio-is/css-data";
+declare type ToCssOptions = {
+    withFallback: boolean;
+};
+export declare const toValue: (value?: StyleValue, options?: ToCssOptions) => string;
+export {};
+//# sourceMappingURL=to-value.d.ts.map

package/lib/core/to-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-value.d.ts","sourceRoot":"","sources":["../../src/core/to-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGzD,aAAK,YAAY,GAAG;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAMF,eAAO,MAAM,OAAO,WACV,UAAU,YACT,YAAY,KACpB,MA0BF,CAAC"}

package/lib/core/to-value.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toValue = void 0;
+const fonts_1 = require("@webstudio-is/fonts");
+const defaultOptions = {
+    withFallback: true,
+};
+const toValue = (value, options = defaultOptions) => {
+    if (value === undefined)
+        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];
+        }
+        const family = value.value[0];
+        const fallbacks = fonts_1.SYSTEM_FONTS.get(family);
+        if (Array.isArray(fallbacks)) {
+            return [...value.value, ...fallbacks].join(", ");
+        }
+        return [...value.value, fonts_1.DEFAULT_FONT_FALLBACK].join(", ");
+    }
+    if (value.type === "var") {
+        const fallbacks = [];
+        for (const fallback of value.fallbacks) {
+            fallbacks.push((0, exports.toValue)(fallback, options));
+        }
+        const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
+        return `var(--${value.value}${fallbacksString})`;
+    }
+    return value.value;
+};
+exports.toValue = toValue;

package/lib/core/to-value.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=to-value.test.d.ts.map

package/lib/core/to-value.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-value.test.d.ts","sourceRoot":"","sources":["../../src/core/to-value.test.ts"],"names":[],"mappings":""}

package/lib/core/to-value.test.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const to_value_1 = require("./to-value");
+describe("Convert WS CSS Values to native CSS strings", () => {
+    test("keyword", () => {
+        const value = (0, to_value_1.toValue)({ type: "keyword", value: "red" });
+        expect(value).toBe("red");
+    });
+    test("unit", () => {
+        const value = (0, to_value_1.toValue)({ type: "unit", value: 10, unit: "px" });
+        expect(value).toBe("10px");
+    });
+    test("invalid", () => {
+        const value = (0, to_value_1.toValue)({ type: "invalid", value: "bad" });
+        expect(value).toBe("bad");
+    });
+    test("unset", () => {
+        const value = (0, to_value_1.toValue)({ type: "unset", value: "" });
+        expect(value).toBe("");
+    });
+    test("var", () => {
+        const value = (0, to_value_1.toValue)({ type: "var", value: "namespace", fallbacks: [] });
+        expect(value).toBe("var(--namespace)");
+    });
+    test("var with fallbacks", () => {
+        const value = (0, to_value_1.toValue)({
+            type: "var",
+            value: "namespace",
+            fallbacks: [
+                {
+                    type: "keyword",
+                    value: "normal",
+                },
+                {
+                    type: "unit",
+                    value: 10,
+                    unit: "px",
+                },
+            ],
+        });
+        expect(value).toBe("var(--namespace, normal, 10px)");
+    });
+    test("fontFamily", () => {
+        const value = (0, to_value_1.toValue)({
+            type: "fontFamily",
+            value: ["Courier New"],
+        });
+        expect(value).toBe("Courier New, monospace");
+    });
+    test("withFallback=false", () => {
+        const value = (0, to_value_1.toValue)({
+            type: "fontFamily",
+            value: ["Courier New"],
+        }, { withFallback: false });
+        expect(value).toBe("Courier New");
+    });
+});

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./core";
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/lib/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./core"), exports);

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@webstudio-is/css-engine",
+  "version": "0.1.0",
+  "description": "CSS Renderer for Webstudio",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "checks": "yarn typecheck && yarn lint && yarn test",
+    "dev": "tsup --watch",
+    "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
+    "test": "jest",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "storybook:run": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
+  },
+  "dependencies": {
+    "hyphenate-style-name": "^1.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "@webstudio-is/fonts": "*"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/builder-webpack4": "^6.5.6",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/manager-webpack4": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/testing-library": "^0.0.13",
+    "@webstudio-is/jest-config": "*",
+    "@webstudio-is/css-data": "*",
+    "tsup": "^6.1.3",
+    "typescript": "4.7.4",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/*",
+    "README.md",
+    "!*.test.*"
+  ],
+  "license": "MIT",
+  "private": false,
+  "sideEffects": false,
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": "cjs",
+    "outDir": "lib"
+  }
+}