@webstudio-is/css-engine 0.81.0 → 0.82.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/cjs/core/css-engine.js +40 -67
  2. package/lib/cjs/core/rules.js +39 -58
  3. package/lib/cjs/core/style-element.js +15 -36
  4. package/lib/cjs/core/style-sheet.js +6 -27
  5. package/lib/core/css-engine.js +40 -67
  6. package/lib/core/rules.js +39 -58
  7. package/lib/core/style-element.js +15 -36
  8. package/lib/core/style-sheet.js +6 -27
  9. package/package.json +3 -3
package/lib/cjs/core/css-engine.js CHANGED
@@ -16,24 +16,6 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var __accessCheck = (obj, member, msg) => {
20
- if (!member.has(obj))
21
- throw TypeError("Cannot " + msg);
22
- };
23
- var __privateGet = (obj, member, getter) => {
24
- __accessCheck(obj, member, "read from private field");
25
- return getter ? getter.call(obj) : member.get(obj);
26
- };
27
- var __privateAdd = (obj, member, value) => {
28
- if (member.has(obj))
29
- throw TypeError("Cannot add the same private member more than once");
30
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
31
- };
32
- var __privateSet = (obj, member, value, setter) => {
33
- __accessCheck(obj, member, "write to private field");
34
- setter ? setter.call(obj, value) : member.set(obj, value);
35
- return value;
36
- };
37
19
  var css_engine_exports = {};
