@webstudio-is/css-engine 0.81.0 → 0.83.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.
- package/LICENSE +661 -21
- package/lib/cjs/core/css-engine.js +40 -67
- package/lib/cjs/core/rules.js +42 -58
- package/lib/cjs/core/style-element.js +15 -36
- package/lib/cjs/core/style-sheet.js +6 -27
- package/lib/cjs/core/to-value.js +2 -5
- package/lib/core/css-engine.js +40 -67
- package/lib/core/rules.js +42 -58
- package/lib/core/style-element.js +15 -36
- package/lib/core/style-sheet.js +6 -27
- package/lib/core/to-value.js +2 -5
- package/lib/types/core/css-engine.stories.d.ts +1 -2
- package/lib/types/core/rules.d.ts +2 -1
- package/package.json +11 -10
- package/src/core/rules.ts +3 -0
- package/src/core/to-value.ts +2 -10
package/lib/core/rules.js
CHANGED
|
@@ -1,98 +1,81 @@
|
|
|
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
|
-
|
|
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
|
-
|
|
14
|
+
this.#transformValue = transformValue;
|
|
33
15
|
}
|
|
34
16
|
set(property, value) {
|
|
35
|
-
|
|
36
|
-
|
|
17
|
+
this.#styleMap.set(property, value);
|
|
18
|
+
this.#isDirty = true;
|
|
37
19
|
this.onChange?.();
|
|
38
20
|
}
|
|
39
21
|
has(property) {
|
|
40
|
-
return
|
|
22
|
+
return this.#styleMap.has(property);
|
|
23
|
+
}
|
|
24
|
+
get size() {
|
|
25
|
+
return this.#styleMap.size;
|
|
41
26
|
}
|
|
42
27
|
keys() {
|
|
43
|
-
return
|
|
28
|
+
return this.#styleMap.keys();
|
|
44
29
|
}
|
|
45
30
|
delete(property) {
|
|
46
|
-
|
|
47
|
-
|
|
31
|
+
this.#styleMap.delete(property);
|
|
32
|
+
this.#isDirty = true;
|
|
48
33
|
this.onChange?.();
|
|
49
34
|
}
|
|
50
35
|
clear() {
|
|
51
|
-
|
|
52
|
-
|
|
36
|
+
this.#styleMap.clear();
|
|
37
|
+
this.#isDirty = true;
|
|
53
38
|
this.onChange?.();
|
|
54
39
|
}
|
|
55
40
|
toString({ indent = 0 } = {}) {
|
|
56
|
-
if (
|
|
57
|
-
return
|
|
41
|
+
if (this.#isDirty === false && indent === this.#indent) {
|
|
42
|
+
return this.#string;
|
|
58
43
|
}
|
|
59
|
-
|
|
44
|
+
this.#indent = indent;
|
|
60
45
|
const block = [];
|
|
61
46
|
const spaces = " ".repeat(indent);
|
|
62
|
-
for (const [property, value] of
|
|
47
|
+
for (const [property, value] of this.#styleMap) {
|
|
63
48
|
if (value === void 0) {
|
|
64
49
|
continue;
|
|
65
50
|
}
|
|
66
51
|
block.push(
|
|
67
52
|
`${spaces}${toProperty(property)}: ${toValue(
|
|
68
53
|
value,
|
|
69
|
-
|
|
54
|
+
this.#transformValue
|
|
70
55
|
)}`
|
|
71
56
|
);
|
|
72
57
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return
|
|
58
|
+
this.#string = block.join(";\n");
|
|
59
|
+
this.#isDirty = false;
|
|
60
|
+
return this.#string;
|
|
76
61
|
}
|
|
77
62
|
}
|
|
78
|
-
_styleMap = new WeakMap();
|
|
79
|
-
_isDirty = new WeakMap();
|
|
80
|
-
_string = new WeakMap();
|
|
81
|
-
_indent = new WeakMap();
|
|
82
|
-
_transformValue = new WeakMap();
|
|
83
63
|
class StyleRule {
|
|
64
|
+
styleMap;
|
|
65
|
+
selectorText;
|
|
66
|
+
onChange;
|
|
84
67
|
constructor(selectorText, style, transformValue) {
|
|
85
|
-
__privateAdd(this, _onChange, () => {
|
|
86
|
-
this.onChange?.();
|
|
87
|
-
});
|
|
88
68
|
this.styleMap = new StylePropertyMap(transformValue);
|
|
89
69
|
this.selectorText = selectorText;
|
|
90
70
|
let property;
|
|
91
71
|
for (property in style) {
|
|
92
72
|
this.styleMap.set(property, style[property]);
|
|
93
73
|
}
|
|
94
|
-
this.styleMap.onChange =
|
|
74
|
+
this.styleMap.onChange = this.#onChange;
|
|
95
75
|
}
|
|
76
|
+
#onChange = () => {
|
|
77
|
+
this.onChange?.();
|
|
78
|
+
};
|
|
96
79
|
get cssText() {
|
|
97
80
|
return this.toString();
|
|
98
81
|
}
|
|
@@ -105,13 +88,13 @@ ${this.styleMap.toString({
|
|
|
105
88
|
${spaces}}`;
|
|
106
89
|
}
|
|
107
90
|
}
|
|
108
|
-
_onChange = new WeakMap();
|
|
109
91
|
class MediaRule {
|
|
92
|
+
options;
|
|
93
|
+
rules = [];
|
|
94
|
+
#mediaType;
|
|
110
95
|
constructor(options = {}) {
|
|
111
|
-
this.rules = [];
|
|
112
|
-
__privateAdd(this, _mediaType, void 0);
|
|
113
96
|
this.options = options;
|
|
114
|
-
|
|
97
|
+
this.#mediaType = options.mediaType ?? "all";
|
|
115
98
|
}
|
|
116
99
|
insertRule(rule) {
|
|
117
100
|
this.rules.push(rule);
|
|
@@ -136,17 +119,17 @@ class MediaRule {
|
|
|
136
119
|
if (maxWidth !== void 0) {
|
|
137
120
|
conditionText += ` and (max-width: ${maxWidth}px)`;
|
|
138
121
|
}
|
|
139
|
-
return `@media ${
|
|
122
|
+
return `@media ${this.#mediaType}${conditionText} {
|
|
140
123
|
${rules.join(
|
|
141
124
|
"\n"
|
|
142
125
|
)}
|
|
143
126
|
}`;
|
|
144
127
|
}
|
|
145
128
|
}
|
|
146
|
-
_mediaType = new WeakMap();
|
|
147
129
|
class PlaintextRule {
|
|
130
|
+
cssText;
|
|
131
|
+
styleMap = new StylePropertyMap();
|
|
148
132
|
constructor(cssText) {
|
|
149
|
-
this.styleMap = new StylePropertyMap();
|
|
150
133
|
this.cssText = cssText;
|
|
151
134
|
}
|
|
152
135
|
toString() {
|
|
@@ -154,6 +137,7 @@ class PlaintextRule {
|
|
|
154
137
|
}
|
|
155
138
|
}
|
|
156
139
|
class FontFaceRule {
|
|
140
|
+
options;
|
|
157
141
|
constructor(options) {
|
|
158
142
|
this.options = options;
|
|
159
143
|
}
|
|
@@ -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
|
-
|
|
23
|
-
__privateAdd(this, _name, void 0);
|
|
24
|
-
__privateSet(this, _name, name);
|
|
5
|
+
this.#name = name;
|
|
25
6
|
}
|
|
26
7
|
get isMounted() {
|
|
27
|
-
return
|
|
8
|
+
return this.#element?.parentElement != null;
|
|
28
9
|
}
|
|
29
10
|
mount() {
|
|
30
11
|
if (this.isMounted === false) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
document.head.appendChild(
|
|
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
|
-
|
|
39
|
-
|
|
19
|
+
this.#element?.parentElement?.removeChild(this.#element);
|
|
20
|
+
this.#element = void 0;
|
|
40
21
|
}
|
|
41
22
|
}
|
|
42
23
|
render(cssText) {
|
|
43
|
-
if (
|
|
44
|
-
|
|
24
|
+
if (this.#element) {
|
|
25
|
+
this.#element.textContent = cssText;
|
|
45
26
|
}
|
|
46
27
|
}
|
|
47
28
|
setAttribute(name, value) {
|
|
48
|
-
if (
|
|
49
|
-
|
|
29
|
+
if (this.#element) {
|
|
30
|
+
this.#element.setAttribute(name, value);
|
|
50
31
|
}
|
|
51
32
|
}
|
|
52
33
|
getAttribute(name) {
|
|
53
|
-
if (
|
|
54
|
-
return
|
|
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
|
-
|
|
23
|
-
__privateAdd(this, _element, void 0);
|
|
24
|
-
__privateSet(this, _element, element);
|
|
5
|
+
this.#element = element;
|
|
25
6
|
}
|
|
26
7
|
replaceSync(cssText) {
|
|
27
|
-
if (cssText !==
|
|
28
|
-
|
|
29
|
-
|
|
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/lib/core/to-value.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
+
import { captureError } from "@webstudio-is/error-utils";
|
|
1
2
|
import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
|
|
2
|
-
const assertUnreachable = (_arg, errorMessage) => {
|
|
3
|
-
throw new Error(errorMessage);
|
|
4
|
-
};
|
|
5
3
|
const fallbackTransform = (styleValue) => {
|
|
6
4
|
if (styleValue.type === "fontFamily") {
|
|
7
5
|
const firstFontFamily = styleValue.value[0];
|
|
@@ -73,8 +71,7 @@ const toValue = (styleValue, transformValue) => {
|
|
|
73
71
|
if (value.type === "tuple") {
|
|
74
72
|
return value.value.map((value2) => toValue(value2, transformValue)).join(" ");
|
|
75
73
|
}
|
|
76
|
-
|
|
77
|
-
throw new Error("Unknown value type");
|
|
74
|
+
return captureError(new Error("Unknown value type"), value);
|
|
78
75
|
};
|
|
79
76
|
export {
|
|
80
77
|
toValue
|
|
@@ -7,7 +7,8 @@ declare class StylePropertyMap {
|
|
|
7
7
|
setTransformer(transformValue: TransformValue): void;
|
|
8
8
|
set(property: StyleProperty, value?: StyleValue): void;
|
|
9
9
|
has(property: StyleProperty): boolean;
|
|
10
|
-
|
|
10
|
+
get size(): number;
|
|
11
|
+
keys(): IterableIterator<"clip" | "top" | "right" | `--${string}` | "WebkitFontSmoothing" | "MozOsxFontSmoothing" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex">;
|
|
11
12
|
delete(property: StyleProperty): void;
|
|
12
13
|
clear(): void;
|
|
13
14
|
toString({ indent }?: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/css-engine",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.83.0",
|
|
4
4
|
"description": "CSS Renderer for Webstudio",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -9,16 +9,17 @@
|
|
|
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.
|
|
13
|
-
"@webstudio-is/
|
|
12
|
+
"@webstudio-is/css-data": "^0.83.0",
|
|
13
|
+
"@webstudio-is/error-utils": "^0.83.0",
|
|
14
|
+
"@webstudio-is/fonts": "^0.83.0"
|
|
14
15
|
},
|
|
15
16
|
"devDependencies": {
|
|
16
|
-
"@jest/globals": "^29.6.
|
|
17
|
+
"@jest/globals": "^29.6.2",
|
|
17
18
|
"@types/hyphenate-style-name": "^1.0.0",
|
|
18
|
-
"@types/react": "^18.
|
|
19
|
-
"@types/react-dom": "^18.
|
|
20
|
-
"jest": "^29.6.
|
|
21
|
-
"typescript": "5.1.
|
|
19
|
+
"@types/react": "^18.2.16",
|
|
20
|
+
"@types/react-dom": "^18.2.7",
|
|
21
|
+
"jest": "^29.6.2",
|
|
22
|
+
"typescript": "5.1.6",
|
|
22
23
|
"@webstudio-is/jest-config": "^1.0.6",
|
|
23
24
|
"@webstudio-is/scripts": "^0.0.0",
|
|
24
25
|
"@webstudio-is/storybook-config": "^0.0.0",
|
|
@@ -34,11 +35,11 @@
|
|
|
34
35
|
"src/*",
|
|
35
36
|
"!*.test.*"
|
|
36
37
|
],
|
|
37
|
-
"license": "
|
|
38
|
+
"license": "AGPL-3.0-or-later",
|
|
38
39
|
"private": false,
|
|
39
40
|
"sideEffects": false,
|
|
40
41
|
"scripts": {
|
|
41
|
-
"typecheck": "tsc
|
|
42
|
+
"typecheck": "tsc",
|
|
42
43
|
"checks": "pnpm typecheck && pnpm test",
|
|
43
44
|
"dev": "build-package --watch",
|
|
44
45
|
"build": "build-package",
|
package/src/core/rules.ts
CHANGED
package/src/core/to-value.ts
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import type { StyleValue } from "@webstudio-is/css-data";
|
|
2
|
+
import { captureError } from "@webstudio-is/error-utils";
|
|
2
3
|
import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
|
|
3
4
|
|
|
4
5
|
export type TransformValue = (styleValue: StyleValue) => undefined | StyleValue;
|
|
5
6
|
|
|
6
|
-
// exhaustive check, should never happen in runtime as ts would give error
|
|
7
|
-
const assertUnreachable = (_arg: never, errorMessage: string) => {
|
|
8
|
-
throw new Error(errorMessage);
|
|
9
|
-
};
|
|
10
|
-
|
|
11
7
|
const fallbackTransform: TransformValue = (styleValue) => {
|
|
12
8
|
if (styleValue.type === "fontFamily") {
|
|
13
9
|
const firstFontFamily = styleValue.value[0];
|
|
@@ -108,9 +104,5 @@ export const toValue = (
|
|
|
108
104
|
return value.value.map((value) => toValue(value, transformValue)).join(" ");
|
|
109
105
|
}
|
|
110
106
|
|
|
111
|
-
|
|
112
|
-
assertUnreachable(value, `Unknown value type`);
|
|
113
|
-
|
|
114
|
-
// Will never happen
|
|
115
|
-
throw new Error("Unknown value type");
|
|
107
|
+
return captureError(new Error("Unknown value type"), value);
|
|
116
108
|
};
|