@webstudio-is/css-engine 0.3.0 → 0.4.1

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

@@ -0,0 +1,27 @@
+"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 = () => {
+  return new import_css_engine.CssEngine();
+};

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

@@ -0,0 +1,134 @@
+"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 __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
+});
+module.exports = __toCommonJS(css_engine_exports);
+var import_rules = require("./rules");
+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 {
+  constructor() {
+    __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());
+    __privateSet(this, _sheet, new import_style_sheet.StyleSheet(__privateGet(this, _element)));
+  }
+  addMediaRule(id, options) {
+    let mediaRule = __privateGet(this, _mediaRules).get(id);
+    if (mediaRule === void 0) {
+      mediaRule = new import_rules.MediaRule(options);
+      __privateGet(this, _mediaRules).set(id, mediaRule);
+      __privateSet(this, _isDirty, true);
+    }
+    return mediaRule;
+  }
+  addStyleRule(selectorText, rule) {
+    const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
+    __privateSet(this, _isDirty, true);
+    const styleRule = new import_rules.StyleRule(selectorText, rule.style);
+    styleRule.onChange = __privateGet(this, _onChangeRule);
+    if (mediaRule === void 0) {
+      throw new Error("No media rule found");
+    }
+    mediaRule.insertRule(styleRule);
+    return styleRule;
+  }
+  addPlaintextRule(cssText) {
+    const rule = __privateGet(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));
+  }
+  addFontFaceRule(options) {
+    __privateSet(this, _isDirty, true);
+    return __privateGet(this, _fontFaceRules).push(new import_rules.FontFaceRule(options));
+  }
+  clear() {
+    __privateGet(this, _mediaRules).clear();
+    __privateGet(this, _plainRules).clear();
+    __privateSet(this, _fontFaceRules, []);
+    __privateSet(this, _isDirty, true);
+  }
+  render() {
+    __privateGet(this, _element).mount();
+    __privateGet(this, _sheet).replaceSync(this.cssText);
+  }
+  unmount() {
+    __privateGet(this, _element).unmount();
+  }
+  get cssText() {
+    if (__privateGet(this, _isDirty) === false) {
+      return __privateGet(this, _cssText);
+    }
+    __privateSet(this, _isDirty, false);
+    const css = [];
+    css.push(...__privateGet(this, _fontFaceRules).map((rule) => rule.cssText));
+    for (const plaintextRule of __privateGet(this, _plainRules).values()) {
+      css.push(plaintextRule.cssText);
+    }
+    for (const mediaRule of __privateGet(this, _mediaRules).values()) {
+      const { cssText } = mediaRule;
+      if (cssText !== "") {
+        css.push(cssText);
+      }
+    }
+    __privateSet(this, _cssText, css.join("\n"));
+    return __privateGet(this, _cssText);
+  }
+}
+_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/index.cjs

@@ -0,0 +1,27 @@
+"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);

package/lib/cjs/core/rules.cjs

@@ -0,0 +1,168 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+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,
+  MediaRule: () => MediaRule,
+  PlaintextRule: () => PlaintextRule,
+  StyleRule: () => StyleRule
+});
+module.exports = __toCommonJS(rules_exports);
+var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"), 1);
+var import_to_value = require("./to-value");
+var _styleMap, _isDirty, _string, _onChange, _options, _mediaType, _options2;
+class StylePropertyMap {
+  constructor() {
+    __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
+    __privateAdd(this, _isDirty, false);
+    __privateAdd(this, _string, "");
+  }
+  set(property, value) {
+    __privateGet(this, _styleMap).set(property, value);
+    __privateSet(this, _isDirty, true);
+    this.onChange?.();
+  }
+  has(property) {
+    return __privateGet(this, _styleMap).has(property);
+  }
+  clear() {
+    __privateGet(this, _styleMap).clear();
+    __privateSet(this, _isDirty, true);
+    this.onChange?.();
+  }
+  toString() {
+    if (__privateGet(this, _isDirty) === false) {
+      return __privateGet(this, _string);
+    }
+    const block = [];
+    for (const [property, value] of __privateGet(this, _styleMap)) {
+      if (value === void 0) {
+        continue;
+      }
+      block.push(`${(0, import_hyphenate_style_name.default)(property)}: ${(0, import_to_value.toValue)(value)}`);
+    }
+    __privateSet(this, _string, block.join("; "));
+    __privateSet(this, _isDirty, false);
+    return __privateGet(this, _string);
+  }
+}
+_styleMap = new WeakMap();
+_isDirty = new WeakMap();
+_string = new WeakMap();
+class StyleRule {
+  constructor(selectorText, style) {
+    __privateAdd(this, _onChange, () => {
+      this.onChange?.();
+    });
+    this.styleMap = new StylePropertyMap();
+    this.selectorText = selectorText;
+    let property;
+    for (property in style) {
+      this.styleMap.set(property, style[property]);
+    }
+    this.styleMap.onChange = __privateGet(this, _onChange);
+  }
+  get cssText() {
+    return `${this.selectorText} { ${this.styleMap} }`;
+  }
+}
+_onChange = new WeakMap();
+class MediaRule {
+  constructor(options = {}) {
+    __privateAdd(this, _options, void 0);
+    this.rules = [];
+    __privateAdd(this, _mediaType, void 0);
+    __privateSet(this, _options, options);
+    __privateSet(this, _mediaType, options.mediaType ?? "all");
+  }
+  insertRule(rule) {
+    this.rules.push(rule);
+    return rule;
+  }
+  get cssText() {
+    if (this.rules.length === 0) {
+      return "";
+    }
+    const rules = [];
+    for (const rule of this.rules) {
+      rules.push(`  ${rule.cssText}`);
+    }
+    let conditionText = "";
+    const { minWidth, maxWidth } = __privateGet(this, _options);
+    if (minWidth !== void 0) {
+      conditionText = `min-width: ${minWidth}px`;
+    }
+    if (maxWidth !== void 0) {
+      conditionText = `max-width: ${maxWidth}px`;
+    }
+    if (conditionText) {
+      conditionText = `and (${conditionText}) `;
+    }
+    return `@media ${__privateGet(this, _mediaType)} ${conditionText}{
+${rules.join(
+      "\n"
+    )}
+}`;
+  }
+}
+_options = new WeakMap();
+_mediaType = new WeakMap();
+class PlaintextRule {
+  constructor(cssText) {
+    this.styleMap = new StylePropertyMap();
+    this.cssText = cssText;
+  }
+}
+class FontFaceRule {
+  constructor(options) {
+    __privateAdd(this, _options2, void 0);
+    __privateSet(this, _options2, options);
+  }
+  get cssText() {
+    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = __privateGet(this, _options2);
+    return `@font-face {
+  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};
+}`;
+  }
+}
+_options2 = new WeakMap();

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

