@stylexjs/shared 0.2.0-beta.15 → 0.2.0-beta.17
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/convert-to-className.d.ts +1 -1
- package/lib/convert-to-className.js +6 -22
- package/lib/convert-to-className.js.flow +1 -1
- package/lib/generate-css-rule.d.ts +1 -1
- package/lib/generate-css-rule.js +3 -14
- package/lib/generate-css-rule.js.flow +1 -1
- package/lib/hash.d.ts +2 -2
- package/lib/hash.js +9 -33
- package/lib/hash.js.flow +1 -3
- package/lib/index.d.ts +9 -9
- package/lib/index.js +0 -14
- package/lib/index.js.flow +9 -9
- package/lib/messages.d.ts +26 -26
- package/lib/messages.js +26 -36
- package/lib/messages.js.flow +26 -26
- package/lib/physical-rtl/generate-ltr.js +39 -67
- package/lib/physical-rtl/generate-ltr.js.flow +1 -1
- package/lib/physical-rtl/generate-rtl.d.ts +1 -2
- package/lib/physical-rtl/generate-rtl.js +57 -89
- package/lib/physical-rtl/generate-rtl.js.flow +1 -2
- package/lib/preprocess-rules/PreRule.d.ts +3 -3
- package/lib/preprocess-rules/PreRule.js +3 -17
- package/lib/preprocess-rules/PreRule.js.flow +3 -3
- package/lib/preprocess-rules/application-order.d.ts +8 -5
- package/lib/preprocess-rules/application-order.js +121 -160
- package/lib/preprocess-rules/application-order.js.flow +6 -5
- package/lib/preprocess-rules/basic-validation.d.ts +1 -1
- package/lib/preprocess-rules/basic-validation.js +6 -15
- package/lib/preprocess-rules/basic-validation.js.flow +1 -1
- package/lib/preprocess-rules/flatten-raw-style-obj.d.ts +2 -2
- package/lib/preprocess-rules/flatten-raw-style-obj.js +14 -43
- package/lib/preprocess-rules/flatten-raw-style-obj.js.flow +2 -2
- package/lib/preprocess-rules/index.d.ts +2 -2
- package/lib/preprocess-rules/index.js +6 -15
- package/lib/preprocess-rules/index.js.flow +2 -2
- package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +3 -2
- package/lib/preprocess-rules/legacy-expand-shorthands.js +14 -33
- package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +2 -2
- package/lib/preprocess-rules/property-specificity.d.ts +8 -5
- package/lib/preprocess-rules/property-specificity.js +54 -76
- package/lib/preprocess-rules/property-specificity.js.flow +6 -5
- package/lib/stylex-create-vars.d.ts +17 -8
- package/lib/stylex-create-vars.js +30 -17
- package/lib/stylex-create-vars.js.flow +10 -4
- package/lib/stylex-create.d.ts +2 -2
- package/lib/stylex-create.js +1 -20
- package/lib/stylex-create.js.flow +1 -1
- package/lib/stylex-first-that-works.js +0 -10
- package/lib/stylex-include.js +0 -10
- package/lib/stylex-keyframes.d.ts +1 -1
- package/lib/stylex-keyframes.js +7 -27
- package/lib/stylex-keyframes.js.flow +1 -1
- package/lib/stylex-override-vars.d.ts +11 -4
- package/lib/stylex-override-vars.js +32 -18
- package/lib/stylex-override-vars.js.flow +3 -3
- package/lib/transform-value.js +11 -29
- package/lib/transform-value.js.flow +1 -1
- package/lib/utils/Rule.d.ts +2 -2
- package/lib/utils/Rule.js +0 -21
- package/lib/utils/Rule.js.flow +2 -2
- package/lib/utils/dashify.js +1 -9
- package/lib/utils/default-options.d.ts +1 -1
- package/lib/utils/default-options.js +2 -23
- package/lib/utils/default-options.js.flow +1 -1
- package/lib/utils/file-based-identifier.js +1 -9
- package/lib/utils/genCSSRule.d.ts +1 -1
- package/lib/utils/genCSSRule.js +6 -16
- package/lib/utils/genCSSRule.js.flow +1 -1
- package/lib/utils/normalize-value.js +1 -13
- package/lib/utils/normalize-value.js.flow +1 -1
- package/lib/utils/normalizers/detect-unclosed-fns.d.ts +1 -1
- package/lib/utils/normalizers/detect-unclosed-fns.js +2 -14
- package/lib/utils/normalizers/detect-unclosed-fns.js.flow +1 -1
- package/lib/utils/normalizers/font-size-px-to-rem.d.ts +1 -1
- package/lib/utils/normalizers/font-size-px-to-rem.js +4 -19
- package/lib/utils/normalizers/font-size-px-to-rem.js.flow +1 -1
- package/lib/utils/normalizers/leading-zero.d.ts +1 -1
- package/lib/utils/normalizers/leading-zero.js +3 -15
- package/lib/utils/normalizers/leading-zero.js.flow +1 -1
- package/lib/utils/normalizers/quotes.d.ts +1 -1
- package/lib/utils/normalizers/quotes.js +4 -17
- package/lib/utils/normalizers/quotes.js.flow +1 -1
- package/lib/utils/normalizers/timings.d.ts +1 -1
- package/lib/utils/normalizers/timings.js +4 -18
- package/lib/utils/normalizers/timings.js.flow +1 -1
- package/lib/utils/normalizers/whitespace.d.ts +1 -1
- package/lib/utils/normalizers/whitespace.js +12 -27
- package/lib/utils/normalizers/whitespace.js.flow +1 -1
- package/lib/utils/normalizers/zero-dimensions.d.ts +1 -1
- package/lib/utils/normalizers/zero-dimensions.js +8 -23
- package/lib/utils/normalizers/zero-dimensions.js.flow +1 -1
- package/lib/utils/object-utils.d.ts +28 -20
- package/lib/utils/object-utils.js +2 -15
- package/lib/utils/object-utils.js.flow +23 -27
- package/lib/utils/property-priorities.js +68 -83
- package/lib/utils/split-css-value.d.ts +1 -1
- package/lib/utils/split-css-value.js +8 -22
- package/lib/utils/split-css-value.js.flow +1 -1
- package/lib/validate.js +2 -11
- package/package.json +2 -3
@@ -6,211 +6,172 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.default = void 0;
|
7
7
|
var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
9
|
-
/**
|
10
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
11
|
-
*
|
12
|
-
* This source code is licensed under the MIT license found in the
|
13
|
-
* LICENSE file in the root directory of this source tree.
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*/
|
17
|
-
|
18
9
|
const shorthands = {
|
19
10
|
all: _ => {
|
20
|
-
throw new Error(
|
11
|
+
throw new Error("all is not supported");
|
21
12
|
},
|
22
|
-
animation: value => [[
|
23
|
-
background: value => [[
|
24
|
-
// These will be removed later, matching the properties with React Native.
|
25
|
-
// For now, we're compiling them to the React Native properties.
|
26
|
-
// @Deprecated
|
13
|
+
animation: value => [["animation", value], ["animationName", null], ["animationDuration", null], ["animationTimingFunction", null], ["animationDelay", null], ["animationIterationCount", null], ["animationDirection", null], ["animationFillMode", null], ["animationPlayState", null]],
|
14
|
+
background: value => [["background", value], ["backgroundAttachment", null], ["backgroundClip", null], ["backgroundColor", null], ["backgroundImage", null], ["backgroundOrigin", null], ["backgroundPosition", null], ["backgroundRepeat", null], ["backgroundSize", null]],
|
27
15
|
border: rawValue => {
|
28
|
-
if (typeof rawValue ===
|
16
|
+
if (typeof rawValue === "number") {
|
29
17
|
return shorthands.borderWidth(rawValue);
|
30
18
|
}
|
31
19
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
32
20
|
return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
|
33
21
|
},
|
34
|
-
// @Deprecated
|
35
22
|
borderInline: rawValue => {
|
36
|
-
if (typeof rawValue ===
|
37
|
-
return [[
|
23
|
+
if (typeof rawValue === "number") {
|
24
|
+
return [["borderInlineWidth", rawValue], ["borderInlineStartWidth", null], ["borderInlineEndWidth", null]];
|
38
25
|
}
|
39
26
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
40
27
|
return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
|
41
28
|
},
|
42
|
-
// @Deprecated
|
43
29
|
borderBlock: rawValue => {
|
44
|
-
if (typeof rawValue ===
|
45
|
-
return [[
|
30
|
+
if (typeof rawValue === "number") {
|
31
|
+
return [["borderBlockWidth", rawValue], ["borderTopWidth", null], ["borderBottomWidth", null]];
|
46
32
|
}
|
47
33
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
48
34
|
return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
|
49
35
|
},
|
50
|
-
// @Deprecated
|
51
36
|
borderTop: rawValue => {
|
52
|
-
if (typeof rawValue ===
|
53
|
-
return [[
|
37
|
+
if (typeof rawValue === "number") {
|
38
|
+
return [["borderTopWidth", rawValue]];
|
54
39
|
}
|
55
40
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
56
|
-
return [[
|
41
|
+
return [["borderTopWidth", width], ["borderTopStyle", style], ["borderTopColor", color]];
|
57
42
|
},
|
58
|
-
// @Deprecated
|
59
43
|
borderInlineEnd: rawValue => {
|
60
|
-
if (typeof rawValue ===
|
61
|
-
return [[
|
44
|
+
if (typeof rawValue === "number") {
|
45
|
+
return [["borderInlineEndWidth", rawValue]];
|
62
46
|
}
|
63
47
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
64
|
-
return [[
|
48
|
+
return [["borderInlineEndWidth", width], ["borderInlineEndStyle", style], ["borderInlineEndColor", color]];
|
65
49
|
},
|
66
|
-
// @Deprecated
|
67
50
|
borderRight: _rawValue => {
|
68
|
-
throw new Error([
|
51
|
+
throw new Error(["`borderRight` is not supported.", "You could use `borderRightWidth`, `borderRightStyle` and `borderRightColor`,", "but it is preferable to use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor`."].join(" "));
|
69
52
|
},
|
70
|
-
// @Deprecated
|
71
53
|
borderBottom: rawValue => {
|
72
|
-
if (typeof rawValue ===
|
73
|
-
return [[
|
54
|
+
if (typeof rawValue === "number") {
|
55
|
+
return [["borderBottomWidth", rawValue]];
|
74
56
|
}
|
75
57
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
76
|
-
return [[
|
58
|
+
return [["borderBottomWidth", width], ["borderBottomStyle", style], ["borderBottomColor", color]];
|
77
59
|
},
|
78
|
-
// @Deprecated
|
79
60
|
borderInlineStart: rawValue => {
|
80
|
-
if (typeof rawValue ===
|
81
|
-
return [[
|
61
|
+
if (typeof rawValue === "number") {
|
62
|
+
return [["borderInlineStartWidth", rawValue]];
|
82
63
|
}
|
83
64
|
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
84
|
-
return [[
|
65
|
+
return [["borderInlineStartWidth", width], ["borderInlineStartStyle", style], ["borderInlineStartColor", color]];
|
85
66
|
},
|
86
|
-
// @Deprecated
|
87
67
|
borderLeft: _rawValue => {
|
88
|
-
throw new Error([
|
68
|
+
throw new Error(["`borderLeft` is not supported.", "You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,", "but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`."].join(" "));
|
89
69
|
},
|
90
|
-
borderInlineWidth: rawValue => [[
|
91
|
-
borderInlineStyle: rawValue => [[
|
92
|
-
borderInlineColor: rawValue => [[
|
93
|
-
borderBlockWidth: rawValue => [[
|
94
|
-
borderBlockStyle: rawValue => [[
|
95
|
-
borderBlockColor: rawValue => [[
|
96
|
-
borderColor: value => [[
|
97
|
-
borderStyle: value => [[
|
98
|
-
borderWidth: value => [[
|
99
|
-
borderInlineStartColor: value => [[
|
100
|
-
borderInlineEndColor: value => [[
|
101
|
-
borderInlineStartStyle: value => [[
|
102
|
-
borderInlineEndStyle: value => [[
|
103
|
-
borderInlineStartWidth: value => [[
|
104
|
-
borderInlineEndWidth: value => [[
|
105
|
-
borderLeftColor: value => [[
|
106
|
-
borderRightColor: value => [[
|
107
|
-
borderLeftStyle: value => [[
|
108
|
-
borderRightStyle: value => [[
|
109
|
-
borderLeftWidth: value => [[
|
110
|
-
borderRightWidth: value => [[
|
70
|
+
borderInlineWidth: rawValue => [["borderInlineWidth", rawValue], ["borderInlineStartWidth", null], ["borderLeftWidth", null], ["borderInlineEndWidth", null], ["borderRightWidth", null]],
|
71
|
+
borderInlineStyle: rawValue => [["borderInlineStyle", rawValue], ["borderInlineStartStyle", null], ["borderLeftStyle", null], ["borderInlineEndStyle", null], ["borderRightStyle", null]],
|
72
|
+
borderInlineColor: rawValue => [["borderInlineColor", rawValue], ["borderInlineStartColor", null], ["borderLeftColor", null], ["borderInlineEndColor", null], ["borderRightColor", null]],
|
73
|
+
borderBlockWidth: rawValue => [["borderBlockWidth", rawValue], ["borderTopWidth", null], ["borderBottomWidth", null]],
|
74
|
+
borderBlockStyle: rawValue => [["borderBlockStyle", rawValue], ["borderTopStyle", null], ["borderBottomStyle", null]],
|
75
|
+
borderBlockColor: rawValue => [["borderBlockColor", rawValue], ["borderTopColor", null], ["borderBottomColor", null]],
|
76
|
+
borderColor: value => [["borderColor", value], ["borderTopColor", null], ["borderInlineEndColor", null], ["borderRightColor", null], ["borderBottomColor", null], ["borderInlineStartColor", null], ["borderLeftColor", null]],
|
77
|
+
borderStyle: value => [["borderStyle", value], ["borderTopStyle", null], ["borderInlineEndStyle", null], ["borderRightStyle", null], ["borderBottomStyle", null], ["borderInlineStartStyle", null], ["borderLeftStyle", null]],
|
78
|
+
borderWidth: value => [["borderWidth", value], ["borderTopWidth", null], ["borderInlineEndWidth", null], ["borderRightWidth", null], ["borderBottomWidth", null], ["borderInlineStartWidth", null], ["borderLeftWidth", null]],
|
79
|
+
borderInlineStartColor: value => [["borderInlineStartColor", value], ["borderLeftColor", null], ["borderRightColor", null]],
|
80
|
+
borderInlineEndColor: value => [["borderInlineEndColor", value], ["borderLeftColor", null], ["borderRightColor", null]],
|
81
|
+
borderInlineStartStyle: value => [["borderInlineStartStyle", value], ["borderLeftStyle", null], ["borderRightStyle", null]],
|
82
|
+
borderInlineEndStyle: value => [["borderInlineEndStyle", value], ["borderLeftStyle", null], ["borderRightStyle", null]],
|
83
|
+
borderInlineStartWidth: value => [["borderInlineStartWidth", value], ["borderLeftWidth", null], ["borderRightWidth", null]],
|
84
|
+
borderInlineEndWidth: value => [["borderInlineEndWidth", value], ["borderLeftWidth", null], ["borderRightWidth", null]],
|
85
|
+
borderLeftColor: value => [["borderLeftColor", value], ["borderInlineStartColor", null], ["borderInlineEndColor", null]],
|
86
|
+
borderRightColor: value => [["borderRightColor", value], ["borderInlineStartColor", null], ["borderInlineEndColor", null]],
|
87
|
+
borderLeftStyle: value => [["borderLeftStyle", value], ["borderInlineStartStyle", null], ["borderInlineEndStyle", null]],
|
88
|
+
borderRightStyle: value => [["borderRightStyle", value], ["borderInlineStartStyle", null], ["borderInlineEndStyle", null]],
|
89
|
+
borderLeftWidth: value => [["borderLeftWidth", value], ["borderInlineStartWidth", null], ["borderInlineEndWidth", null]],
|
90
|
+
borderRightWidth: value => [["borderRightWidth", value], ["borderInlineStartWidth", null], ["borderInlineEndWidth", null]],
|
111
91
|
borderRadius: value => {
|
112
|
-
const values = typeof value ===
|
92
|
+
const values = typeof value === "number" ? [value] : (0, _splitCssValue.default)(value);
|
113
93
|
if (values.length === 1) {
|
114
|
-
return [[
|
115
|
-
// // logical constituents
|
116
|
-
['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
|
117
|
-
// physical constituents
|
118
|
-
['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
|
94
|
+
return [["borderRadius", value], ["borderStartStartRadius", null], ["borderStartEndRadius", null], ["borderEndStartRadius", null], ["borderEndEndRadius", null], ["borderTopLeftRadius", null], ["borderTopRightRadius", null], ["borderBottomLeftRadius", null], ["borderBottomRightRadius", null]];
|
119
95
|
}
|
120
|
-
|
121
|
-
// @Deprecated
|
122
96
|
const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
|
123
|
-
return [
|
124
|
-
// split into logical consituents
|
125
|
-
['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
|
126
|
-
// unset physical consituents
|
127
|
-
['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
|
97
|
+
return [["borderStartStartRadius", startStart], ["borderStartEndRadius", startEnd], ["borderEndEndRadius", endEnd], ["borderEndStartRadius", endStart], ["borderTopLeftRadius", null], ["borderTopRightRadius", null], ["borderBottomLeftRadius", null], ["borderBottomRightRadius", null]];
|
128
98
|
},
|
129
|
-
borderStartStartRadius: value => [[
|
130
|
-
borderStartEndRadius: value => [[
|
131
|
-
borderEndStartRadius: value => [[
|
132
|
-
borderEndEndRadius: value => [[
|
133
|
-
borderTopLeftRadius: value => [[
|
134
|
-
borderTopRightRadius: value => [[
|
135
|
-
borderBottomLeftRadius: value => [[
|
136
|
-
borderBottomRightRadius: value => [[
|
137
|
-
columnRule: value => [[
|
138
|
-
columns: value => [[
|
139
|
-
container: value => [[
|
140
|
-
flex: value => [[
|
141
|
-
flexFlow: value => [[
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
|
99
|
+
borderStartStartRadius: value => [["borderStartStartRadius", value], ["borderTopLeftRadius", null], ["borderTopRightRadius", null]],
|
100
|
+
borderStartEndRadius: value => [["borderStartEndRadius", value], ["borderTopLeftRadius", null], ["borderTopRightRadius", null]],
|
101
|
+
borderEndStartRadius: value => [["borderEndStartRadius", value], ["borderBottomLeftRadius", null], ["borderBottomRightRadius", null]],
|
102
|
+
borderEndEndRadius: value => [["borderEndEndRadius", value], ["borderBottomLeftRadius", null], ["borderBottomRightRadius", null]],
|
103
|
+
borderTopLeftRadius: value => [["borderTopLeftRadius", value], ["borderStartStartRadius", null], ["borderStartEndRadius", null]],
|
104
|
+
borderTopRightRadius: value => [["borderTopRightRadius", value], ["borderStartStartRadius", null], ["borderStartEndRadius", null]],
|
105
|
+
borderBottomLeftRadius: value => [["borderBottomLeftRadius", value], ["borderEndStartRadius", null], ["borderEndEndRadius", null]],
|
106
|
+
borderBottomRightRadius: value => [["borderBottomRightRadius", value], ["borderEndStartRadius", null], ["borderEndEndRadius", null]],
|
107
|
+
columnRule: value => [["columnRule", value], ["columnRuleWidth", null], ["columnRuleStyle", null], ["columnRuleColor", null]],
|
108
|
+
columns: value => [["columns", value], ["columnCount", null], ["columnWidth", null]],
|
109
|
+
container: value => [["container", value], ["containerName", null], ["containerType", null]],
|
110
|
+
flex: value => [["flex", value], ["flexGrow", null], ["flexShrink", null], ["flexBasis", null]],
|
111
|
+
flexFlow: value => [["flexFlow", value], ["flexDirection", null], ["flexWrap", null]],
|
112
|
+
font: value => [["font", value], ["fontFamily", null], ["fontSize", null], ["fontStretch", null], ["fontStyle", null], ["fontVariant", null], ["fontWeight", null], ["lineHeight", null]],
|
113
|
+
gap: value => [["gap", value], ["rowGap", null], ["columnGap", null]],
|
114
|
+
grid: value => [["grid", value], ["gridTemplate", null], ["gridTemplateAreas", null], ["gridTemplateColumns", null], ["gridTemplateRows", null], ["gridAutoRows", null], ["gridAutoColumns", null], ["gridAutoFlow", null]],
|
115
|
+
gridArea: value => [["gridArea", value], ["gridRow", null], ["gridRowStart", null], ["gridRowEnd", null], ["gridColumn", null], ["gridColumnStart", null], ["gridColumnEnd", null]],
|
116
|
+
gridRow: value => [["gridRow", value], ["gridRowStart", null], ["gridRowEnd", null]],
|
117
|
+
gridColumn: value => [["gridColumn", value], ["gridColumnStart", null], ["gridColumnEnd", null]],
|
118
|
+
gridTemplate: value => [["gridTemplate", value], ["gridTemplateAreas", null], ["gridTemplateColumns", null], ["gridTemplateRows", null]],
|
119
|
+
inset: value => [["inset", value], ["insetInline", null], ["insetBlock", null], ["insetInlineStart", null], ["insetInlineEnd", null], ["top", null], ["right", null], ["bottom", null], ["left", null]],
|
120
|
+
insetInline: value => [["insetInline", value], ["insetInlineStart", null], ["insetInlineEnd", null], ["left", null], ["right", null]],
|
121
|
+
insetBlock: value => [["insetBlock", value], ["top", null], ["bottom", null]],
|
122
|
+
insetInlineStart: value => [["insetInlineStart", value], ["left", null], ["right", null]],
|
123
|
+
insetInlineEnd: value => [["insetInlineEnd", value], ["left", null], ["right", null]],
|
124
|
+
left: value => [["left", value], ["insetInlineStart", null], ["insetInlineEnd", null]],
|
125
|
+
right: value => [["right", value], ["insetInlineStart", null], ["insetInlineEnd", null]],
|
126
|
+
listStyle: value => [["listStyle", value], ["listStyleImage", null], ["listStylePosition", null], ["listStyleType", null]],
|
158
127
|
margin: value => {
|
159
|
-
const values = typeof value ===
|
128
|
+
const values = typeof value === "number" ? [value] : (0, _splitCssValue.default)(value);
|
160
129
|
if (values.length === 1) {
|
161
|
-
return [[
|
130
|
+
return [["margin", values[0]], ["marginInlineStart", null], ["marginLeft", null], ["marginInlineEnd", null], ["marginRight", null], ["marginTop", null], ["marginBottom", null]];
|
162
131
|
}
|
163
|
-
// @Deprecated
|
164
132
|
const [top, right = top, bottom = top, left = right] = values;
|
165
|
-
return [[
|
133
|
+
return [["marginTop", top], ["marginInlineEnd", right], ["marginBottom", bottom], ["marginInlineStart", left], ["marginLeft", null], ["marginRight", null]];
|
166
134
|
},
|
167
|
-
marginInline: value => [[
|
168
|
-
marginBlock: value => [[
|
169
|
-
marginInlineStart: value => [[
|
170
|
-
marginInlineEnd: value => [[
|
171
|
-
marginLeft: value => [[
|
172
|
-
marginRight: value => [[
|
173
|
-
mask: value => [[
|
174
|
-
offset: value => [[
|
175
|
-
outline: value => [[
|
176
|
-
overflow: value => [[
|
135
|
+
marginInline: value => [["marginInline", value], ["marginInlineStart", null], ["marginLeft", null], ["marginInlineEnd", null], ["marginRight", null]],
|
136
|
+
marginBlock: value => [["marginBlock", value], ["marginTop", null], ["marginBottom", null]],
|
137
|
+
marginInlineStart: value => [["marginInlineStart", value], ["marginLeft", null], ["marginRight", null]],
|
138
|
+
marginInlineEnd: value => [["marginInlineEnd", value], ["marginLeft", null], ["marginRight", null]],
|
139
|
+
marginLeft: value => [["marginLeft", value], ["marginInlineStart", null], ["marginInlineEnd", null]],
|
140
|
+
marginRight: value => [["marginRight", value], ["marginInlineStart", null], ["marginInlineEnd", null]],
|
141
|
+
mask: value => [["mask", value], ["maskClip", null], ["maskComposite", null], ["maskImage", null], ["maskMode", null], ["maskOrigin", null], ["maskPosition", null], ["maskRepeat", null], ["maskSize", null]],
|
142
|
+
offset: value => [["offset", value], ["offsetAnchor", null], ["offsetDistance", null], ["offsetPath", null], ["offsetPosition", null], ["offsetRotate", null]],
|
143
|
+
outline: value => [["outline", value], ["outlineColor", null], ["outlineStyle", null], ["outlineWidth", null]],
|
144
|
+
overflow: value => [["overflow", value], ["overflowX", null], ["overflowY", null]],
|
177
145
|
padding: rawValue => {
|
178
|
-
const values = typeof rawValue ===
|
146
|
+
const values = typeof rawValue === "number" ? [rawValue] : (0, _splitCssValue.default)(rawValue);
|
179
147
|
if (values.length === 1) {
|
180
|
-
return [[
|
148
|
+
return [["padding", values[0]], ["paddingStart", null], ["paddingLeft", null], ["paddingEnd", null], ["paddingRight", null], ["paddingTop", null], ["paddingBottom", null]];
|
181
149
|
}
|
182
|
-
// @Deprecated
|
183
150
|
const [top, right = top, bottom = top, left = right] = values;
|
184
|
-
return [[
|
151
|
+
return [["paddingTop", top], ["paddingEnd", right], ["paddingBottom", bottom], ["paddingStart", left]];
|
185
152
|
},
|
186
|
-
paddingInline: rawValue => [[
|
187
|
-
paddingBlock: rawValue => [[
|
188
|
-
paddingInlineStart: value => [[
|
189
|
-
paddingInlineEnd: value => [[
|
190
|
-
paddingLeft: value => [[
|
191
|
-
paddingRight: value => [[
|
192
|
-
placeContent: value => [[
|
193
|
-
placeItems: value => [[
|
194
|
-
placeSelf: value => [[
|
195
|
-
scrollMargin: value => [[
|
196
|
-
scrollPadding: value => [[
|
197
|
-
scrollTimeline: value => [[
|
198
|
-
textDecoration: value => [[
|
199
|
-
textEmphasis: value => [[
|
200
|
-
transition: value => [[
|
153
|
+
paddingInline: rawValue => [["paddingInline", rawValue], ["paddingStart", null], ["paddingLeft", null], ["paddingEnd", null], ["paddingRight", null]],
|
154
|
+
paddingBlock: rawValue => [["paddingBlock", rawValue], ["paddingTop", null], ["paddingBottom", null]],
|
155
|
+
paddingInlineStart: value => [["paddingInlineStart", value], ["paddingLeft", null], ["paddingRight", null]],
|
156
|
+
paddingInlineEnd: value => [["paddingInlineEnd", value], ["paddingLeft", null], ["paddingRight", null]],
|
157
|
+
paddingLeft: value => [["paddingLeft", value], ["paddingInlineStart", null], ["paddingInlineEnd", null]],
|
158
|
+
paddingRight: value => [["paddingRight", value], ["paddingInlineStart", null], ["paddingInlineEnd", null]],
|
159
|
+
placeContent: value => [["placeContent", value], ["alignContent", null], ["justifyContent", null]],
|
160
|
+
placeItems: value => [["placeItems", value], ["alignItems", null], ["justifyItems", null]],
|
161
|
+
placeSelf: value => [["placeSelf", value], ["alignSelf", null], ["justifySelf", null]],
|
162
|
+
scrollMargin: value => [["scrollMargin", value], ["scrollMarginBottom", null], ["scrollMarginLeft", null], ["scrollMarginStart", null], ["scrollMarginRight", null], ["scrollMarginEnd", null], ["scrollMarginTop", null]],
|
163
|
+
scrollPadding: value => [["scrollPadding", value], ["scrollPaddingBottom", null], ["scrollPaddingLeft", null], ["scrollPaddingStart", null], ["scrollPaddingRight", null], ["scrollPaddingEnd", null], ["scrollPaddingTop", null]],
|
164
|
+
scrollTimeline: value => [["scrollTimeline", value], ["scrollTimelineName", null], ["scrollTimelineAxis", null]],
|
165
|
+
textDecoration: value => [["textDecoration", value], ["textDecorationColor", null], ["textDecorationLine", null], ["textDecorationStyle", null], ["textDecorationThickness", null]],
|
166
|
+
textEmphasis: value => [["textEmphasis", value], ["textEmphasisColor", null], ["textEmphasisStyle", null]],
|
167
|
+
transition: value => [["transition", value], ["transitionDelay", null], ["transitionDuration", null], ["transitionProperty", null], ["transitionTimingFunction", null]]
|
201
168
|
};
|
202
169
|
const aliases = {
|
203
|
-
// @Deprecated
|
204
170
|
borderHorizontal: shorthands.borderInline,
|
205
|
-
// @Deprecated
|
206
171
|
borderVertical: shorthands.borderBlock,
|
207
|
-
// @Deprecated
|
208
172
|
borderBlockStart: shorthands.borderTop,
|
209
|
-
// @Deprecated
|
210
173
|
borderEnd: shorthands.borderInlineEnd,
|
211
|
-
// @Deprecated
|
212
174
|
borderBlockEnd: shorthands.borderBottom,
|
213
|
-
// @Deprecated
|
214
175
|
borderStart: shorthands.borderInlineStart,
|
215
176
|
borderHorizontalWidth: shorthands.borderInlineWidth,
|
216
177
|
borderHorizontalStyle: shorthands.borderInlineStyle,
|
@@ -218,36 +179,36 @@ const aliases = {
|
|
218
179
|
borderVerticalWidth: shorthands.borderBlockWidth,
|
219
180
|
borderVerticalStyle: shorthands.borderBlockStyle,
|
220
181
|
borderVerticalColor: shorthands.borderBlockColor,
|
221
|
-
borderBlockStartColor: value => [[
|
222
|
-
borderBlockEndColor: value => [[
|
223
|
-
borderBlockStartStyle: value => [[
|
224
|
-
borderBlockEndStyle: value => [[
|
225
|
-
borderBlockStartWidth: value => [[
|
226
|
-
borderBlockEndWidth: value => [[
|
182
|
+
borderBlockStartColor: value => [["borderTopColor", value]],
|
183
|
+
borderBlockEndColor: value => [["borderBottomColor", value]],
|
184
|
+
borderBlockStartStyle: value => [["borderTopStyle", value]],
|
185
|
+
borderBlockEndStyle: value => [["borderBottomStyle", value]],
|
186
|
+
borderBlockStartWidth: value => [["borderTopWidth", value]],
|
187
|
+
borderBlockEndWidth: value => [["borderBottomWidth", value]],
|
227
188
|
borderStartColor: shorthands.borderInlineStartColor,
|
228
189
|
borderEndColor: shorthands.borderInlineEndColor,
|
229
190
|
borderStartStyle: shorthands.borderInlineStartStyle,
|
230
191
|
borderEndStyle: shorthands.borderInlineEndStyle,
|
231
192
|
borderStartWidth: shorthands.borderInlineStartWidth,
|
232
193
|
borderEndWidth: shorthands.borderInlineEndWidth,
|
233
|
-
borderTopStartRadius: value => [[
|
234
|
-
borderTopEndRadius: value => [[
|
235
|
-
borderBottomStartRadius: value => [[
|
236
|
-
borderBottomEndRadius: value => [[
|
237
|
-
marginBlockStart: value => [[
|
238
|
-
marginBlockEnd: value => [[
|
194
|
+
borderTopStartRadius: value => [["borderStartStartRadius", value]],
|
195
|
+
borderTopEndRadius: value => [["borderStartEndRadius", value]],
|
196
|
+
borderBottomStartRadius: value => [["borderEndStartRadius", value]],
|
197
|
+
borderBottomEndRadius: value => [["borderEndEndRadius", value]],
|
198
|
+
marginBlockStart: value => [["marginTop", value]],
|
199
|
+
marginBlockEnd: value => [["marginBottom", value]],
|
239
200
|
marginStart: shorthands.marginInlineStart,
|
240
201
|
marginEnd: shorthands.marginInlineEnd,
|
241
202
|
marginHorizontal: shorthands.marginInline,
|
242
203
|
marginVertical: shorthands.marginBlock,
|
243
|
-
paddingBlockStart: rawValue => [[
|
244
|
-
paddingBlockEnd: rawValue => [[
|
204
|
+
paddingBlockStart: rawValue => [["paddingTop", rawValue]],
|
205
|
+
paddingBlockEnd: rawValue => [["paddingBottom", rawValue]],
|
245
206
|
paddingStart: shorthands.paddingInlineStart,
|
246
207
|
paddingEnd: shorthands.paddingInlineEnd,
|
247
208
|
paddingHorizontal: shorthands.paddingInline,
|
248
209
|
paddingVertical: shorthands.paddingBlock,
|
249
|
-
insetBlockStart: value => [[
|
250
|
-
insetBlockEnd: value => [[
|
210
|
+
insetBlockStart: value => [["top", value]],
|
211
|
+
insetBlockEnd: value => [["bottom", value]],
|
251
212
|
start: shorthands.insetInlineStart,
|
252
213
|
end: shorthands.insetInlineEnd
|
253
214
|
};
|
@@ -62,7 +62,7 @@ import type { TStyleValue } from '../common-types';
|
|
62
62
|
|
63
63
|
type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
|
64
64
|
|
65
|
-
declare
|
65
|
+
declare const shorthands: {
|
66
66
|
all: (_: TStyleValue) => TReturn,
|
67
67
|
animation: (value: TStyleValue) => Array<[string, TStyleValue]>,
|
68
68
|
background: (value: TStyleValue) => TReturn,
|
@@ -154,7 +154,7 @@ declare var shorthands: {
|
|
154
154
|
transition: (value: TStyleValue) => TReturn,
|
155
155
|
};
|
156
156
|
|
157
|
-
declare
|
157
|
+
declare const aliases: {
|
158
158
|
borderHorizontal: $FlowFixMe,
|
159
159
|
borderVertical: $FlowFixMe,
|
160
160
|
borderBlockStart: $FlowFixMe,
|
@@ -201,6 +201,7 @@ declare var aliases: {
|
|
201
201
|
end: $FlowFixMe,
|
202
202
|
};
|
203
203
|
|
204
|
-
declare
|
205
|
-
|
206
|
-
|
204
|
+
declare export default $ReadOnly<{
|
205
|
+
...typeof shorthands,
|
206
|
+
...typeof aliases,
|
207
|
+
}>;
|
@@ -9,15 +9,6 @@ var messages = _interopRequireWildcard(require("../messages"));
|
|
9
9
|
var _objectUtils = require("../utils/object-utils");
|
10
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
11
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
12
|
-
/**
|
13
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
14
|
-
*
|
15
|
-
* This source code is licensed under the MIT license found in the
|
16
|
-
* LICENSE file in the root directory of this source tree.
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*/
|
20
|
-
|
21
12
|
function validateNamespace(namespace) {
|
22
13
|
let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
23
14
|
if (!(0, _objectUtils.isPlainObject)(namespace)) {
|
@@ -26,12 +17,12 @@ function validateNamespace(namespace) {
|
|
26
17
|
const ns = namespace;
|
27
18
|
for (const key in ns) {
|
28
19
|
const val = ns[key];
|
29
|
-
if (val === null || typeof val ===
|
20
|
+
if (val === null || typeof val === "string" || typeof val === "number") {
|
30
21
|
continue;
|
31
22
|
}
|
32
23
|
if (Array.isArray(val)) {
|
33
24
|
for (const v of val) {
|
34
|
-
if (v === null || typeof v ===
|
25
|
+
if (v === null || typeof v === "string" || typeof v === "number") {
|
35
26
|
continue;
|
36
27
|
}
|
37
28
|
throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
|
@@ -45,7 +36,7 @@ function validateNamespace(namespace) {
|
|
45
36
|
throw new Error(messages.ONLY_TOP_LEVEL_INLCUDES);
|
46
37
|
}
|
47
38
|
if ((0, _objectUtils.isPlainObject)(val)) {
|
48
|
-
if (key.startsWith(
|
39
|
+
if (key.startsWith("@") || key.startsWith(":")) {
|
49
40
|
if (conditions.includes(key)) {
|
50
41
|
throw new Error(messages.DUPLICATE_CONDITIONAL);
|
51
42
|
}
|
@@ -62,18 +53,18 @@ function validateConditionalStyles(val) {
|
|
62
53
|
let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
63
54
|
for (const key in val) {
|
64
55
|
const v = val[key];
|
65
|
-
if (!(key.startsWith(
|
56
|
+
if (!(key.startsWith("@") || key.startsWith(":") || key === "default")) {
|
66
57
|
throw new Error(messages.INVALID_PSEUDO_OR_AT_RULE);
|
67
58
|
}
|
68
59
|
if (conditions.includes(key)) {
|
69
60
|
throw new Error(messages.DUPLICATE_CONDITIONAL);
|
70
61
|
}
|
71
|
-
if (v === null || typeof v ===
|
62
|
+
if (v === null || typeof v === "string" || typeof v === "number") {
|
72
63
|
continue;
|
73
64
|
}
|
74
65
|
if (Array.isArray(v)) {
|
75
66
|
for (const vv of v) {
|
76
|
-
if (vv === null || typeof vv ===
|
67
|
+
if (vv === null || typeof vv === "string" || typeof vv === "number") {
|
77
68
|
continue;
|
78
69
|
}
|
79
70
|
throw new Error(messages.ILLEGAL_PROP_VALUE);
|
@@ -15,11 +15,11 @@ import {
|
|
15
15
|
} from './PreRule';
|
16
16
|
export declare function flattenRawStyleObject(
|
17
17
|
style: RawStyles,
|
18
|
-
options: StyleXOptions
|
18
|
+
options: StyleXOptions,
|
19
19
|
): ReadonlyArray<Readonly<[string, IPreRule]>>;
|
20
20
|
export declare function _flattenRawStyleObject(
|
21
21
|
style: RawStyles,
|
22
22
|
pseudos: ReadonlyArray<string>,
|
23
23
|
atRules: ReadonlyArray<string>,
|
24
|
-
options: StyleXOptions
|
24
|
+
options: StyleXOptions,
|
25
25
|
): Array<Readonly<[string, AnyPreRule | PreIncludedStylesRule]>>;
|