@webstudio-is/css-engine 0.81.0 → 0.83.0

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

@@ -16,24 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
 var css_engine_exports = {};
 __export(css_engine_exports, {
   CssEngine: () => CssEngine
@@ -43,42 +25,38 @@ var import_rules = require("./rules");
 var import_compare_media = require("./compare-media");
 var import_style_element = require("./style-element");
 var import_style_sheet = require("./style-sheet");
-var _element, _mediaRules, _plainRules, _fontFaceRules, _sheet, _isDirty, _cssText, _onChangeRule;
 const defaultMediaRuleId = "__default-media-rule__";
 class CssEngine {
+  #element;
+  #mediaRules = /* @__PURE__ */ new Map();
+  #plainRules = /* @__PURE__ */ new Map();
+  #fontFaceRules = [];
+  #sheet;
+  #isDirty = false;
+  #cssText = "";
   constructor({ name }) {
-    __privateAdd(this, _element, void 0);
-    __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
-    __privateAdd(this, _plainRules, /* @__PURE__ */ new Map());
-    __privateAdd(this, _fontFaceRules, []);
-    __privateAdd(this, _sheet, void 0);
-    __privateAdd(this, _isDirty, false);
-    __privateAdd(this, _cssText, "");
-    __privateAdd(this, _onChangeRule, () => {
-      __privateSet(this, _isDirty, true);
-    });
-    __privateSet(this, _element, new import_style_element.StyleElement(name));
-    __privateSet(this, _sheet, new import_style_sheet.StyleSheet(__privateGet(this, _element)));
+    this.#element = new import_style_element.StyleElement(name);
+    this.#sheet = new import_style_sheet.StyleSheet(this.#element);
   }
   addMediaRule(id, options) {
-    let mediaRule = __privateGet(this, _mediaRules).get(id);
+    let mediaRule = this.#mediaRules.get(id);
     if (mediaRule === void 0) {
       mediaRule = new import_rules.MediaRule(options);
-      __privateGet(this, _mediaRules).set(id, mediaRule);
-      __privateSet(this, _isDirty, true);
+      this.#mediaRules.set(id, mediaRule);
+      this.#isDirty = true;
       return mediaRule;
     }
     if (options) {
       mediaRule.options = options;
-      __privateSet(this, _isDirty, true);
+      this.#isDirty = true;
     }
     return mediaRule;
   }
   addStyleRule(selectorText, rule, transformValue) {
     const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
-    __privateSet(this, _isDirty, true);
+    this.#isDirty = true;
     const styleRule = new import_rules.StyleRule(selectorText, rule.style, transformValue);
-    styleRule.onChange = __privateGet(this, _onChangeRule);
+    styleRule.onChange = this.#onChangeRule;
     if (mediaRule === void 0) {
       throw new Error("No media rule found");
     }
@@ -86,47 +64,47 @@ class CssEngine {
     return styleRule;
   }
   addPlaintextRule(cssText) {
-    const rule = __privateGet(this, _plainRules).get(cssText);
+    const rule = this.#plainRules.get(cssText);
     if (rule !== void 0) {
       return rule;
     }
-    __privateSet(this, _isDirty, true);
-    return __privateGet(this, _plainRules).set(cssText, new import_rules.PlaintextRule(cssText));
+    this.#isDirty = true;
+    return this.#plainRules.set(cssText, new import_rules.PlaintextRule(cssText));
   }
   addFontFaceRule(options) {
-    __privateSet(this, _isDirty, true);
-    return __privateGet(this, _fontFaceRules).push(new import_rules.FontFaceRule(options));
+    this.#isDirty = true;
+    return this.#fontFaceRules.push(new import_rules.FontFaceRule(options));
   }
   clear() {
-    __privateGet(this, _mediaRules).clear();
-    __privateGet(this, _plainRules).clear();
-    __privateSet(this, _fontFaceRules, []);
-    __privateSet(this, _isDirty, true);
+    this.#mediaRules.clear();
+    this.#plainRules.clear();
+    this.#fontFaceRules = [];
+    this.#isDirty = true;
   }
   render() {
-    __privateGet(this, _element).mount();
-    __privateGet(this, _sheet).replaceSync(this.cssText);
+    this.#element.mount();
+    this.#sheet.replaceSync(this.cssText);
   }
   unmount() {
-    __privateGet(this, _element).unmount();
+    this.#element.unmount();
   }
   setAttribute(name, value) {
-    __privateGet(this, _element).setAttribute(name, value);
+    this.#element.setAttribute(name, value);
   }
   getAttribute(name) {
-    return __privateGet(this, _element).getAttribute(name);
+    return this.#element.getAttribute(name);
   }
   get cssText() {
-    if (__privateGet(this, _isDirty) === false) {
-      return __privateGet(this, _cssText);
+    if (this.#isDirty === false) {
+      return this.#cssText;
     }
-    __privateSet(this, _isDirty, false);
+    this.#isDirty = false;
     const css = [];
-    css.push(...__privateGet(this, _fontFaceRules).map((rule) => rule.cssText));
-    for (const plaintextRule of __privateGet(this, _plainRules).values()) {
+    css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
+    for (const plaintextRule of this.#plainRules.values()) {
       css.push(plaintextRule.cssText);
     }
-    const sortedMediaRules = Array.from(__privateGet(this, _mediaRules).values()).sort(
+    const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
       (ruleA, ruleB) => (0, import_compare_media.compareMedia)(ruleA.options, ruleB.options)
     );
     for (const mediaRule of sortedMediaRules) {
@@ -135,15 +113,10 @@ class CssEngine {
         css.push(cssText);
       }
     }
-    __privateSet(this, _cssText, css.join("\n"));
-    return __privateGet(this, _cssText);
+    this.#cssText = css.join("\n");
+    return this.#cssText;
   }
+  #onChangeRule = () => {
+    this.#isDirty = true;
+  };
 }
-_element = new WeakMap();
-_mediaRules = new WeakMap();
-_plainRules = new WeakMap();
-_fontFaceRules = new WeakMap();
-_sheet = new WeakMap();
-_isDirty = new WeakMap();
-_cssText = new WeakMap();
-_onChangeRule = new WeakMap();

package/lib/cjs/core/rules.js

@@ -16,24 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
 var rules_exports = {};
 __export(rules_exports, {
   FontFaceRule: () => FontFaceRule,
@@ -44,81 +26,82 @@ __export(rules_exports, {
 module.exports = __toCommonJS(rules_exports);
 var import_to_value = require("./to-value");
 var import_to_property = require("./to-property");
-var _styleMap, _isDirty, _string, _indent, _transformValue, _onChange, _mediaType;
 class StylePropertyMap {
+  #styleMap = /* @__PURE__ */ new Map();
+  #isDirty = false;
+  #string = "";
+  #indent = 0;
+  #transformValue;
+  onChange;
   constructor(transformValue) {
-    __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
-    __privateAdd(this, _isDirty, false);
-    __privateAdd(this, _string, "");
-    __privateAdd(this, _indent, 0);
-    __privateAdd(this, _transformValue, void 0);
-    __privateSet(this, _transformValue, transformValue);
+    this.#transformValue = transformValue;
   }
   setTransformer(transformValue) {
-    __privateSet(this, _transformValue, transformValue);
+    this.#transformValue = transformValue;
   }
   set(property, value) {
-    __privateGet(this, _styleMap).set(property, value);
-    __privateSet(this, _isDirty, true);
+    this.#styleMap.set(property, value);
+    this.#isDirty = true;
     this.onChange?.();
   }
   has(property) {
-    return __privateGet(this, _styleMap).has(property);
+    return this.#styleMap.has(property);
+  }
+  get size() {
+    return this.#styleMap.size;
   }
   keys() {
-    return __privateGet(this, _styleMap).keys();
+    return this.#styleMap.keys();
   }
   delete(property) {
-    __privateGet(this, _styleMap).delete(property);
-    __privateSet(this, _isDirty, true);
+    this.#styleMap.delete(property);
+    this.#isDirty = true;
     this.onChange?.();
   }
   clear() {
-    __privateGet(this, _styleMap).clear();
-    __privateSet(this, _isDirty, true);
+    this.#styleMap.clear();
+    this.#isDirty = true;
     this.onChange?.();
   }
   toString({ indent = 0 } = {}) {
-    if (__privateGet(this, _isDirty) === false && indent === __privateGet(this, _indent)) {
-      return __privateGet(this, _string);
+    if (this.#isDirty === false && indent === this.#indent) {
+      return this.#string;
     }
-    __privateSet(this, _indent, indent);
+    this.#indent = indent;
     const block = [];
     const spaces = " ".repeat(indent);
-    for (const [property, value] of __privateGet(this, _styleMap)) {
+    for (const [property, value] of this.#styleMap) {
       if (value === void 0) {
         continue;
       }
       block.push(
         `${spaces}${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(
           value,
-          __privateGet(this, _transformValue)
+          this.#transformValue
         )}`
       );
     }
-    __privateSet(this, _string, block.join(";\n"));
-    __privateSet(this, _isDirty, false);
-    return __privateGet(this, _string);
+    this.#string = block.join(";\n");
+    this.#isDirty = false;
+    return this.#string;
   }
 }
-_styleMap = new WeakMap();
-_isDirty = new WeakMap();
-_string = new WeakMap();
-_indent = new WeakMap();
-_transformValue = new WeakMap();
 class StyleRule {
+  styleMap;
+  selectorText;
+  onChange;
   constructor(selectorText, style, transformValue) {
-    __privateAdd(this, _onChange, () => {
-      this.onChange?.();
-    });
     this.styleMap = new StylePropertyMap(transformValue);
     this.selectorText = selectorText;
     let property;
     for (property in style) {
       this.styleMap.set(property, style[property]);
     }
-    this.styleMap.onChange = __privateGet(this, _onChange);
+    this.styleMap.onChange = this.#onChange;
   }
+  #onChange = () => {
+    this.onChange?.();
+  };
   get cssText() {
     return this.toString();
   }
@@ -131,13 +114,13 @@ ${this.styleMap.toString({
 ${spaces}}`;
   }
 }
-_onChange = new WeakMap();
 class MediaRule {
+  options;
+  rules = [];
+  #mediaType;
   constructor(options = {}) {
-    this.rules = [];
-    __privateAdd(this, _mediaType, void 0);
     this.options = options;
-    __privateSet(this, _mediaType, options.mediaType ?? "all");
+    this.#mediaType = options.mediaType ?? "all";
   }
   insertRule(rule) {
     this.rules.push(rule);
@@ -162,17 +145,17 @@ class MediaRule {
     if (maxWidth !== void 0) {
       conditionText += ` and (max-width: ${maxWidth}px)`;
     }
-    return `@media ${__privateGet(this, _mediaType)}${conditionText} {
+    return `@media ${this.#mediaType}${conditionText} {
 ${rules.join(
       "\n"
     )}
 }`;
   }
 }
-_mediaType = new WeakMap();
 class PlaintextRule {
+  cssText;
+  styleMap = new StylePropertyMap();
   constructor(cssText) {
-    this.styleMap = new StylePropertyMap();
     this.cssText = cssText;
   }
   toString() {
@@ -180,6 +163,7 @@ class PlaintextRule {
   }
 }
 class FontFaceRule {
+  options;
   constructor(options) {
     this.options = options;
   }

package/lib/cjs/core/style-element.js

@@ -16,67 +16,46 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
 var style_element_exports = {};
 __export(style_element_exports, {
   StyleElement: () => StyleElement
 });
 module.exports = __toCommonJS(style_element_exports);
-var _element, _name;
 class StyleElement {
+  #element;
+  #name;
   constructor(name = "") {
-    __privateAdd(this, _element, void 0);
-    __privateAdd(this, _name, void 0);
-    __privateSet(this, _name, name);
+    this.#name = name;
   }
   get isMounted() {
-    return __privateGet(this, _element)?.parentElement != null;
+    return this.#element?.parentElement != null;
   }
   mount() {
     if (this.isMounted === false) {
-      __privateSet(this, _element, document.createElement("style"));
-      __privateGet(this, _element).setAttribute("data-webstudio", __privateGet(this, _name));
-      document.head.appendChild(__privateGet(this, _element));
+      this.#element = document.createElement("style");
+      this.#element.setAttribute("data-webstudio", this.#name);
+      document.head.appendChild(this.#element);
     }
   }
   unmount() {
     if (this.isMounted) {
-      __privateGet(this, _element)?.parentElement?.removeChild(__privateGet(this, _element));
-      __privateSet(this, _element, void 0);
+      this.#element?.parentElement?.removeChild(this.#element);
+      this.#element = void 0;
     }
   }
   render(cssText) {
-    if (__privateGet(this, _element)) {
-      __privateGet(this, _element).textContent = cssText;
+    if (this.#element) {
+      this.#element.textContent = cssText;
     }
   }
   setAttribute(name, value) {
-    if (__privateGet(this, _element)) {
-      __privateGet(this, _element).setAttribute(name, value);
+    if (this.#element) {
+      this.#element.setAttribute(name, value);
     }
   }
   getAttribute(name) {
-    if (__privateGet(this, _element)) {
-      return __privateGet(this, _element).getAttribute(name);
+    if (this.#element) {
+      return this.#element.getAttribute(name);
     }
   }
 }
-_element = new WeakMap();
-_name = new WeakMap();

package/lib/cjs/core/style-sheet.js

@@ -16,42 +16,21 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
 var style_sheet_exports = {};
 __export(style_sheet_exports, {
   StyleSheet: () => StyleSheet
 });
 module.exports = __toCommonJS(style_sheet_exports);
-var _cssText, _element;
 class StyleSheet {
+  #cssText = "";
+  #element;
   constructor(element) {
-    __privateAdd(this, _cssText, "");
-    __privateAdd(this, _element, void 0);
-    __privateSet(this, _element, element);
+    this.#element = element;
   }
   replaceSync(cssText) {
-    if (cssText !== __privateGet(this, _cssText)) {
-      __privateSet(this, _cssText, cssText);
-      __privateGet(this, _element).render(cssText);
+    if (cssText !== this.#cssText) {
+      this.#cssText = cssText;
+      this.#element.render(cssText);
     }
   }
 }
-_cssText = new WeakMap();
-_element = new WeakMap();

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

@@ -21,10 +21,8 @@ __export(to_value_exports, {
   toValue: () => toValue
 });
 module.exports = __toCommonJS(to_value_exports);
+var import_error_utils = require("@webstudio-is/error-utils");
 var import_fonts = require("@webstudio-is/fonts");
-const assertUnreachable = (_arg, errorMessage) => {
-  throw new Error(errorMessage);
-};
 const fallbackTransform = (styleValue) => {
   if (styleValue.type === "fontFamily") {
     const firstFontFamily = styleValue.value[0];
@@ -96,6 +94,5 @@ const toValue = (styleValue, transformValue) => {
   if (value.type === "tuple") {
     return value.value.map((value2) => toValue(value2, transformValue)).join(" ");
   }
-  assertUnreachable(value, `Unknown value type`);
-  throw new Error("Unknown value type");
+  return (0, import_error_utils.captureError)(new Error("Unknown value type"), value);
 };

package/lib/core/css-engine.js

@@ -1,22 +1,3 @@
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var _element, _mediaRules, _plainRules, _fontFaceRules, _sheet, _isDirty, _cssText, _onChangeRule;
 import {
   FontFaceRule,
   MediaRule,
@@ -28,39 +9,36 @@ import { StyleElement } from "./style-element";
 import { StyleSheet } from "./style-sheet";
 const defaultMediaRuleId = "__default-media-rule__";
 class CssEngine {
+  #element;
+  #mediaRules = /* @__PURE__ */ new Map();
+  #plainRules = /* @__PURE__ */ new Map();
+  #fontFaceRules = [];
+  #sheet;
+  #isDirty = false;
+  #cssText = "";
   constructor({ name }) {
-    __privateAdd(this, _element, void 0);
-    __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
-    __privateAdd(this, _plainRules, /* @__PURE__ */ new Map());
-    __privateAdd(this, _fontFaceRules, []);
-    __privateAdd(this, _sheet, void 0);
-    __privateAdd(this, _isDirty, false);
-    __privateAdd(this, _cssText, "");
-    __privateAdd(this, _onChangeRule, () => {
-      __privateSet(this, _isDirty, true);
-    });
-    __privateSet(this, _element, new StyleElement(name));
-    __privateSet(this, _sheet, new StyleSheet(__privateGet(this, _element)));
+    this.#element = new StyleElement(name);
+    this.#sheet = new StyleSheet(this.#element);
   }
   addMediaRule(id, options) {
-    let mediaRule = __privateGet(this, _mediaRules).get(id);
+    let mediaRule = this.#mediaRules.get(id);
     if (mediaRule === void 0) {
       mediaRule = new MediaRule(options);
-      __privateGet(this, _mediaRules).set(id, mediaRule);
-      __privateSet(this, _isDirty, true);
+      this.#mediaRules.set(id, mediaRule);
+      this.#isDirty = true;
       return mediaRule;
     }
     if (options) {
       mediaRule.options = options;
-      __privateSet(this, _isDirty, true);
+      this.#isDirty = true;
     }
     return mediaRule;
   }
   addStyleRule(selectorText, rule, transformValue) {
     const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
-    __privateSet(this, _isDirty, true);
+    this.#isDirty = true;
     const styleRule = new StyleRule(selectorText, rule.style, transformValue);
-    styleRule.onChange = __privateGet(this, _onChangeRule);
+    styleRule.onChange = this.#onChangeRule;
     if (mediaRule === void 0) {
       throw new Error("No media rule found");
     }
@@ -68,47 +46,47 @@ class CssEngine {
     return styleRule;
   }
   addPlaintextRule(cssText) {
-    const rule = __privateGet(this, _plainRules).get(cssText);
+    const rule = this.#plainRules.get(cssText);
     if (rule !== void 0) {
       return rule;
     }
-    __privateSet(this, _isDirty, true);
-    return __privateGet(this, _plainRules).set(cssText, new PlaintextRule(cssText));
+    this.#isDirty = true;
+    return this.#plainRules.set(cssText, new PlaintextRule(cssText));
   }
   addFontFaceRule(options) {
-    __privateSet(this, _isDirty, true);
-    return __privateGet(this, _fontFaceRules).push(new FontFaceRule(options));
+    this.#isDirty = true;
+    return this.#fontFaceRules.push(new FontFaceRule(options));
   }
   clear() {
-    __privateGet(this, _mediaRules).clear();
-    __privateGet(this, _plainRules).clear();
-    __privateSet(this, _fontFaceRules, []);
-    __privateSet(this, _isDirty, true);
+    this.#mediaRules.clear();
+    this.#plainRules.clear();
+    this.#fontFaceRules = [];
+    this.#isDirty = true;
   }
   render() {
-    __privateGet(this, _element).mount();
-    __privateGet(this, _sheet).replaceSync(this.cssText);
+    this.#element.mount();
+    this.#sheet.replaceSync(this.cssText);
   }
   unmount() {
-    __privateGet(this, _element).unmount();
+    this.#element.unmount();
   }
   setAttribute(name, value) {
-    __privateGet(this, _element).setAttribute(name, value);
+    this.#element.setAttribute(name, value);
   }
   getAttribute(name) {
-    return __privateGet(this, _element).getAttribute(name);
+    return this.#element.getAttribute(name);
   }
   get cssText() {
-    if (__privateGet(this, _isDirty) === false) {
-      return __privateGet(this, _cssText);
+    if (this.#isDirty === false) {
+      return this.#cssText;
     }
-    __privateSet(this, _isDirty, false);
+    this.#isDirty = false;
     const css = [];
-    css.push(...__privateGet(this, _fontFaceRules).map((rule) => rule.cssText));
-    for (const plaintextRule of __privateGet(this, _plainRules).values()) {
+    css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
+    for (const plaintextRule of this.#plainRules.values()) {
       css.push(plaintextRule.cssText);
     }
-    const sortedMediaRules = Array.from(__privateGet(this, _mediaRules).values()).sort(
+    const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
       (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
     );
     for (const mediaRule of sortedMediaRules) {
@@ -117,18 +95,13 @@ class CssEngine {
         css.push(cssText);
       }
     }
-    __privateSet(this, _cssText, css.join("\n"));
-    return __privateGet(this, _cssText);
+    this.#cssText = css.join("\n");
+    return this.#cssText;
   }
+  #onChangeRule = () => {
+    this.#isDirty = true;
+  };
 }
-_element = new WeakMap();
-_mediaRules = new WeakMap();
-_plainRules = new WeakMap();
-_fontFaceRules = new WeakMap();
-_sheet = new WeakMap();
-_isDirty = new WeakMap();
-_cssText = new WeakMap();
-_onChangeRule = new WeakMap();
 export {
   CssEngine
 };