@webstudio-is/css-engine 0.123.0 → 0.124.0

package/lib/index.js

@@ -88,13 +88,18 @@ var toProperty = (property) => {
 // src/core/rules.ts
 var StylePropertyMap = class {
   #styleMap = /* @__PURE__ */ new Map();
-  #isDirty = false;
+  #isDirty = true;
   #string = "";
   #indent = 0;
   #transformValue;
-  onChange;
-  constructor(transformValue) {
+  #onChange;
+  constructor(style, transformValue, onChange) {
     this.#transformValue = transformValue;
+    this.#onChange = onChange;
+    let property;
+    for (property in style) {
+      this.#styleMap.set(property, style[property]);
+    }
   }
   setTransformer(transformValue) {
     this.#transformValue = transformValue;
@@ -102,7 +107,10 @@ var StylePropertyMap = class {
   set(property, value) {
     this.#styleMap.set(property, value);
     this.#isDirty = true;
-    this.onChange?.();
+    this.#onChange?.();
+  }
+  get(property) {
+    return this.#styleMap.get(property);
   }
   has(property) {
     return this.#styleMap.has(property);
@@ -116,12 +124,12 @@ var StylePropertyMap = class {
   delete(property) {
     this.#styleMap.delete(property);
     this.#isDirty = true;
-    this.onChange?.();
+    this.#onChange?.();
   }
   clear() {
     this.#styleMap.clear();
     this.#isDirty = true;
-    this.onChange?.();
+    this.#onChange?.();
   }
   toString({ indent = 0 } = {}) {
     if (this.#isDirty === false && indent === this.#indent) {
@@ -149,19 +157,10 @@ var StylePropertyMap = class {
 var StyleRule = class {
   styleMap;
   selectorText;
-  onChange;
-  constructor(selectorText, style, transformValue) {
-    this.styleMap = new StylePropertyMap(transformValue);
+  constructor(selectorText, style, transformValue, onChange) {
     this.selectorText = selectorText;
-    let property;
-    for (property in style) {
-      this.styleMap.set(property, style[property]);
-    }
-    this.styleMap.onChange = this.#onChange;
+    this.styleMap = style instanceof StylePropertyMap ? style : new StylePropertyMap(style, transformValue, onChange);
   }
-  #onChange = () => {
-    this.onChange?.();
-  };
   get cssText() {
     return this.toString();
   }
@@ -176,25 +175,29 @@ ${spaces}}`;
 };
 var MediaRule = class {
   options;
-  rules = [];
+  rules;
   #mediaType;
   constructor(options = {}) {
     this.options = options;
+    this.rules = /* @__PURE__ */ new Map();
     this.#mediaType = options.mediaType ?? "all";
   }
   insertRule(rule) {
-    this.rules.push(rule);
+    this.rules.set(
+      "selectorText" in rule ? rule.selectorText : rule.cssText,
+      rule
+    );
     return rule;
   }
   get cssText() {
     return this.toString();
   }
   toString() {
-    if (this.rules.length === 0) {
+    if (this.rules.size === 0) {
       return "";
     }
     const rules = [];
-    for (const rule of this.rules) {
+    for (const rule of this.rules.values()) {
       rules.push(rule.toString({ indent: 2 }));
     }
     let conditionText = "";
@@ -214,9 +217,10 @@ ${rules.join(
 };
 var PlaintextRule = class {
   cssText;
-  styleMap = new StylePropertyMap();
+  styleMap;
   constructor(cssText) {
     this.cssText = cssText;
+    this.styleMap = new StylePropertyMap({});
   }
   toString() {
     return this.cssText;
@@ -306,31 +310,13 @@ var StyleElement = class {
 // src/core/style-sheet.ts
 var StyleSheet = class {
   #cssText = "";
-  #element;
-  constructor(element) {
-    this.#element = element;
-  }
-  replaceSync(cssText) {
-    if (cssText !== this.#cssText) {
-      this.#cssText = cssText;
-      this.#element.render(cssText);
-    }
-  }
-};
-
-// src/core/css-engine.ts
-var defaultMediaRuleId = "__default-media-rule__";
-var CssEngine = class {
-  #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);
+  #element;
+  constructor(element) {
+    this.#element = element;
   }
   addMediaRule(id, options) {
     let mediaRule = this.#mediaRules.get(id);
@@ -344,18 +330,10 @@ var CssEngine = class {
       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;
+    return mediaRule;
   }
   addPlaintextRule(cssText) {
     const rule = this.#plainRules.get(cssText);
@@ -369,25 +347,9 @@ var CssEngine = class {
     this.#isDirty = true;
     return this.#fontFaceRules.push(new FontFaceRule(options));
   }
-  clear() {
-    this.#mediaRules.clear();
-    this.#plainRules.clear();
-    this.#fontFaceRules = [];
+  markAsDirty() {
     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;
@@ -410,14 +372,92 @@ var CssEngine = class {
     this.#cssText = css.join("\n");
     return this.#cssText;
   }
-  #onChangeRule = () => {
+  clear() {
+    this.#mediaRules.clear();
+    this.#plainRules.clear();
+    this.#fontFaceRules = [];
     this.#isDirty = true;
+  }
+  render() {
+    this.#element.mount();
+    this.#element.render(this.cssText);
+  }
+  unmount() {
+    this.#element.unmount();
+  }
+  setAttribute(name, value) {
+    this.#element.setAttribute(name, value);
+  }
+  getAttribute(name) {
+    return this.#element.getAttribute(name);
+  }
+};
+
+// src/core/style-sheet-regular.ts
+var defaultMediaRuleId = "__default-media-rule__";
+var StyleSheetRegular = class extends StyleSheet {
+  addStyleRule(rule, selectorText, transformValue) {
+    const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
+    this.markAsDirty();
+    const styleRule = new StyleRule(
+      selectorText,
+      rule.style,
+      transformValue,
+      this.#onChangeRule
+    );
+    mediaRule.insertRule(styleRule);
+    return styleRule;
+  }
+  #onChangeRule = () => {
+    this.markAsDirty();
   };
 };
 
-// src/core/create-css-engine.ts
-var createCssEngine = (options = {}) => {
-  return new CssEngine(options);
+// src/core/style-sheet-atomic.ts
+import hash from "@emotion/hash";
+var defaultMediaRuleId2 = "__default-media-rule__";
+var StyleSheetAtomic = class extends StyleSheet {
+  addStyleRule({ style, breakpoint }, selectorSuffix = "", transformValue) {
+    const mediaRule = this.addMediaRule(breakpoint || defaultMediaRuleId2);
+    const styleRules = [];
+    const classes = [];
+    let property;
+    for (property in style) {
+      const stylePropertyMap = new StylePropertyMap(
+        { [property]: style[property] },
+        transformValue
+      );
+      const className = `c${hash(
+        stylePropertyMap + selectorSuffix + breakpoint
+      )}`;
+      classes.push(className);
+      const newStyleRule = new StyleRule(
+        `.${className}${selectorSuffix}`,
+        stylePropertyMap,
+        transformValue,
+        this.#onChangeRule
+      );
+      styleRules.push(newStyleRule);
+      if (mediaRule.rules.has(newStyleRule.selectorText) === false) {
+        mediaRule.insertRule(newStyleRule);
+        this.markAsDirty();
+      }
+    }
+    return { styleRules, classes };
+  }
+  #onChangeRule = () => {
+    this.markAsDirty();
+  };
+};
+
+// src/core/create-style-sheet.ts
+var createRegularStyleSheet = (options) => {
+  const element = new StyleElement(options?.name);
+  return new StyleSheetRegular(element);
+};
+var createAtomicStyleSheet = (options) => {
+  const element = new StyleElement(options?.name);
+  return new StyleSheetAtomic(element);
 };
 
 // src/core/match-media.ts
@@ -541,7 +581,6 @@ var StyleValue = z.union([
 ]);
 var Style = z.record(z.string(), StyleValue);
 export {
-  CssEngine,
   ImageValue,
   InvalidValue,
   KeywordValue,
@@ -552,7 +591,8 @@ export {
   UnitValue,
   UnparsedValue,
   compareMedia,
-  createCssEngine,
+  createAtomicStyleSheet,
+  createRegularStyleSheet,
   equalMedia,
   findApplicableMedia,
   isValidStaticStyleValue,

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

@@ -0,0 +1,8 @@
+import { StyleSheetRegular } from "./style-sheet-regular";
+import { StyleSheetAtomic } from "./style-sheet-atomic";
+export declare const createRegularStyleSheet: (options?: {
+    name?: string;
+}) => StyleSheetRegular;
+export declare const createAtomicStyleSheet: (options?: {
+    name?: string;
+}) => StyleSheetAtomic;

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

@@ -1,6 +1,7 @@
-export { CssEngine } from "./css-engine";
 export type { AnyRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
-export * from "./create-css-engine";
+export type { StyleSheetRegular } from "./style-sheet-regular";
+export type { StyleSheetAtomic } from "./style-sheet-atomic";
+export * from "./create-style-sheet";
 export * from "./to-value";
 export * from "./to-property";
 export * from "./match-media";

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

@@ -1,11 +1,219 @@
 import type { Style, StyleProperty, StyleValue } from "../schema";
 import { type TransformValue } from "./to-value";
-declare class StylePropertyMap {
+export declare class StylePropertyMap {
     #private;
-    onChange?: () => void;
-    constructor(transformValue?: TransformValue);
+    constructor(style: Style, transformValue?: TransformValue, onChange?: () => void);
     setTransformer(transformValue: TransformValue): void;
     set(property: StyleProperty, value?: StyleValue): void;
+    get(property: StyleProperty): {
+        type: "unit";
+        value: number;
+        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+    } | {
+        type: "keyword";
+        value: string;
+    } | {
+        type: "unparsed";
+        value: string;
+        hidden?: boolean | undefined;
+    } | {
+        type: "fontFamily";
+        value: string[];
+    } | {
+        type: "rgb";
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    } | {
+        type: "image";
+        value: {
+            type: "asset";
+            value: string;
+        } | {
+            type: "url";
+            url: string;
+        };
+        hidden?: boolean | undefined;
+    } | {
+        type: "invalid";
+        value: string;
+    } | {
+        type: "unset";
+        value: "";
+    } | {
+        type: "tuple";
+        value: ({
+            type: "unit";
+            value: number;
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            type: "keyword";
+            value: string;
+        } | {
+            type: "unparsed";
+            value: string;
+            hidden?: boolean | undefined;
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        })[];
+        hidden?: boolean | undefined;
+    } | {
+        type: "layers";
+        value: ({
+            type: "unit";
+            value: number;
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            type: "keyword";
+            value: string;
+        } | {
+            type: "unparsed";
+            value: string;
+            hidden?: boolean | undefined;
+        } | {
+            type: "image";
+            value: {
+                type: "asset";
+                value: string;
+            } | {
+                type: "url";
+                url: string;
+            };
+            hidden?: boolean | undefined;
+        } | {
+            type: "invalid";
+            value: string;
+        } | {
+            type: "tuple";
+            value: ({
+                type: "unit";
+                value: number;
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                type: "unparsed";
+                value: string;
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            })[];
+            hidden?: boolean | undefined;
+        })[];
+    } | {
+        type: "var";
+        value: string;
+        fallbacks: ({
+            type: "unit";
+            value: number;
+            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+        } | {
+            type: "keyword";
+            value: string;
+        } | {
+            type: "unparsed";
+            value: string;
+            hidden?: boolean | undefined;
+        } | {
+            type: "fontFamily";
+            value: string[];
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        } | {
+            type: "image";
+            value: {
+                type: "asset";
+                value: string;
+            } | {
+                type: "url";
+                url: string;
+            };
+            hidden?: boolean | undefined;
+        } | {
+            type: "tuple";
+            value: ({
+                type: "unit";
+                value: number;
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                type: "unparsed";
+                value: string;
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            })[];
+            hidden?: boolean | undefined;
+        } | {
+            type: "layers";
+            value: ({
+                type: "unit";
+                value: number;
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                type: "unparsed";
+                value: string;
+                hidden?: boolean | undefined;
+            } | {
+                type: "image";
+                value: {
+                    type: "asset";
+                    value: string;
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                hidden?: boolean | undefined;
+            } | {
+                type: "invalid";
+                value: string;
+            } | {
+                type: "tuple";
+                value: ({
+                    type: "unit";
+                    value: number;
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    type: "keyword";
+                    value: string;
+                } | {
+                    type: "unparsed";
+                    value: string;
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    r: number;
+                    g: number;
+                    b: number;
+                    alpha: number;
+                })[];
+                hidden?: boolean | undefined;
+            })[];
+        })[];
+    } | undefined;
     has(property: StyleProperty): boolean;
     get size(): number;
     keys(): IterableIterator<StyleProperty>;
@@ -16,11 +224,9 @@ declare class StylePropertyMap {
     }): string;
 }
 export declare class StyleRule {
-    #private;
     styleMap: StylePropertyMap;
     selectorText: string;
-    onChange?: () => void;
-    constructor(selectorText: string, style: Style, transformValue?: TransformValue);
+    constructor(selectorText: string, style: StylePropertyMap | Style, transformValue?: TransformValue, onChange?: () => void);
     get cssText(): string;
     toString(options?: {
         indent: number;
@@ -34,7 +240,7 @@ export type MediaRuleOptions = {
 export declare class MediaRule {
     #private;
     options: MediaRuleOptions;
-    rules: Array<StyleRule | PlaintextRule>;
+    rules: Map<string, StyleRule | PlaintextRule>;
     constructor(options?: MediaRuleOptions);
     insertRule(rule: StyleRule | PlaintextRule): StyleRule | PlaintextRule;
     get cssText(): string;
@@ -60,4 +266,3 @@ export declare class FontFaceRule {
     toString(): string;
 }
 export type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;
-export {};

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

@@ -0,0 +1,10 @@
+import { StyleRule } from "./rules";
+import type { TransformValue } from "./to-value";
+import { StyleSheet, type CssRule } from "./style-sheet";
+export declare class StyleSheetAtomic extends StyleSheet {
+    #private;
+    addStyleRule({ style, breakpoint }: CssRule, selectorSuffix?: string, transformValue?: TransformValue): {
+        styleRules: StyleRule[];
+        classes: string[];
+    };
+}

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

@@ -0,0 +1,7 @@
+import { StyleRule } from "./rules";
+import type { TransformValue } from "./to-value";
+import { StyleSheet, type CssRule } from "./style-sheet";
+export declare class StyleSheetRegular extends StyleSheet {
+    #private;
+    addStyleRule(rule: CssRule, selectorText: string, transformValue?: TransformValue): StyleRule;
+}

package/lib/types/core/style-sheet-regular.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,21 @@
-import type { StyleElement } from "./style-element";
+import type { Style } from "../schema";
+import { MediaRule, PlaintextRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
+import { StyleElement } from "./style-element";
+export type CssRule = {
+    style: Style;
+    breakpoint?: string;
+};
 export declare class StyleSheet {
     #private;
     constructor(element: StyleElement);
-    replaceSync(cssText: string): void;
+    addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
+    addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
+    addFontFaceRule(options: FontFaceOptions): number;
+    markAsDirty(): void;
+    get cssText(): string;
+    clear(): void;
+    render(): void;
+    unmount(): void;
+    setAttribute(name: string, value: string): void;
+    getAttribute(name: string): string | null | undefined;
 }

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.123.0",
+  "version": "0.124.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
+    "@emotion/hash": "^0.9.1",
     "hyphenate-style-name": "^1.0.4",
-    "@webstudio-is/error-utils": "0.123.0",
-    "@webstudio-is/fonts": "0.123.0"
+    "@webstudio-is/error-utils": "0.124.0",
+    "@webstudio-is/fonts": "0.124.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -19,8 +20,8 @@
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
     "@webstudio-is/jest-config": "1.0.7",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/storybook-config": "0.0.0"
+    "@webstudio-is/storybook-config": "0.0.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "exports": {
     "webstudio": "./src/index.ts",

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

@@ -1,2 +0,0 @@
-import { CssEngine, type CssEngineOptions } from "./css-engine";
-export declare const createCssEngine: (options?: CssEngineOptions) => CssEngine;

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

@@ -1,25 +0,0 @@
-import type { Style } from "../schema";
-import { MediaRule, PlaintextRule, StyleRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
-import type { TransformValue } from "./to-value";
-type CssRule = {
-    style: Style;
-    breakpoint?: string;
-};
-export type CssEngineOptions = {
-    name?: string;
-};
-export declare class CssEngine {
-    #private;
-    constructor({ name }: CssEngineOptions);
-    addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
-    addStyleRule(selectorText: string, rule: CssRule, transformValue?: TransformValue): StyleRule;
-    addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
-    addFontFaceRule(options: FontFaceOptions): number;
-    clear(): void;
-    render(): void;
-    unmount(): void;
-    setAttribute(name: string, value: string): void;
-    getAttribute(name: string): string | null | undefined;
-    get cssText(): string;
-}
-export {};