@webstudio-is/css-engine 0.91.0 → 0.93.0

package/package.json

@@ -1,27 +1,25 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.91.0",
+  "version": "0.93.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
     "hyphenate-style-name": "^1.0.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@webstudio-is/css-data": "^0.91.0",
-    "@webstudio-is/error-utils": "^0.91.0",
-    "@webstudio-is/fonts": "^0.91.0"
+    "@webstudio-is/error-utils": "^0.93.0",
+    "@webstudio-is/fonts": "^0.93.0"
   },
   "devDependencies": {
-    "@jest/globals": "^29.6.2",
+    "@jest/globals": "^29.6.4",
     "@types/hyphenate-style-name": "^1.0.0",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "jest": "^29.6.2",
-    "typescript": "5.1.6",
+    "jest": "^29.6.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "5.2.2",
     "@webstudio-is/jest-config": "^1.0.7",
-    "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },
@@ -32,8 +30,7 @@
   },
   "files": [
     "lib/*",
-    "src/*",
-    "!*.test.*"
+    "!*.{test,stories}.*"
   ],
   "license": "AGPL-3.0-or-later",
   "private": false,
@@ -41,8 +38,8 @@
   "scripts": {
     "typecheck": "tsc",
     "checks": "pnpm typecheck && pnpm test",
-    "dev": "build-package --watch",
-    "build": "build-package",
+    "dev": "pnpm build --watch",
+    "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "storybook:dev": "storybook dev -p 6006",

package/lib/cjs/core/compare-media.js

@@ -1,38 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var compare_media_exports = {};
-__export(compare_media_exports, {
-  compareMedia: () => compareMedia
-});
-module.exports = __toCommonJS(compare_media_exports);
-const compareMedia = (optionA, optionB) => {
-  if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
-    return -1;
-  }
-  if (optionB.minWidth === void 0 && optionB.maxWidth === void 0) {
-    return 1;
-  }
-  if (optionA.minWidth !== void 0 && optionB.minWidth !== void 0) {
-    return optionA.minWidth - optionB.minWidth;
-  }
-  if (optionA.maxWidth !== void 0 && optionB.maxWidth !== void 0) {
-    return optionB.maxWidth - optionA.maxWidth;
-  }
-  return "minWidth" in optionA ? 1 : -1;
-};

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

@@ -1,27 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var create_css_engine_exports = {};
-__export(create_css_engine_exports, {
-  createCssEngine: () => createCssEngine
-});
-module.exports = __toCommonJS(create_css_engine_exports);
-var import_css_engine = require("./css-engine");
-const createCssEngine = (options = {}) => {
-  return new import_css_engine.CssEngine(options);
-};

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

@@ -1,122 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var css_engine_exports = {};
-__export(css_engine_exports, {
-  CssEngine: () => CssEngine
-});
-module.exports = __toCommonJS(css_engine_exports);
-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");
-const defaultMediaRuleId = "__default-media-rule__";
-class CssEngine {
-  #element;
-  #mediaRules = /* @__PURE__ */ new Map();
-  #plainRules = /* @__PURE__ */ new Map();
-  #fontFaceRules = [];
-  #sheet;
-  #isDirty = false;
-  #cssText = "";
-  constructor({ name }) {
-    this.#element = new import_style_element.StyleElement(name);
-    this.#sheet = new import_style_sheet.StyleSheet(this.#element);
-  }
-  addMediaRule(id, options) {
-    let mediaRule = this.#mediaRules.get(id);
-    if (mediaRule === void 0) {
-      mediaRule = new import_rules.MediaRule(options);
-      this.#mediaRules.set(id, mediaRule);
-      this.#isDirty = true;
-      return mediaRule;
-    }
-    if (options) {
-      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 import_rules.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;
-  }
-  addPlaintextRule(cssText) {
-    const rule = this.#plainRules.get(cssText);
-    if (rule !== void 0) {
-      return rule;
-    }
-    this.#isDirty = true;
-    return this.#plainRules.set(cssText, new import_rules.PlaintextRule(cssText));
-  }
-  addFontFaceRule(options) {
-    this.#isDirty = true;
-    return this.#fontFaceRules.push(new import_rules.FontFaceRule(options));
-  }
-  clear() {
-    this.#mediaRules.clear();
-    this.#plainRules.clear();
-    this.#fontFaceRules = [];
-    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;
-    }
-    this.#isDirty = false;
-    const css = [];
-    css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
-    for (const plaintextRule of this.#plainRules.values()) {
-      css.push(plaintextRule.cssText);
-    }
-    const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
-      (ruleA, ruleB) => (0, import_compare_media.compareMedia)(ruleA.options, ruleB.options)
-    );
-    for (const mediaRule of sortedMediaRules) {
-      const { cssText } = mediaRule;
-      if (cssText !== "") {
-        css.push(cssText);
-      }
-    }
-    this.#cssText = css.join("\n");
-    return this.#cssText;
-  }
-  #onChangeRule = () => {
-    this.#isDirty = true;
-  };
-}

