@webstudio-is/css-engine 0.1.0 → 0.3.0

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

@@ -1,8 +1,4 @@
-"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();
+import { CssEngine } from "./css-engine";
+export const createCssEngine = () => {
+    return new CssEngine();
 };
-exports.createCssEngine = createCssEngine;

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

@@ -4,11 +4,12 @@ export declare class CssEngine {
     #private;
     constructor();
     addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
-    addStyleRule(selectorText: string, rule: CssRule): StyleRule | PlaintextRule;
+    addStyleRule(selectorText: string, rule: CssRule): StyleRule;
     addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
     addFontFaceRule(options: FontFaceOptions): number;
     clear(): void;
     render(): void;
+    unmount(): void;
     get cssText(): string;
 }
 //# sourceMappingURL=css-engine.d.ts.map

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

@@ -1 +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"}
+{"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;;;IAYpB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;IASnD,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO;IAYhD,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAMhC,eAAe,CAAC,OAAO,EAAE,eAAe;IAIxC,KAAK;IAML,MAAM;IAKN,OAAO;IAGP,IAAI,OAAO,WAiBV;CAKF"}

package/lib/core/css-engine.js

@@ -1,4 +1,3 @@
-"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");
@@ -11,13 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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");
+import { FontFaceRule, MediaRule, PlaintextRule, StyleRule, } from "./rules";
+import { StyleElement } from "./style-element";
+import { StyleSheet } from "./style-sheet";
 const defaultMediaRuleId = "__default-media-rule__";