@@ -0,0 +1,69 @@
+"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 __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;
+class StyleElement {
+  constructor() {
+    __privateAdd(this, _element, void 0);
+  }
+  get isMounted() {
+    return __privateGet(this, _element)?.parentElement != null;
+  }
+  mount() {
+    if (this.isMounted === false) {
+      __privateSet(this, _element, document.createElement("style"));
+      __privateGet(this, _element).setAttribute("data-webstudio", "");
+      document.head.appendChild(__privateGet(this, _element));
+    }
+  }
+  unmount() {
+    if (this.isMounted) {
+      __privateGet(this, _element)?.parentElement?.removeChild(__privateGet(this, _element));
+      __privateSet(this, _element, void 0);
+    }
+  }
+  render(cssText) {
+    if (__privateGet(this, _element)) {
+      __privateGet(this, _element).textContent = cssText;
+    }
+  }
+}
+_element = new WeakMap();

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

@@ -0,0 +1,57 @@
+"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 __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 {
+  constructor(element) {
+    __privateAdd(this, _cssText, "");
+    __privateAdd(this, _element, void 0);
+    __privateSet(this, _element, element);
+  }
+  replaceSync(cssText) {
+    if (cssText !== __privateGet(this, _cssText)) {
+      __privateSet(this, _cssText, cssText);
+      __privateGet(this, _element).render(cssText);
+    }
+  }
+}
+_cssText = new WeakMap();
+_element = new WeakMap();

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

@@ -0,0 +1,55 @@
+"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 to_value_exports = {};
+__export(to_value_exports, {
+  toValue: () => toValue
+});
+module.exports = __toCommonJS(to_value_exports);
+var import_fonts = require("@webstudio-is/fonts");
+const defaultOptions = {
+  withFallback: true
+};
+const toValue = (value, options = defaultOptions) => {
+  if (value === void 0) {
+    return "";
+  }
+  if (value.type === "unit") {
+    return value.value + (value.unit === "number" ? "" : value.unit);
+  }
+  if (value.type === "fontFamily") {
+    if (options.withFallback === false) {
+      return value.value[0];
+    }
+    const family = value.value[0];
+    const fallbacks = import_fonts.SYSTEM_FONTS.get(family);
+    if (Array.isArray(fallbacks)) {
+      return [...value.value, ...fallbacks].join(", ");
+    }
+    return [...value.value, import_fonts.DEFAULT_FONT_FALLBACK].join(", ");
+  }
+  if (value.type === "var") {
+    const fallbacks = [];
+    for (const fallback of value.fallbacks) {
+      fallbacks.push(toValue(fallback, options));
+    }
+    const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
+    return `var(--${value.value}${fallbacksString})`;
+  }
+  return value.value;
+};

package/lib/cjs/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./core"), module.exports);

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

@@ -1,4 +1,7 @@
 import { CssEngine } from "./css-engine";
-export const createCssEngine = () => {
-    return new CssEngine();
+const createCssEngine = () => {
+  return new CssEngine();
+};
+export {
+  createCssEngine
 };