package/lib/cjs/core/equal-media.js

@@ -1,26 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var equal_media_exports = {};
-__export(equal_media_exports, {
-  equalMedia: () => equalMedia
-});
-module.exports = __toCommonJS(equal_media_exports);
-const equalMedia = (left, right) => {
-  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
-};

package/lib/cjs/core/find-applicable-media.js

@@ -1,33 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var find_applicable_media_exports = {};
-__export(find_applicable_media_exports, {
-  findApplicableMedia: () => findApplicableMedia
-});
-module.exports = __toCommonJS(find_applicable_media_exports);
-var import_compare_media = require("./compare-media");
-var import_match_media = require("./match-media");
-const findApplicableMedia = (media, width) => {
-  const sortedMedia = [...media].sort(import_compare_media.compareMedia).reverse();
-  for (const options of sortedMedia) {
-    if ((0, import_match_media.matchMedia)(options, width)) {
-      return options;
-    }
-  }
-};

package/lib/cjs/core/index.js

@@ -1,32 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var core_exports = {};
-__export(core_exports, {
-  CssEngine: () => import_css_engine.CssEngine
-});
-module.exports = __toCommonJS(core_exports);
-var import_css_engine = require("./css-engine");
-__reExport(core_exports, require("./create-css-engine"), module.exports);
-__reExport(core_exports, require("./to-value"), module.exports);
-__reExport(core_exports, require("./to-property"), module.exports);
-__reExport(core_exports, require("./match-media"), module.exports);
-__reExport(core_exports, require("./equal-media"), module.exports);
-__reExport(core_exports, require("./compare-media"), module.exports);
-__reExport(core_exports, require("./find-applicable-media"), module.exports);

package/lib/cjs/core/match-media.js

@@ -1,28 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var match_media_exports = {};
-__export(match_media_exports, {
-  matchMedia: () => matchMedia
-});
-module.exports = __toCommonJS(match_media_exports);
-const matchMedia = (options, width) => {
-  const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
-  const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;
-  return width >= minWidth && width <= maxWidth;
-};

package/lib/cjs/core/rules.js