-class CssEngine {
+export class CssEngine {
     constructor() {
         _CssEngine_element.set(this, void 0);
         _CssEngine_mediaRules.set(this, new Map());
@@ -29,39 +26,40 @@ class CssEngine {
         _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);
+        __classPrivateFieldSet(this, _CssEngine_element, new StyleElement(), "f");
+        __classPrivateFieldSet(this, _CssEngine_sheet, new StyleSheet(__classPrivateFieldGet(this, _CssEngine_element, "f")), "f");
     }
     addMediaRule(id, options) {
         let mediaRule = __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(id);
         if (mediaRule === undefined) {
-            mediaRule = new rules_1.MediaRule(options);
+            mediaRule = new 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);
+        const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
         __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
-        const styleRule = new rules_1.StyleRule(selectorText, rule.style);
+        const styleRule = new 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);
+        mediaRule.insertRule(styleRule);
+        return 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));
+        __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
+        return __classPrivateFieldGet(this, _CssEngine_plainRules, "f").set(cssText, new PlaintextRule(cssText));
     }
     addFontFaceRule(options) {
-        return __classPrivateFieldGet(this, _CssEngine_fontFaceRules, "f").push(new rules_1.FontFaceRule(options));
+        __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
+        return __classPrivateFieldGet(this, _CssEngine_fontFaceRules, "f").push(new FontFaceRule(options));
     }
     clear() {
         __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").clear();
@@ -74,6 +72,9 @@ class CssEngine {
         // This isn't going to do anything if the `cssText` hasn't changed.
         __classPrivateFieldGet(this, _CssEngine_sheet, "f").replaceSync(this.cssText);
     }
+    unmount() {
+        __classPrivateFieldGet(this, _CssEngine_element, "f").unmount();
+    }
     get cssText() {
         if (__classPrivateFieldGet(this, _CssEngine_isDirty, "f") === false) {
             return __classPrivateFieldGet(this, _CssEngine_cssText, "f");
@@ -93,5 +94,4 @@ class CssEngine {
         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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     component: string;
 };

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

@@ -1 +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"}
+{"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

@@ -1,9 +1,6 @@
-"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 = {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CssEngine } from "./css-engine";
+export default {
     component: "CssEngine",
 };
 const style0 = {
@@ -11,18 +8,18 @@ const style0 = {
 };
 const mediaRuleOptions0 = { minWidth: 0 };
 const mediaId = "0";
-const Basic = () => {
-    const engine = new css_engine_1.CssEngine();
+export const Basic = () => {
+    const engine = new 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: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "test", children: "Should be red" }), _jsx("button", { onClick: () => {
                     rule.styleMap.set("color", { type: "keyword", value: "green" });
                     engine.render();
-                }, children: "Make it green" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                }, children: "Make it green" }), _jsx("button", { onClick: () => {
                     engine.addStyleRule(".test", {
                         style: {
                             background: { type: "keyword", value: "yellow" },
@@ -32,4 +29,3 @@ const Basic = () => {
                     engine.render();
                 }, children: "Add rule with yellow background" })] }));
 };
-exports.Basic = Basic;

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

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const css_engine_1 = require("./css-engine");
+import { CssEngine } from "./css-engine";
 const style0 = {
     display: { type: "keyword", value: "block" },
 };
@@ -9,12 +7,12 @@ const mediaId = "0";
 describe("CssEngine", () => {
     let engine;
     beforeEach(() => {
-        engine = new css_engine_1.CssEngine();
+        engine = new CssEngine();
     });
     test("use default media rule when there is no matching one registrered", () => {
         engine.addStyleRule(".c", {
             style: style0,
-            breakpoint: "0",
+            breakpoint: "x",
         });
         expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
@@ -23,7 +21,7 @@ describe("CssEngine", () => {
     `);
         engine.addStyleRule(".c1", {
             style: { color: { type: "keyword", value: "red" } },
-            breakpoint: "0",
+            breakpoint: "x",
         });
         expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
@@ -34,7 +32,7 @@ describe("CssEngine", () => {
         engine.addMediaRule(mediaId, mediaRuleOptions0);
         engine.addStyleRule(".c1", {
             style: { color: { type: "keyword", value: "blue" } },
-            breakpoint: "0",
+            breakpoint: mediaId,
         });
         // Default media query should allways be the first to have the lowest source order specificity
         expect(engine.cssText).toMatchInlineSnapshot(`

package/lib/core/index.js

@@ -1,21 +1,3 @@
-"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);
+export { CssEngine } from "./css-engine";
+export * from "./create-css-engine";
+export * from "./to-value";

package/lib/core/rules.d.ts

@@ -3,6 +3,7 @@ declare class StylePropertyMap {
     #private;
     onChange?: () => void;
     set(property: StyleProperty, value?: StyleValue): void;
+    clear(): void;
     toString(): string;
 }
 export declare class StyleRule {

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

@@ -1 +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"}
+{"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,KAAK;IAKL,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

@@ -1,4 +1,3 @@
-"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");
@@ -10,14 +9,9 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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");
+import hyphenate from "hyphenate-style-name";
+import { toValue } from "./to-value";
 class StylePropertyMap {
     constructor() {
         _StylePropertyMap_styleMap.set(this, new Map());
@@ -29,6 +23,11 @@ class StylePropertyMap {
         __classPrivateFieldSet(this, _StylePropertyMap_isDirty, true, "f");
         this.onChange?.();
     }
+    clear() {
+        __classPrivateFieldGet(this, _StylePropertyMap_styleMap, "f").clear();
+        __classPrivateFieldSet(this, _StylePropertyMap_isDirty, true, "f");
+        this.onChange?.();
+    }
     toString() {
         if (__classPrivateFieldGet(this, _StylePropertyMap_isDirty, "f") === false) {
             return __classPrivateFieldGet(this, _StylePropertyMap_string, "f");
@@ -37,7 +36,7 @@ class StylePropertyMap {
         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)}`);
+            block.push(`${hyphenate(property)}: ${toValue(value)}`);
         }
         __classPrivateFieldSet(this, _StylePropertyMap_string, block.join("; "), "f");
         __classPrivateFieldSet(this, _StylePropertyMap_isDirty, false, "f");
@@ -45,7 +44,7 @@ class StylePropertyMap {
     }
 }
 _StylePropertyMap_styleMap = new WeakMap(), _StylePropertyMap_isDirty = new WeakMap(), _StylePropertyMap_string = new WeakMap();
-class StyleRule {
+export class StyleRule {
     constructor(selectorText, style) {
         _StyleRule_onChange.set(this, () => {
             this.onChange?.();
@@ -62,9 +61,8 @@ class StyleRule {
         return `${this.selectorText} { ${this.styleMap} }`;
     }
 }
-exports.StyleRule = StyleRule;
 _StyleRule_onChange = new WeakMap();
-class MediaRule {
+export class MediaRule {
     constructor(options = {}) {
         _MediaRule_options.set(this, void 0);
         this.rules = [];
@@ -94,16 +92,14 @@ class MediaRule {
         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 {
+export class PlaintextRule {
     constructor(cssText) {
         this.styleMap = new Map();
         this.cssText = cssText;
     }
 }
-exports.PlaintextRule = PlaintextRule;
-class FontFaceRule {
+export class FontFaceRule {
     constructor(options) {
         _FontFaceRule_options.set(this, void 0);
         __classPrivateFieldSet(this, _FontFaceRule_options, options, "f");
@@ -113,5 +109,4 @@ class FontFaceRule {
         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.js

@@ -1,4 +1,3 @@
-"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");
@@ -11,9 +10,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 {
+export class StyleElement {
     constructor() {
         _StyleElement_element.set(this, void 0);
     }
@@ -39,5 +36,4 @@ class StyleElement {
         }
     }
 }
-exports.StyleElement = StyleElement;
 _StyleElement_element = new WeakMap();

package/lib/core/style-sheet.js

@@ -1,4 +1,3 @@
-"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");
@@ -11,9 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 {
+export class StyleSheet {
     constructor(element) {
         _StyleSheet_cssText.set(this, "");
         _StyleSheet_element.set(this, void 0);
@@ -26,5 +23,4 @@ class StyleSheet {
         }
     }
 }
-exports.StyleSheet = StyleSheet;
 _StyleSheet_cssText = new WeakMap(), _StyleSheet_element = new WeakMap();

package/lib/core/to-value.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toValue = void 0;
-const fonts_1 = require("@webstudio-is/fonts");
+import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
 const defaultOptions = {
     withFallback: true,
 };
-const toValue = (value, options = defaultOptions) => {
+export const toValue = (value, options = defaultOptions) => {
     if (value === undefined)
         return "";
     if (value.type === "unit") {
@@ -16,20 +13,19 @@ const toValue = (value, options = defaultOptions) => {
             return value.value[0];
         }
         const family = value.value[0];
-        const fallbacks = fonts_1.SYSTEM_FONTS.get(family);
+        const fallbacks = SYSTEM_FONTS.get(family);
         if (Array.isArray(fallbacks)) {
             return [...value.value, ...fallbacks].join(", ");
         }
-        return [...value.value, fonts_1.DEFAULT_FONT_FALLBACK].join(", ");
+        return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
     }
     if (value.type === "var") {
         const fallbacks = [];
         for (const fallback of value.fallbacks) {
-            fallbacks.push((0, exports.toValue)(fallback, options));
+            fallbacks.push(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.js

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

package/lib/index.js

@@ -1,17 +1 @@
-"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);
+export * from "./core";

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
+  "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "checks": "yarn typecheck && yarn lint && yarn test",
     "dev": "tsup --watch",
     "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
-    "test": "jest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "storybook:run": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
+    "storybook:build": "build-storybook",
+    "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
   },
   "dependencies": {
     "hyphenate-style-name": "^1.0.4",
@@ -37,7 +39,7 @@
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9"
   },
-  "main": "lib/index.js",
+  "exports": "./lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
     "lib/*",
@@ -51,7 +53,7 @@
     "entry": [
       "src/index.ts"
     ],
-    "format": "cjs",
+    "format": "esm",
     "outDir": "lib"
   }
 }