38
20
  __export(css_engine_exports, {
39
21
  CssEngine: () => CssEngine
@@ -43,42 +25,38 @@ var import_rules = require("./rules");
43
25
  var import_compare_media = require("./compare-media");
44
26
  var import_style_element = require("./style-element");
45
27
  var import_style_sheet = require("./style-sheet");
46
- var _element, _mediaRules, _plainRules, _fontFaceRules, _sheet, _isDirty, _cssText, _onChangeRule;
47
28
  const defaultMediaRuleId = "__default-media-rule__";
48
29
  class CssEngine {
30
+ #element;
31
+ #mediaRules = /* @__PURE__ */ new Map();
32
+ #plainRules = /* @__PURE__ */ new Map();
33
+ #fontFaceRules = [];
34
+ #sheet;
35
+ #isDirty = false;
36
+ #cssText = "";
49
37
  constructor({ name }) {
50
- __privateAdd(this, _element, void 0);
51
- __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
52
- __privateAdd(this, _plainRules, /* @__PURE__ */ new Map());
53
- __privateAdd(this, _fontFaceRules, []);
54
- __privateAdd(this, _sheet, void 0);
55
- __privateAdd(this, _isDirty, false);
56
- __privateAdd(this, _cssText, "");
57
- __privateAdd(this, _onChangeRule, () => {
58
- __privateSet(this, _isDirty, true);
59
- });
60
- __privateSet(this, _element, new import_style_element.StyleElement(name));
61
- __privateSet(this, _sheet, new import_style_sheet.StyleSheet(__privateGet(this, _element)));
38
+ this.#element = new import_style_element.StyleElement(name);
39
+ this.#sheet = new import_style_sheet.StyleSheet(this.#element);
62
40
  }
63
41
  addMediaRule(id, options) {
64
- let mediaRule = __privateGet(this, _mediaRules).get(id);
42
+ let mediaRule = this.#mediaRules.get(id);
65
43
  if (mediaRule === void 0) {
66
44
  mediaRule = new import_rules.MediaRule(options);
67
- __privateGet(this, _mediaRules).set(id, mediaRule);
68
- __privateSet(this, _isDirty, true);
45
+ this.#mediaRules.set(id, mediaRule);
46
+ this.#isDirty = true;
69
47
  return mediaRule;
70
48
  }
71
49
  if (options) {
72
50
  mediaRule.options = options;
73
- __privateSet(this, _isDirty, true);
51
+ this.#isDirty = true;
74
52
  }
75
53
  return mediaRule;
76
54
  }
77
55
  addStyleRule(selectorText, rule, transformValue) {
78
56
  const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
79
- __privateSet(this, _isDirty, true);
57
+ this.#isDirty = true;
80
58
  const styleRule = new import_rules.StyleRule(selectorText, rule.style, transformValue);
81
- styleRule.onChange = __privateGet(this, _onChangeRule);
59
+ styleRule.onChange = this.#onChangeRule;
82
60
  if (mediaRule === void 0) {
83
61
  throw new Error("No media rule found");
84
62
  }
@@ -86,47 +64,47 @@ class CssEngine {
86
64
  return styleRule;
87
65
  }
88
66
  addPlaintextRule(cssText) {
89
- const rule = __privateGet(this, _plainRules).get(cssText);
67
+ const rule = this.#plainRules.get(cssText);
90
68
  if (rule !== void 0) {
91
69
  return rule;
92
70
  }
93
- __privateSet(this, _isDirty, true);
94
- return __privateGet(this, _plainRules).set(cssText, new import_rules.PlaintextRule(cssText));
71
+ this.#isDirty = true;
72
+ return this.#plainRules.set(cssText, new import_rules.PlaintextRule(cssText));
95
73
  }
96
74
  addFontFaceRule(options) {
97
- __privateSet(this, _isDirty, true);
98
- return __privateGet(this, _fontFaceRules).push(new import_rules.FontFaceRule(options));
75
+ this.#isDirty = true;
76
+ return this.#fontFaceRules.push(new import_rules.FontFaceRule(options));
99
77
  }
100
78
  clear() {
101
- __privateGet(this, _mediaRules).clear();
102
- __privateGet(this, _plainRules).clear();
103
- __privateSet(this, _fontFaceRules, []);
104
- __privateSet(this, _isDirty, true);
79
+ this.#mediaRules.clear();
80
+ this.#plainRules.clear();
81
+ this.#fontFaceRules = [];
82
+ this.#isDirty = true;
105
83
  }
106
84
  render() {
107
- __privateGet(this, _element).mount();
108
- __privateGet(this, _sheet).replaceSync(this.cssText);
85
+ this.#element.mount();
86
+ this.#sheet.replaceSync(this.cssText);
109
87
  }
110
88
  unmount() {
111
- __privateGet(this, _element).unmount();
89
+ this.#element.unmount();
112
90
  }
113
91
  setAttribute(name, value) {
114
- __privateGet(this, _element).setAttribute(name, value);
92
+ this.#element.setAttribute(name, value);
115
93
  }
116
94
  getAttribute(name) {
117
- return __privateGet(this, _element).getAttribute(name);
95
+ return this.#element.getAttribute(name);
118
96
  }
119
97
  get cssText() {
120
- if (__privateGet(this, _isDirty) === false) {
121
- return __privateGet(this, _cssText);
98
+ if (this.#isDirty === false) {
99
+ return this.#cssText;
122
100
  }
123
- __privateSet(this, _isDirty, false);
101
+ this.#isDirty = false;
124
102
  const css = [];
125
- css.push(...__privateGet(this, _fontFaceRules).map((rule) => rule.cssText));
126
- for (const plaintextRule of __privateGet(this, _plainRules).values()) {
103
+ css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
104
+ for (const plaintextRule of this.#plainRules.values()) {
127
105
  css.push(plaintextRule.cssText);
128
106
  }
129
- const sortedMediaRules = Array.from(__privateGet(this, _mediaRules).values()).sort(
107
+ const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
130
108
  (ruleA, ruleB) => (0, import_compare_media.compareMedia)(ruleA.options, ruleB.options)
131
109
  );
132
110
  for (const mediaRule of sortedMediaRules) {
@@ -135,15 +113,10 @@ class CssEngine {
135
113
  css.push(cssText);
136
114
  }
137
115
  }
138
- __privateSet(this, _cssText, css.join("\n"));
139
- return __privateGet(this, _cssText);
116
+ this.#cssText = css.join("\n");
117
+ return this.#cssText;
140
118
  }
119
+ #onChangeRule = () => {
120
+ this.#isDirty = true;
121
+ };
141
122
  }
142
- _element = new WeakMap();
143
- _mediaRules = new WeakMap();
144
- _plainRules = new WeakMap();
145
- _fontFaceRules = new WeakMap();
146
- _sheet = new WeakMap();
147
- _isDirty = new WeakMap();
148
- _cssText = new WeakMap();
149
- _onChangeRule = new WeakMap();
package/lib/cjs/core/rules.js CHANGED
@@ -16,24 +16,6 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var __accessCheck = (obj, member, msg) => {
20
- if (!member.has(obj))
21
- throw TypeError("Cannot " + msg);
22
- };
23
- var __privateGet = (obj, member, getter) => {
24
- __accessCheck(obj, member, "read from private field");
25
- return getter ? getter.call(obj) : member.get(obj);
26
- };
27
- var __privateAdd = (obj, member, value) => {
28
- if (member.has(obj))
29
- throw TypeError("Cannot add the same private member more than once");
30
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
31
- };
32
- var __privateSet = (obj, member, value, setter) => {
33
- __accessCheck(obj, member, "write to private field");
34
- setter ? setter.call(obj, value) : member.set(obj, value);
35
- return value;
36
- };
37
19
  var rules_exports = {};
38
20
  __export(rules_exports, {
39
21
  FontFaceRule: () => FontFaceRule,
@@ -44,81 +26,79 @@ __export(rules_exports, {
44
26
  module.exports = __toCommonJS(rules_exports);
45
27
  var import_to_value = require("./to-value");
46
28
  var import_to_property = require("./to-property");
47
- var _styleMap, _isDirty, _string, _indent, _transformValue, _onChange, _mediaType;
48
29
  class StylePropertyMap {
30
+ #styleMap = /* @__PURE__ */ new Map();
31
+ #isDirty = false;
32
+ #string = "";
33
+ #indent = 0;
34
+ #transformValue;
35
+ onChange;
49
36
  constructor(transformValue) {
50
- __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
51
- __privateAdd(this, _isDirty, false);
52
- __privateAdd(this, _string, "");
53
- __privateAdd(this, _indent, 0);
54
- __privateAdd(this, _transformValue, void 0);
55
- __privateSet(this, _transformValue, transformValue);
37
+ this.#transformValue = transformValue;
56
38
  }
57
39
  setTransformer(transformValue) {
58
- __privateSet(this, _transformValue, transformValue);
40
+ this.#transformValue = transformValue;
59
41
  }
60
42
  set(property, value) {
61
- __privateGet(this, _styleMap).set(property, value);
62
- __privateSet(this, _isDirty, true);
43
+ this.#styleMap.set(property, value);
44
+ this.#isDirty = true;
63
45
  this.onChange?.();
64
46
  }
65
47
  has(property) {
66
- return __privateGet(this, _styleMap).has(property);
48
+ return this.#styleMap.has(property);
67
49
  }
68
50
  keys() {
69
- return __privateGet(this, _styleMap).keys();
51
+ return this.#styleMap.keys();
70
52
  }
71
53
  delete(property) {
72
- __privateGet(this, _styleMap).delete(property);
73
- __privateSet(this, _isDirty, true);
54
+ this.#styleMap.delete(property);
55
+ this.#isDirty = true;
74
56
  this.onChange?.();
75
57
  }
76
58
  clear() {
77
- __privateGet(this, _styleMap).clear();
78
- __privateSet(this, _isDirty, true);
59
+ this.#styleMap.clear();
60
+ this.#isDirty = true;
79
61
  this.onChange?.();
80
62
  }
81
63
  toString({ indent = 0 } = {}) {
82
- if (__privateGet(this, _isDirty) === false && indent === __privateGet(this, _indent)) {
83
- return __privateGet(this, _string);
64
+ if (this.#isDirty === false && indent === this.#indent) {
65
+ return this.#string;
84
66
  }
85
- __privateSet(this, _indent, indent);
67
+ this.#indent = indent;
86
68
  const block = [];
87
69
  const spaces = " ".repeat(indent);
88
- for (const [property, value] of __privateGet(this, _styleMap)) {
70
+ for (const [property, value] of this.#styleMap) {
89
71
  if (value === void 0) {
90
72
  continue;
91
73
  }
92
74
  block.push(
93
75
  `${spaces}${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(
94
76
  value,
95
- __privateGet(this, _transformValue)
77
+ this.#transformValue
96
78
  )}`
97
79
  );
98
80
  }
99
- __privateSet(this, _string, block.join(";\n"));
100
- __privateSet(this, _isDirty, false);
101
- return __privateGet(this, _string);
81
+ this.#string = block.join(";\n");
82
+ this.#isDirty = false;
83
+ return this.#string;
102
84
  }
103
85
  }
104
- _styleMap = new WeakMap();
105
- _isDirty = new WeakMap();
106
- _string = new WeakMap();
107
- _indent = new WeakMap();
108
- _transformValue = new WeakMap();
109
86
  class StyleRule {
87
+ styleMap;
88
+ selectorText;
89
+ onChange;
110
90
  constructor(selectorText, style, transformValue) {
111
- __privateAdd(this, _onChange, () => {
112
- this.onChange?.();
113
- });
114
91
  this.styleMap = new StylePropertyMap(transformValue);
115
92
  this.selectorText = selectorText;
116
93
  let property;
117
94
  for (property in style) {
118
95
  this.styleMap.set(property, style[property]);
119
96
  }
120
- this.styleMap.onChange = __privateGet(this, _onChange);
97
+ this.styleMap.onChange = this.#onChange;
121
98
  }
99
+ #onChange = () => {
100
+ this.onChange?.();
101
+ };
122
102
  get cssText() {
123
103
  return this.toString();
124
104
  }
@@ -131,13 +111,13 @@ ${this.styleMap.toString({
131
111
  ${spaces}}`;
132
112
  }
133
113
  }
134
- _onChange = new WeakMap();
135
114
  class MediaRule {
115
+ options;
116
+ rules = [];
117
+ #mediaType;
136
118
  constructor(options = {}) {
137
- this.rules = [];
138
- __privateAdd(this, _mediaType, void 0);
139
119
  this.options = options;
140
- __privateSet(this, _mediaType, options.mediaType ?? "all");
120
+ this.#mediaType = options.mediaType ?? "all";
141
121
  }
142
122
  insertRule(rule) {
143
123
  this.rules.push(rule);
@@ -162,17 +142,17 @@ class MediaRule {
162
142
  if (maxWidth !== void 0) {
163
143
  conditionText += ` and (max-width: ${maxWidth}px)`;
164
144
  }
165
- return `@media ${__privateGet(this, _mediaType)}${conditionText} {
145
+ return `@media ${this.#mediaType}${conditionText} {
166
146
  ${rules.join(
167
147
  "\n"
168
148
  )}
169
149
  }`;
170
150
  }
171
151
  }
172
- _mediaType = new WeakMap();
173
152
  class PlaintextRule {
153
+ cssText;
154
+ styleMap = new StylePropertyMap();
174
155
  constructor(cssText) {
175
- this.styleMap = new StylePropertyMap();
176
156
  this.cssText = cssText;
177
157
  }
178
158
  toString() {
@@ -180,6 +160,7 @@ class PlaintextRule {
180
160
  }
181
161
  }
182
162
  class FontFaceRule {
163
+ options;
183
164
  constructor(options) {
184
165
  this.options = options;
185
166
  }
package/lib/cjs/core/style-element.js CHANGED
@@ -16,67 +16,46 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var __accessCheck = (obj, member, msg) => {
20
- if (!member.has(obj))
21
- throw TypeError("Cannot " + msg);
22
- };
23
- var __privateGet = (obj, member, getter) => {
24
- __accessCheck(obj, member, "read from private field");
25
- return getter ? getter.call(obj) : member.get(obj);
26
- };
27
- var __privateAdd = (obj, member, value) => {
28
- if (member.has(obj))
29
- throw TypeError("Cannot add the same private member more than once");
30
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
31
- };
32
- var __privateSet = (obj, member, value, setter) => {
33
- __accessCheck(obj, member, "write to private field");
34
- setter ? setter.call(obj, value) : member.set(obj, value);
35
- return value;
36
- };
37
19
  var style_element_exports = {};
38
20
  __export(style_element_exports, {
39
21
  StyleElement: () => StyleElement
40
22
  });
41
23
  module.exports = __toCommonJS(style_element_exports);
42
- var _element, _name;
43
24
  class StyleElement {
25
+ #element;
26
+ #name;
44
27
  constructor(name = "") {
45
- __privateAdd(this, _element, void 0);
46
- __privateAdd(this, _name, void 0);
47
- __privateSet(this, _name, name);
28
+ this.#name = name;
48
29
  }
49
30
  get isMounted() {
50
- return __privateGet(this, _element)?.parentElement != null;
31
+ return this.#element?.parentElement != null;
51
32
  }
52
33
  mount() {
53
34
  if (this.isMounted === false) {
54
- __privateSet(this, _element, document.createElement("style"));
55
- __privateGet(this, _element).setAttribute("data-webstudio", __privateGet(this, _name));
56
- document.head.appendChild(__privateGet(this, _element));
35
+ this.#element = document.createElement("style");
36
+ this.#element.setAttribute("data-webstudio", this.#name);
37
+ document.head.appendChild(this.#element);
57
38
  }
58
39
  }
59
40
  unmount() {
60
41
  if (this.isMounted) {
61
- __privateGet(this, _element)?.parentElement?.removeChild(__privateGet(this, _element));
62
- __privateSet(this, _element, void 0);
42
+ this.#element?.parentElement?.removeChild(this.#element);
43
+ this.#element = void 0;
63
44
  }
64
45
  }
65
46
  render(cssText) {
66
- if (__privateGet(this, _element)) {
67
- __privateGet(this, _element).textContent = cssText;
47
+ if (this.#element) {
48
+ this.#element.textContent = cssText;
68
49
  }
69
50
  }
70
51
  setAttribute(name, value) {
71
- if (__privateGet(this, _element)) {
72
- __privateGet(this, _element).setAttribute(name, value);
52
+ if (this.#element) {
53
+ this.#element.setAttribute(name, value);
73
54
  }
74
55
  }
75
56
  getAttribute(name) {
76
- if (__privateGet(this, _element)) {
77
- return __privateGet(this, _element).getAttribute(name);
57
+ if (this.#element) {
58
+ return this.#element.getAttribute(name);
78
59
  }
79
60
  }
80
61
  }
81
- _element = new WeakMap();
82
- _name = new WeakMap();
package/lib/cjs/core/style-sheet.js CHANGED
@@ -16,42 +16,21 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var __accessCheck = (obj, member, msg) => {
20
- if (!member.has(obj))
21
- throw TypeError("Cannot " + msg);
22
- };
23
- var __privateGet = (obj, member, getter) => {
24
- __accessCheck(obj, member, "read from private field");
25
- return getter ? getter.call(obj) : member.get(obj);
26
- };
27
- var __privateAdd = (obj, member, value) => {
28
- if (member.has(obj))
29
- throw TypeError("Cannot add the same private member more than once");
30
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
31
- };
32
- var __privateSet = (obj, member, value, setter) => {
33
- __accessCheck(obj, member, "write to private field");
34
- setter ? setter.call(obj, value) : member.set(obj, value);
35
- return value;
36
- };
37
19
  var style_sheet_exports = {};
38
20
  __export(style_sheet_exports, {
39
21
  StyleSheet: () => StyleSheet
40
22
  });
41
23
  module.exports = __toCommonJS(style_sheet_exports);
42
- var _cssText, _element;
43
24
  class StyleSheet {
25
+ #cssText = "";
26
+ #element;
44
27
  constructor(element) {
45
- __privateAdd(this, _cssText, "");
46
- __privateAdd(this, _element, void 0);
47
- __privateSet(this, _element, element);
28
+ this.#element = element;
48
29
  }
49
30
  replaceSync(cssText) {
50
- if (cssText !== __privateGet(this, _cssText)) {
51
- __privateSet(this, _cssText, cssText);
52
- __privateGet(this, _element).render(cssText);
31
+ if (cssText !== this.#cssText) {
32
+ this.#cssText = cssText;
33
+ this.#element.render(cssText);
53
34
  }
54
35
  }
55
36
  }
56
- _cssText = new WeakMap();
57
- _element = new WeakMap();
package/lib/core/css-engine.js CHANGED
@@ -1,22 +1,3 @@
1
- var __accessCheck = (obj, member, msg) => {
2
- if (!member.has(obj))
3
- throw TypeError("Cannot " + msg);
4
- };
5
- var __privateGet = (obj, member, getter) => {
6
- __accessCheck(obj, member, "read from private field");
7
- return getter ? getter.call(obj) : member.get(obj);
8
- };
9
- var __privateAdd = (obj, member, value) => {
10
- if (member.has(obj))
11
- throw TypeError("Cannot add the same private member more than once");
12
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
13
- };
14
- var __privateSet = (obj, member, value, setter) => {
15
- __accessCheck(obj, member, "write to private field");
16
- setter ? setter.call(obj, value) : member.set(obj, value);
17
- return value;
18
- };
19
- var _element, _mediaRules, _plainRules, _fontFaceRules, _sheet, _isDirty, _cssText, _onChangeRule;
20
1
  import {
21
2
  FontFaceRule,
22
3
  MediaRule,
@@ -28,39 +9,36 @@ import { StyleElement } from "./style-element";
28
9
  import { StyleSheet } from "./style-sheet";
29
10
  const defaultMediaRuleId = "__default-media-rule__";
30
11
  class CssEngine {
12
+ #element;
13
+ #mediaRules = /* @__PURE__ */ new Map();
14
+ #plainRules = /* @__PURE__ */ new Map();
15
+ #fontFaceRules = [];
16
+ #sheet;
17
+ #isDirty = false;
18
+ #cssText = "";
31
19
  constructor({ name }) {
32
- __privateAdd(this, _element, void 0);
33
- __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
34
- __privateAdd(this, _plainRules, /* @__PURE__ */ new Map());
35
- __privateAdd(this, _fontFaceRules, []);
36
- __privateAdd(this, _sheet, void 0);
37
- __privateAdd(this, _isDirty, false);
38
- __privateAdd(this, _cssText, "");
39
- __privateAdd(this, _onChangeRule, () => {
40
- __privateSet(this, _isDirty, true);
41
- });
42
- __privateSet(this, _element, new StyleElement(name));
43
- __privateSet(this, _sheet, new StyleSheet(__privateGet(this, _element)));
20
+ this.#element = new StyleElement(name);
21
+ this.#sheet = new StyleSheet(this.#element);
44
22
  }
45
23
  addMediaRule(id, options) {
46
- let mediaRule = __privateGet(this, _mediaRules).get(id);
24
+ let mediaRule = this.#mediaRules.get(id);
47
25
  if (mediaRule === void 0) {
48
26
  mediaRule = new MediaRule(options);
49
- __privateGet(this, _mediaRules).set(id, mediaRule);
50
- __privateSet(this, _isDirty, true);
27
+ this.#mediaRules.set(id, mediaRule);
28
+ this.#isDirty = true;
51
29
  return mediaRule;
52
30
  }
53
31
  if (options) {
54
32
  mediaRule.options = options;
55
- __privateSet(this, _isDirty, true);
33
+ this.#isDirty = true;
56
34
  }
57
35
  return mediaRule;
58
36
  }
59
37
  addStyleRule(selectorText, rule, transformValue) {
60
38
  const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
61
- __privateSet(this, _isDirty, true);
39
+ this.#isDirty = true;
62
40
  const styleRule = new StyleRule(selectorText, rule.style, transformValue);
63
- styleRule.onChange = __privateGet(this, _onChangeRule);
41
+ styleRule.onChange = this.#onChangeRule;
64
42
  if (mediaRule === void 0) {
65
43
  throw new Error("No media rule found");
66
44
  }
@@ -68,47 +46,47 @@ class CssEngine {
68
46
  return styleRule;
69
47
  }
70
48
  addPlaintextRule(cssText) {
71
- const rule = __privateGet(this, _plainRules).get(cssText);
49
+ const rule = this.#plainRules.get(cssText);
72
50
  if (rule !== void 0) {
73
51
  return rule;
74
52
  }
75
- __privateSet(this, _isDirty, true);
76
- return __privateGet(this, _plainRules).set(cssText, new PlaintextRule(cssText));
53
+ this.#isDirty = true;
54
+ return this.#plainRules.set(cssText, new PlaintextRule(cssText));
77
55
  }
78
56
  addFontFaceRule(options) {
79
- __privateSet(this, _isDirty, true);
80
- return __privateGet(this, _fontFaceRules).push(new FontFaceRule(options));
57
+ this.#isDirty = true;
58
+ return this.#fontFaceRules.push(new FontFaceRule(options));
81
59
  }
82
60
  clear() {
83
- __privateGet(this, _mediaRules).clear();
84
- __privateGet(this, _plainRules).clear();
85
- __privateSet(this, _fontFaceRules, []);
86
- __privateSet(this, _isDirty, true);
61
+ this.#mediaRules.clear();
62
+ this.#plainRules.clear();
63
+ this.#fontFaceRules = [];
64
+ this.#isDirty = true;
87
65
  }
88
66
  render() {
89
- __privateGet(this, _element).mount();
90
- __privateGet(this, _sheet).replaceSync(this.cssText);
67
+ this.#element.mount();
68
+ this.#sheet.replaceSync(this.cssText);
91
69
  }
92
70
  unmount() {
93
- __privateGet(this, _element).unmount();
71
+ this.#element.unmount();
94
72
  }
95
73
  setAttribute(name, value) {
96
- __privateGet(this, _element).setAttribute(name, value);
74
+ this.#element.setAttribute(name, value);
97
75
  }
98
76
  getAttribute(name) {
99
- return __privateGet(this, _element).getAttribute(name);
77
+ return this.#element.getAttribute(name);
100
78
  }
101
79
  get cssText() {
102
- if (__privateGet(this, _isDirty) === false) {
103
- return __privateGet(this, _cssText);
80
+ if (this.#isDirty === false) {
81
+ return this.#cssText;
104
82
  }
105
- __privateSet(this, _isDirty, false);
83
+ this.#isDirty = false;
106
84
  const css = [];
107
- css.push(...__privateGet(this, _fontFaceRules).map((rule) => rule.cssText));
108
- for (const plaintextRule of __privateGet(this, _plainRules).values()) {
85
+ css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
86
+ for (const plaintextRule of this.#plainRules.values()) {
109
87
  css.push(plaintextRule.cssText);
110
88
  }
111
- const sortedMediaRules = Array.from(__privateGet(this, _mediaRules).values()).sort(
89
+ const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
112
90
  (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
113
91
  );
114
92
  for (const mediaRule of sortedMediaRules) {
@@ -117,18 +95,13 @@ class CssEngine {
117
95
  css.push(cssText);
118
96
  }
119
97
  }
120
- __privateSet(this, _cssText, css.join("\n"));
121
- return __privateGet(this, _cssText);
98
+ this.#cssText = css.join("\n");
99
+ return this.#cssText;
122
100
  }
101
+ #onChangeRule = () => {
102
+ this.#isDirty = true;
103
+ };
123
104
  }
124
- _element = new WeakMap();
125
- _mediaRules = new WeakMap();
126
- _plainRules = new WeakMap();
127
- _fontFaceRules = new WeakMap();
128
- _sheet = new WeakMap();
129
- _isDirty = new WeakMap();
130
- _cssText = new WeakMap();
131
- _onChangeRule = new WeakMap();
132
105
  export {
133
106
  CssEngine
134
107
  };
package/lib/core/rules.js CHANGED
@@ -1,98 +1,78 @@
1
- var __accessCheck = (obj, member, msg) => {
2
- if (!member.has(obj))
3
- throw TypeError("Cannot " + msg);
4
- };
5
- var __privateGet = (obj, member, getter) => {
6
- __accessCheck(obj, member, "read from private field");
7
- return getter ? getter.call(obj) : member.get(obj);
8
- };
9
- var __privateAdd = (obj, member, value) => {
10
- if (member.has(obj))
11
- throw TypeError("Cannot add the same private member more than once");
12
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
13
- };
14
- var __privateSet = (obj, member, value, setter) => {
15
- __accessCheck(obj, member, "write to private field");
16
- setter ? setter.call(obj, value) : member.set(obj, value);
17
- return value;
18
- };
19
- var _styleMap, _isDirty, _string, _indent, _transformValue, _onChange, _mediaType;
20
1
  import { toValue } from "./to-value";
21
2
  import { toProperty } from "./to-property";
22
3
  class StylePropertyMap {
4
+ #styleMap = /* @__PURE__ */ new Map();
5
+ #isDirty = false;
6
+ #string = "";
7
+ #indent = 0;
8
+ #transformValue;
9
+ onChange;
23
10
  constructor(transformValue) {
24
- __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
25
- __privateAdd(this, _isDirty, false);
26
- __privateAdd(this, _string, "");
27
- __privateAdd(this, _indent, 0);
28
- __privateAdd(this, _transformValue, void 0);
29
- __privateSet(this, _transformValue, transformValue);
11
+ this.#transformValue = transformValue;
30
12
  }
31
13
  setTransformer(transformValue) {
32
- __privateSet(this, _transformValue, transformValue);
14
+ this.#transformValue = transformValue;
33
15
  }
34
16
  set(property, value) {
35
- __privateGet(this, _styleMap).set(property, value);
36
- __privateSet(this, _isDirty, true);
17
+ this.#styleMap.set(property, value);
18
+ this.#isDirty = true;
37
19
  this.onChange?.();
38
20
  }
39
21
  has(property) {
40
- return __privateGet(this, _styleMap).has(property);
22
+ return this.#styleMap.has(property);
41
23
  }
42
24
  keys() {
43
- return __privateGet(this, _styleMap).keys();
25
+ return this.#styleMap.keys();
44
26
  }
45
27
  delete(property) {
46
- __privateGet(this, _styleMap).delete(property);
47
- __privateSet(this, _isDirty, true);
28
+ this.#styleMap.delete(property);
29
+ this.#isDirty = true;
48
30
  this.onChange?.();
49
31
  }
50
32
  clear() {
51
- __privateGet(this, _styleMap).clear();
52
- __privateSet(this, _isDirty, true);
33
+ this.#styleMap.clear();
34
+ this.#isDirty = true;
53
35
  this.onChange?.();
54
36
  }
55
37
  toString({ indent = 0 } = {}) {
56
- if (__privateGet(this, _isDirty) === false && indent === __privateGet(this, _indent)) {
57
- return __privateGet(this, _string);
38
+ if (this.#isDirty === false && indent === this.#indent) {
39
+ return this.#string;
58
40
  }
59
- __privateSet(this, _indent, indent);
41
+ this.#indent = indent;
60
42
  const block = [];
61
43
  const spaces = " ".repeat(indent);
62
- for (const [property, value] of __privateGet(this, _styleMap)) {
44
+ for (const [property, value] of this.#styleMap) {
63
45
  if (value === void 0) {
64
46
  continue;
65
47
  }
66
48
  block.push(
67
49
  `${spaces}${toProperty(property)}: ${toValue(
68
50
  value,
69
- __privateGet(this, _transformValue)
51
+ this.#transformValue
70
52
  )}`
71
53
  );
72
54
  }
73
- __privateSet(this, _string, block.join(";\n"));
74
- __privateSet(this, _isDirty, false);
75
- return __privateGet(this, _string);
55
+ this.#string = block.join(";\n");
56
+ this.#isDirty = false;
57
+ return this.#string;
76
58
  }
77
59
  }
78
- _styleMap = new WeakMap();
79
- _isDirty = new WeakMap();
80
- _string = new WeakMap();
81
- _indent = new WeakMap();
82
- _transformValue = new WeakMap();
83
60
  class StyleRule {
61
+ styleMap;
62
+ selectorText;
63
+ onChange;
84
64
  constructor(selectorText, style, transformValue) {
85
- __privateAdd(this, _onChange, () => {
86
- this.onChange?.();
87
- });
88
65
  this.styleMap = new StylePropertyMap(transformValue);
89
66
  this.selectorText = selectorText;
90
67
  let property;
91
68
  for (property in style) {
92
69
  this.styleMap.set(property, style[property]);
93
70
  }
94
- this.styleMap.onChange = __privateGet(this, _onChange);
71
+ this.styleMap.onChange = this.#onChange;
95
72
  }
73
+ #onChange = () => {
74
+ this.onChange?.();
75
+ };
96
76
  get cssText() {
97
77
  return this.toString();
98
78
  }
@@ -105,13 +85,13 @@ ${this.styleMap.toString({
105
85
  ${spaces}}`;
106
86
  }
107
87
  }
108
- _onChange = new WeakMap();
109
88
  class MediaRule {
89
+ options;
90
+ rules = [];
91
+ #mediaType;
110
92
  constructor(options = {}) {
111
- this.rules = [];
112
- __privateAdd(this, _mediaType, void 0);
113
93
  this.options = options;
114
- __privateSet(this, _mediaType, options.mediaType ?? "all");
94
+ this.#mediaType = options.mediaType ?? "all";
115
95
  }
116
96
  insertRule(rule) {
117
97
  this.rules.push(rule);
@@ -136,17 +116,17 @@ class MediaRule {
136
116
  if (maxWidth !== void 0) {
137
117
  conditionText += ` and (max-width: ${maxWidth}px)`;
138
118
  }
139
- return `@media ${__privateGet(this, _mediaType)}${conditionText} {
119
+ return `@media ${this.#mediaType}${conditionText} {
140
120
  ${rules.join(
141
121
  "\n"
142
122
  )}
143
123
  }`;
144
124
  }
145
125
  }
146
- _mediaType = new WeakMap();
147
126
  class PlaintextRule {
127
+ cssText;
128
+ styleMap = new StylePropertyMap();
148
129
  constructor(cssText) {
149
- this.styleMap = new StylePropertyMap();
150
130
  this.cssText = cssText;
151
131
  }
152
132
  toString() {
@@ -154,6 +134,7 @@ class PlaintextRule {
154
134
  }
155
135
  }
156
136
  class FontFaceRule {
137
+ options;
157
138
  constructor(options) {
158
139
  this.options = options;
159
140
  }
package/lib/core/style-element.js CHANGED
@@ -1,62 +1,41 @@
1
- var __accessCheck = (obj, member, msg) => {
2
- if (!member.has(obj))
3
- throw TypeError("Cannot " + msg);
4
- };
5
- var __privateGet = (obj, member, getter) => {
6
- __accessCheck(obj, member, "read from private field");
7
- return getter ? getter.call(obj) : member.get(obj);
8
- };
9
- var __privateAdd = (obj, member, value) => {
10
- if (member.has(obj))
11
- throw TypeError("Cannot add the same private member more than once");
12
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
13
- };
14
- var __privateSet = (obj, member, value, setter) => {
15
- __accessCheck(obj, member, "write to private field");
16
- setter ? setter.call(obj, value) : member.set(obj, value);
17
- return value;
18
- };
19
- var _element, _name;
20
1
  class StyleElement {
2
+ #element;
3
+ #name;
21
4
  constructor(name = "") {
22
- __privateAdd(this, _element, void 0);
23
- __privateAdd(this, _name, void 0);
24
- __privateSet(this, _name, name);
5
+ this.#name = name;
25
6
  }
26
7
  get isMounted() {
27
- return __privateGet(this, _element)?.parentElement != null;
8
+ return this.#element?.parentElement != null;
28
9
  }
29
10
  mount() {
30
11
  if (this.isMounted === false) {
31
- __privateSet(this, _element, document.createElement("style"));
32
- __privateGet(this, _element).setAttribute("data-webstudio", __privateGet(this, _name));
33
- document.head.appendChild(__privateGet(this, _element));
12
+ this.#element = document.createElement("style");
13
+ this.#element.setAttribute("data-webstudio", this.#name);
14
+ document.head.appendChild(this.#element);
34
15
  }
35
16
  }
36
17
  unmount() {
37
18
  if (this.isMounted) {
38
- __privateGet(this, _element)?.parentElement?.removeChild(__privateGet(this, _element));
39
- __privateSet(this, _element, void 0);
19
+ this.#element?.parentElement?.removeChild(this.#element);
20
+ this.#element = void 0;
40
21
  }
41
22
  }
42
23
  render(cssText) {
43
- if (__privateGet(this, _element)) {
44
- __privateGet(this, _element).textContent = cssText;
24
+ if (this.#element) {
25
+ this.#element.textContent = cssText;
45
26
  }
46
27
  }
47
28
  setAttribute(name, value) {
48
- if (__privateGet(this, _element)) {
49
- __privateGet(this, _element).setAttribute(name, value);
29
+ if (this.#element) {
30
+ this.#element.setAttribute(name, value);
50
31
  }
51
32
  }
52
33
  getAttribute(name) {
53
- if (__privateGet(this, _element)) {
54
- return __privateGet(this, _element).getAttribute(name);
34
+ if (this.#element) {
35
+ return this.#element.getAttribute(name);
55
36
  }
56
37
  }
57
38
  }
58
- _element = new WeakMap();
59
- _name = new WeakMap();
60
39
  export {
61
40
  StyleElement
62
41
  };
package/lib/core/style-sheet.js CHANGED
@@ -1,37 +1,16 @@
1
- var __accessCheck = (obj, member, msg) => {
2
- if (!member.has(obj))
3
- throw TypeError("Cannot " + msg);
4
- };
5
- var __privateGet = (obj, member, getter) => {
6
- __accessCheck(obj, member, "read from private field");
7
- return getter ? getter.call(obj) : member.get(obj);
8
- };
9
- var __privateAdd = (obj, member, value) => {
10
- if (member.has(obj))
11
- throw TypeError("Cannot add the same private member more than once");
12
- member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
13
- };
14
- var __privateSet = (obj, member, value, setter) => {
15
- __accessCheck(obj, member, "write to private field");
16
- setter ? setter.call(obj, value) : member.set(obj, value);
17
- return value;
18
- };
19
- var _cssText, _element;
20
1
  class StyleSheet {
2
+ #cssText = "";
3
+ #element;
21
4
  constructor(element) {
22
- __privateAdd(this, _cssText, "");
23
- __privateAdd(this, _element, void 0);
24
- __privateSet(this, _element, element);
5
+ this.#element = element;
25
6
  }
26
7
  replaceSync(cssText) {
27
- if (cssText !== __privateGet(this, _cssText)) {
28
- __privateSet(this, _cssText, cssText);
29
- __privateGet(this, _element).render(cssText);
8
+ if (cssText !== this.#cssText) {
9
+ this.#cssText = cssText;
10
+ this.#element.render(cssText);
30
11
  }
31
12
  }
32
13
  }
33
- _cssText = new WeakMap();
34
- _element = new WeakMap();
35
14
  export {
36
15
  StyleSheet
37
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/css-engine",
3
- "version": "0.81.0",
3
+ "version": "0.82.0",
4
4
  "description": "CSS Renderer for Webstudio",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -9,8 +9,8 @@
9
9
  "hyphenate-style-name": "^1.0.4",
10
10
  "react": "^18.2.0",
11
11
  "react-dom": "^18.2.0",
12
- "@webstudio-is/css-data": "^0.81.0",
13
- "@webstudio-is/fonts": "^0.81.0"
12
+ "@webstudio-is/css-data": "^0.82.0",
13
+ "@webstudio-is/fonts": "^0.82.0"
14
14
  },
15
15
  "devDependencies": {
16
16
  "@jest/globals": "^29.6.1",