@@ -1,187 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var rules_exports = {};
-__export(rules_exports, {
-  FontFaceRule: () => FontFaceRule,
-  MediaRule: () => MediaRule,
-  PlaintextRule: () => PlaintextRule,
-  StyleRule: () => StyleRule
-});
-module.exports = __toCommonJS(rules_exports);
-var import_to_value = require("./to-value");
-var import_to_property = require("./to-property");
-class StylePropertyMap {
-  #styleMap = /* @__PURE__ */ new Map();
-  #isDirty = false;
-  #string = "";
-  #indent = 0;
-  #transformValue;
-  onChange;
-  constructor(transformValue) {
-    this.#transformValue = transformValue;
-  }
-  setTransformer(transformValue) {
-    this.#transformValue = transformValue;
-  }
-  set(property, value) {
-    this.#styleMap.set(property, value);
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  has(property) {
-    return this.#styleMap.has(property);
-  }
-  get size() {
-    return this.#styleMap.size;
-  }
-  keys() {
-    return this.#styleMap.keys();
-  }
-  delete(property) {
-    this.#styleMap.delete(property);
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  clear() {
-    this.#styleMap.clear();
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  toString({ indent = 0 } = {}) {
-    if (this.#isDirty === false && indent === this.#indent) {
-      return this.#string;
-    }
-    this.#indent = indent;
-    const block = [];
-    const spaces = " ".repeat(indent);
-    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,
-          this.#transformValue
-        )}`
-      );
-    }
-    this.#string = block.join(";\n");
-    this.#isDirty = false;
-    return this.#string;
-  }
-}
-class StyleRule {
-  styleMap;
-  selectorText;
-  onChange;
-  constructor(selectorText, style, transformValue) {
-    this.styleMap = new StylePropertyMap(transformValue);
-    this.selectorText = selectorText;
-    let property;
-    for (property in style) {
-      this.styleMap.set(property, style[property]);
-    }
-    this.styleMap.onChange = this.#onChange;
-  }
-  #onChange = () => {
-    this.onChange?.();
-  };
-  get cssText() {
-    return this.toString();
-  }
-  toString(options = { indent: 0 }) {
-    const spaces = " ".repeat(options.indent);
-    return `${spaces}${this.selectorText} {
-${this.styleMap.toString({
-      indent: options.indent + 2
-    })}
-${spaces}}`;
-  }
-}
-class MediaRule {
-  options;
-  rules = [];
-  #mediaType;
-  constructor(options = {}) {
-    this.options = options;
-    this.#mediaType = options.mediaType ?? "all";
-  }
-  insertRule(rule) {
-    this.rules.push(rule);
-    return rule;
-  }
-  get cssText() {
-    return this.toString();
-  }
-  toString() {
-    if (this.rules.length === 0) {
-      return "";
-    }
-    const rules = [];
-    for (const rule of this.rules) {
-      rules.push(rule.toString({ indent: 2 }));
-    }
-    let conditionText = "";
-    const { minWidth, maxWidth } = this.options;
-    if (minWidth !== void 0) {
-      conditionText = ` and (min-width: ${minWidth}px)`;
-    }
-    if (maxWidth !== void 0) {
-      conditionText += ` and (max-width: ${maxWidth}px)`;
-    }
-    return `@media ${this.#mediaType}${conditionText} {
-${rules.join(
-      "\n"
-    )}
-}`;
-  }
-}
-class PlaintextRule {
-  cssText;
-  styleMap = new StylePropertyMap();
-  constructor(cssText) {
-    this.cssText = cssText;
-  }
-  toString() {
-    return this.cssText;
-  }
-}
-class FontFaceRule {
-  options;
-  constructor(options) {
-    this.options = options;
-  }
-  get cssText() {
-    return this.toString();
-  }
-  toString() {
-    const decls = [];
-    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
-    decls.push(
-      `font-family: ${/\s/.test(fontFamily) ? `"${fontFamily}"` : fontFamily}`
-    );
-    decls.push(`font-style: ${fontStyle}`);
-    decls.push(`font-weight: ${fontWeight}`);
-    decls.push(`font-display: ${fontDisplay}`);
-    decls.push(`src: ${src}`);
-    return `@font-face {
-  ${decls.join("; ")};
-}`;
-  }
-}

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

@@ -1,61 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var style_element_exports = {};
-__export(style_element_exports, {
-  StyleElement: () => StyleElement
-});
-module.exports = __toCommonJS(style_element_exports);
-class StyleElement {
-  #element;
-  #name;
-  constructor(name = "") {
-    this.#name = name;
-  }
-  get isMounted() {
-    return this.#element?.parentElement != null;
-  }
-  mount() {
-    if (this.isMounted === false) {
-      this.#element = document.createElement("style");
-      this.#element.setAttribute("data-webstudio", this.#name);
-      document.head.appendChild(this.#element);
-    }
-  }
-  unmount() {
-    if (this.isMounted) {
-      this.#element?.parentElement?.removeChild(this.#element);
-      this.#element = void 0;
-    }
-  }
-  render(cssText) {
-    if (this.#element) {
-      this.#element.textContent = cssText;
-    }
-  }
-  setAttribute(name, value) {
-    if (this.#element) {
-      this.#element.setAttribute(name, value);
-    }
-  }
-  getAttribute(name) {
-    if (this.#element) {
-      return this.#element.getAttribute(name);
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var style_sheet_exports = {};
-__export(style_sheet_exports, {
-  StyleSheet: () => StyleSheet
-});
-module.exports = __toCommonJS(style_sheet_exports);
-class StyleSheet {
-  #cssText = "";
-  #element;
-  constructor(element) {
-    this.#element = element;
-  }
-  replaceSync(cssText) {
-    if (cssText !== this.#cssText) {
-      this.#cssText = cssText;
-      this.#element.render(cssText);
-    }
-  }
-}