@stylexjs/shared 0.2.0-beta.8 → 0.2.0-beta.9

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.
@@ -0,0 +1,310 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
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
+ /**
19
+ * Shorthand properties:
20
+ * - [x] all - Should be banned
21
+ * - [x] animation
22
+ * - [x] background
23
+ * - [x] border
24
+ * - [x] border-block-end
25
+ * - [x] border-block-start
26
+ * - [x] border-bottom
27
+ * - [x] border-color
28
+ * - [x] border-image
29
+ * - [x] border-inline-end
30
+ * - [x] border-inline-start
31
+ * - [x] border-left
32
+ * - [x] border-radius
33
+ * - [x] border-right
34
+ * - [x] border-style
35
+ * - [x] border-top
36
+ * - [x] border-width
37
+ * - [x] column-rule
38
+ * - [x] columns
39
+ * - [x] container
40
+ * - [x] flex
41
+ * - [x] flex-flow
42
+ * - [x] font
43
+ * - [x] gap
44
+ * - [x] grid
45
+ * - [x] grid-area
46
+ * - [x] grid-column
47
+ * - [x] grid-row
48
+ * - [x] grid-template
49
+ * - [x] inset
50
+ * - [x] inset-block
51
+ * - [x] inset-inline
52
+ * - [x] list-style
53
+ * - [x] margin
54
+ * - [x] mask
55
+ * - [x] offset
56
+ * - [x] outline
57
+ * - [x] overflow
58
+ * - [x] padding
59
+ * - [x] place-content
60
+ * - [x] place-items
61
+ * - [x] place-self
62
+ * - [x] scroll-margin
63
+ * - [x] scroll-padding
64
+ * - [x] text-decoration
65
+ * - [x] text-emphasis
66
+ * - [x] transition
67
+ */
68
+
69
+ const shorthands = {
70
+ all: _ => {
71
+ throw new Error('all is not supported');
72
+ },
73
+ animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]],
74
+ background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]],
75
+ // These will be removed later, matching the properties with React Native.
76
+ // For now, we're compiling them to the React Native properties.
77
+ // @Deprecated
78
+ border: rawValue => {
79
+ if (typeof rawValue === 'number') {
80
+ return shorthands.borderWidth(rawValue);
81
+ }
82
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
83
+ return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
84
+ },
85
+ // @Deprecated
86
+ borderInline: rawValue => {
87
+ if (typeof rawValue === 'number') {
88
+ return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
89
+ }
90
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
91
+ return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
92
+ },
93
+ // @Deprecated
94
+ borderBlock: rawValue => {
95
+ if (typeof rawValue === 'number') {
96
+ return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
97
+ }
98
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
99
+ return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
100
+ },
101
+ // @Deprecated
102
+ borderTop: rawValue => {
103
+ if (typeof rawValue === 'number') {
104
+ return [['borderTopWidth', rawValue]];
105
+ }
106
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
107
+ return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
108
+ },
109
+ // @Deprecated
110
+ borderInlineEnd: rawValue => {
111
+ if (typeof rawValue === 'number') {
112
+ return [['borderInlineEndWidth', rawValue]];
113
+ }
114
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
115
+ return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
116
+ },
117
+ // @Deprecated
118
+ borderRight: rawValue => {
119
+ 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(' '));
120
+ },
121
+ // @Deprecated
122
+ borderBottom: rawValue => {
123
+ if (typeof rawValue === 'number') {
124
+ return [['borderBottomWidth', rawValue]];
125
+ }
126
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
127
+ return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
128
+ },
129
+ // @Deprecated
130
+ borderInlineStart: rawValue => {
131
+ if (typeof rawValue === 'number') {
132
+ return [['borderInlineStartWidth', rawValue]];
133
+ }
134
+ const [width, style, color] = (0, _splitCssValue.default)(rawValue);
135
+ return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
136
+ },
137
+ // @Deprecated
138
+ borderLeft: rawValue => {
139
+ 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(' '));
140
+ },
141
+ borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
142
+ borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
143
+ borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
144
+ borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]],
145
+ borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]],
146
+ borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]],
147
+ borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]],
148
+ borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]],
149
+ borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]],
150
+ borderInlineStartColor: value => [['borderInlineStartColor', value], ['borderLeftColor', null], ['borderRightColor', null]],
151
+ borderInlineEndColor: value => [['borderInlineEndColor', value], ['borderLeftColor', null], ['borderRightColor', null]],
152
+ borderInlineStartStyle: value => [['borderInlineStartStyle', value], ['borderLeftStyle', null], ['borderRightStyle', null]],
153
+ borderInlineEndStyle: value => [['borderInlineEndStyle', value], ['borderLeftStyle', null], ['borderRightStyle', null]],
154
+ borderInlineStartWidth: value => [['borderInlineStartWidth', value], ['borderLeftWidth', null], ['borderRightWidth', null]],
155
+ borderInlineEndWidth: value => [['borderInlineEndWidth', value], ['borderLeftWidth', null], ['borderRightWidth', null]],
156
+ borderLeftColor: value => [['borderLeftColor', value], ['borderInlineStartColor', null], ['borderInlineEndColor', null]],
157
+ borderRightColor: value => [['borderRightColor', value], ['borderInlineStartColor', null], ['borderInlineEndColor', null]],
158
+ borderLeftStyle: value => [['borderLeftStyle', value], ['borderInlineStartStyle', null], ['borderInlineEndStyle', null]],
159
+ borderRightStyle: value => [['borderRightStyle', value], ['borderInlineStartStyle', null], ['borderInlineEndStyle', null]],
160
+ borderLeftWidth: value => [['borderLeftWidth', value], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]],
161
+ borderRightWidth: value => [['borderRightWidth', value], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]],
162
+ borderRadius: value => {
163
+ const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
164
+ if (values.length === 1) {
165
+ return [['borderRadius', value],
166
+ // // logical constituents
167
+ ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
168
+ // physical constituents
169
+ ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
170
+ }
171
+
172
+ // @Deprecated
173
+ const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
174
+ return [
175
+ // split into logical consituents
176
+ ['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
177
+ // unset physical consituents
178
+ ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
179
+ },
180
+ borderStartStartRadius: value => [['borderStartStartRadius', value], ['borderTopLeftRadius', null], ['borderTopRightRadius', null]],
181
+ borderStartEndRadius: value => [['borderStartEndRadius', value], ['borderTopLeftRadius', null], ['borderTopRightRadius', null]],
182
+ borderEndStartRadius: value => [['borderEndStartRadius', value], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]],
183
+ borderEndEndRadius: value => [['borderEndEndRadius', value], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]],
184
+ borderTopLeftRadius: value => [['borderTopLeftRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null]],
185
+ borderTopRightRadius: value => [['borderTopRightRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null]],
186
+ borderBottomLeftRadius: value => [['borderBottomLeftRadius', value], ['borderEndStartRadius', null], ['borderEndEndRadius', null]],
187
+ borderBottomRightRadius: value => [['borderBottomRightRadius', value], ['borderEndStartRadius', null], ['borderEndEndRadius', null]],
188
+ columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]],
189
+ columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
190
+ container: value => [['container', value], ['containerName', null], ['containerType', null]],
191
+ flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
192
+ flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
193
+ // @Deprecated ?
194
+ font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]],
195
+ gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
196
+ grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null]],
197
+ gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]],
198
+ gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]],
199
+ gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]],
200
+ gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]],
201
+ inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]],
202
+ insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]],
203
+ insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]],
204
+ insetInlineStart: value => [['insetInlineStart', value], ['left', null], ['right', null]],
205
+ insetInlineEnd: value => [['insetInlineEnd', value], ['left', null], ['right', null]],
206
+ left: value => [['left', value], ['insetInlineStart', null], ['insetInlineEnd', null]],
207
+ right: value => [['right', value], ['insetInlineStart', null], ['insetInlineEnd', null]],
208
+ listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
209
+ margin: value => {
210
+ const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
211
+ if (values.length === 1) {
212
+ return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]];
213
+ }
214
+ // @Deprecated
215
+ const [top, right = top, bottom = top, left = right] = values;
216
+ return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]];
217
+ },
218
+ marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
219
+ marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
220
+ marginInlineStart: value => [['marginInlineStart', value], ['marginLeft', null], ['marginRight', null]],
221
+ marginInlineEnd: value => [['marginInlineEnd', value], ['marginLeft', null], ['marginRight', null]],
222
+ marginLeft: value => [['marginLeft', value], ['marginInlineStart', null], ['marginInlineEnd', null]],
223
+ marginRight: value => [['marginRight', value], ['marginInlineStart', null], ['marginInlineEnd', null]],
224
+ mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]],
225
+ offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
226
+ outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]],
227
+ overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
228
+ padding: rawValue => {
229
+ const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
230
+ if (values.length === 1) {
231
+ return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
232
+ }
233
+ // @Deprecated
234
+ const [top, right = top, bottom = top, left = right] = values;
235
+ return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
236
+ },
237
+ paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
238
+ paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
239
+ paddingInlineStart: value => [['paddingInlineStart', value], ['paddingLeft', null], ['paddingRight', null]],
240
+ paddingInlineEnd: value => [['paddingInlineEnd', value], ['paddingLeft', null], ['paddingRight', null]],
241
+ paddingLeft: value => [['paddingLeft', value], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
242
+ paddingRight: value => [['paddingRight', value], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
243
+ placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]],
244
+ placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]],
245
+ placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]],
246
+ scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]],
247
+ scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]],
248
+ scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]],
249
+ textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]],
250
+ textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]],
251
+ transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
252
+ };
253
+ const aliases = {
254
+ // @Deprecated
255
+ borderHorizontal: shorthands.borderInline,
256
+ // @Deprecated
257
+ borderVertical: shorthands.borderBlock,
258
+ // @Deprecated
259
+ borderBlockStart: shorthands.borderTop,
260
+ // @Deprecated
261
+ borderEnd: shorthands.borderInlineEnd,
262
+ // @Deprecated
263
+ borderBlockEnd: shorthands.borderBottom,
264
+ // @Deprecated
265
+ borderStart: shorthands.borderInlineStart,
266
+ borderHorizontalWidth: shorthands.borderInlineWidth,
267
+ borderHorizontalStyle: shorthands.borderInlineStyle,
268
+ borderHorizontalColor: shorthands.borderInlineColor,
269
+ borderVerticalWidth: shorthands.borderBlockWidth,
270
+ borderVerticalStyle: shorthands.borderBlockStyle,
271
+ borderVerticalColor: shorthands.borderBlockColor,
272
+ borderBlockStartColor: value => [['borderTopColor', value]],
273
+ borderBlockEndColor: value => [['borderBottomColor', value]],
274
+ borderBlockStartStyle: value => [['borderTopStyle', value]],
275
+ borderBlockEndStyle: value => [['borderBottomStyle', value]],
276
+ borderBlockStartWidth: value => [['borderTopWidth', value]],
277
+ borderBlockEndWidth: value => [['borderBottomWidth', value]],
278
+ borderStartColor: shorthands.borderInlineStartColor,
279
+ borderEndColor: shorthands.borderInlineEndColor,
280
+ borderStartStyle: shorthands.borderInlineStartStyle,
281
+ borderEndStyle: shorthands.borderInlineEndStyle,
282
+ borderStartWidth: shorthands.borderInlineStartWidth,
283
+ borderEndWidth: shorthands.borderInlineEndWidth,
284
+ borderTopStartRadius: value => [['borderStartStartRadius', value]],
285
+ borderTopEndRadius: value => [['borderStartEndRadius', value]],
286
+ borderBottomStartRadius: value => [['borderEndStartRadius', value]],
287
+ borderBottomEndRadius: value => [['borderEndEndRadius', value]],
288
+ marginBlockStart: value => [['marginTop', value]],
289
+ marginBlockEnd: value => [['marginBottom', value]],
290
+ marginStart: shorthands.marginInlineStart,
291
+ marginEnd: shorthands.marginInlineEnd,
292
+ marginHorizontal: shorthands.marginInline,
293
+ marginVertical: shorthands.marginBlock,
294
+ paddingBlockStart: rawValue => [['paddingTop', rawValue]],
295
+ paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
296
+ paddingStart: shorthands.paddingInlineStart,
297
+ paddingEnd: shorthands.paddingInlineEnd,
298
+ paddingHorizontal: shorthands.paddingInline,
299
+ paddingVertical: shorthands.paddingBlock,
300
+ insetBlockStart: value => [['top', value]],
301
+ insetBlockEnd: value => [['bottom', value]],
302
+ start: shorthands.insetInlineStart,
303
+ end: shorthands.insetInlineEnd
304
+ };
305
+ const expansions = {
306
+ ...shorthands,
307
+ ...aliases
308
+ };
309
+ var _default = expansions;
310
+ exports.default = _default;
@@ -0,0 +1,135 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
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
+ const shorthands = {
19
+ all: _ => {
20
+ throw new Error('all is not supported');
21
+ },
22
+ animation: value => {
23
+ throw new Error('animation is not supported');
24
+ },
25
+ background: value => {
26
+ throw new Error('background is not supported. Use background-color, border-image etc. instead.');
27
+ },
28
+ border: rawValue => {
29
+ throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
30
+ },
31
+ borderInline: rawValue => {
32
+ throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
33
+ },
34
+ // @Deprecated
35
+ borderBlock: rawValue => {
36
+ throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
37
+ },
38
+ // @Deprecated
39
+ borderTop: rawValue => {
40
+ throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
41
+ },
42
+ // @Deprecated
43
+ borderInlineEnd: rawValue => {
44
+ throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
45
+ },
46
+ // @Deprecated
47
+ borderRight: rawValue => {
48
+ throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
49
+ },
50
+ // @Deprecated
51
+ borderBottom: rawValue => {
52
+ throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
53
+ },
54
+ // @Deprecated
55
+ borderInlineStart: rawValue => {
56
+ throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
57
+ },
58
+ // @Deprecated
59
+ borderLeft: rawValue => {
60
+ 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(' '));
61
+ },
62
+ margin: value => {
63
+ const values = (0, _splitCssValue.default)(value);
64
+ if (values.length === 1) {
65
+ return [['margin', values[0]]];
66
+ } else {
67
+ throw new Error('margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.');
68
+ }
69
+ },
70
+ padding: rawValue => {
71
+ const values = (0, _splitCssValue.default)(rawValue);
72
+ if (values.length === 1) {
73
+ return [['padding', values[0]]];
74
+ }
75
+ throw new Error('padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.');
76
+ }
77
+ };
78
+ const aliases = {
79
+ // @UNSUPPORTED
80
+ borderHorizontal: shorthands.borderInline,
81
+ // @UNSUPPORTED
82
+ borderVertical: shorthands.borderBlock,
83
+ // @UNSUPPORTED
84
+ borderBlockStart: shorthands.borderTop,
85
+ // @UNSUPPORTED
86
+ borderEnd: shorthands.borderInlineEnd,
87
+ // @UNSUPPORTED
88
+ borderBlockEnd: shorthands.borderBottom,
89
+ // @UNSUPPORTED
90
+ borderStart: shorthands.borderInlineStart,
91
+ borderHorizontalWidth: value => [['borderInlineWidth', value]],
92
+ borderHorizontalStyle: value => [['borderInlineStyle', value]],
93
+ borderHorizontalColor: value => [['borderInlineColor', value]],
94
+ borderVerticalWidth: value => [['borderBlockWidth', value]],
95
+ borderVerticalStyle: value => [['borderBlockStyle', value]],
96
+ borderVerticalColor: value => [['borderBlockColor', value]],
97
+ borderBlockStartColor: value => [['borderTopColor', value]],
98
+ borderBlockEndColor: value => [['borderBottomColor', value]],
99
+ borderBlockStartStyle: value => [['borderTopStyle', value]],
100
+ borderBlockEndStyle: value => [['borderBottomStyle', value]],
101
+ borderBlockStartWidth: value => [['borderTopWidth', value]],
102
+ borderBlockEndWidth: value => [['borderBottomWidth', value]],
103
+ borderStartColor: value => [['borderInlineStartColor', value]],
104
+ borderEndColor: value => [['borderInlineEndColor', value]],
105
+ borderStartStyle: value => [['borderInlineStartStyle', value]],
106
+ borderEndStyle: value => [['borderInlineEndStyle', value]],
107
+ borderStartWidth: value => [['borderInlineStartWidth', value]],
108
+ borderEndWidth: value => [['borderInlineEndWidth', value]],
109
+ borderTopStartRadius: value => [['borderStartStartRadius', value]],
110
+ borderTopEndRadius: value => [['borderStartEndRadius', value]],
111
+ borderBottomStartRadius: value => [['borderEndStartRadius', value]],
112
+ borderBottomEndRadius: value => [['borderEndEndRadius', value]],
113
+ marginBlockStart: value => [['marginTop', value]],
114
+ marginBlockEnd: value => [['marginBottom', value]],
115
+ marginStart: value => [['marginInlineStart', value]],
116
+ marginEnd: value => [['marginInlineEnd', value]],
117
+ marginHorizontal: value => [['marginInline', value]],
118
+ marginVertical: value => [['marginBlock', value]],
119
+ paddingBlockStart: rawValue => [['paddingTop', rawValue]],
120
+ paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
121
+ paddingStart: value => [['paddingInlineStart', value]],
122
+ paddingEnd: value => [['paddingInlineEnd', value]],
123
+ paddingHorizontal: value => [['paddingInline', value]],
124
+ paddingVertical: value => [['paddingBlock', value]],
125
+ insetBlockStart: value => [['top', value]],
126
+ insetBlockEnd: value => [['bottom', value]],
127
+ start: value => [['insetInlineStart', value]],
128
+ end: value => [['insetInlineEnd', value]]
129
+ };
130
+ const expansions = {
131
+ ...shorthands,
132
+ ...aliases
133
+ };
134
+ var _default = expansions;
135
+ exports.default = _default;
@@ -0,0 +1,142 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
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
+ /// # Handle CSS shorthands in a React Native compatible way.
19
+ ///
20
+ /// This means:
21
+ /// - disallowing certain properties altogether by throwing errors
22
+ /// - disallowing multiple values within many shorthands
23
+ /// - Treating certain non-standard properties as aliases for real CSS properties
24
+
25
+ const shorthands = {
26
+ all: _ => {
27
+ throw new Error('all is not supported');
28
+ },
29
+ animation: value => {
30
+ throw new Error('animation is not supported');
31
+ },
32
+ background: value => {
33
+ throw new Error('background is not supported. Use background-color, border-image etc. instead.');
34
+ },
35
+ border: rawValue => {
36
+ throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
37
+ },
38
+ borderInline: rawValue => {
39
+ throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
40
+ },
41
+ // @Deprecated
42
+ borderBlock: rawValue => {
43
+ throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
44
+ },
45
+ // @Deprecated
46
+ borderTop: rawValue => {
47
+ throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
48
+ },
49
+ // @Deprecated
50
+ borderInlineEnd: rawValue => {
51
+ throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
52
+ },
53
+ // @Deprecated
54
+ borderRight: rawValue => {
55
+ throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
56
+ },
57
+ // @Deprecated
58
+ borderBottom: rawValue => {
59
+ throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
60
+ },
61
+ // @Deprecated
62
+ borderInlineStart: rawValue => {
63
+ throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
64
+ },
65
+ // @Deprecated
66
+ borderLeft: rawValue => {
67
+ 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(' '));
68
+ },
69
+ margin: value => {
70
+ const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
71
+ if (values.length === 1) {
72
+ return [['margin', values[0]]];
73
+ } else {
74
+ throw new Error('margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.');
75
+ }
76
+ },
77
+ padding: rawValue => {
78
+ const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
79
+ if (values.length === 1) {
80
+ return [['padding', values[0]]];
81
+ }
82
+ throw new Error('padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.');
83
+ }
84
+ };
85
+ const aliases = {
86
+ // @UNSUPPORTED
87
+ borderHorizontal: shorthands.borderInline,
88
+ // @UNSUPPORTED
89
+ borderVertical: shorthands.borderBlock,
90
+ // @UNSUPPORTED
91
+ borderBlockStart: shorthands.borderTop,
92
+ // @UNSUPPORTED
93
+ borderEnd: shorthands.borderInlineEnd,
94
+ // @UNSUPPORTED
95
+ borderBlockEnd: shorthands.borderBottom,
96
+ // @UNSUPPORTED
97
+ borderStart: shorthands.borderInlineStart,
98
+ borderHorizontalWidth: value => [['borderInlineWidth', value]],
99
+ borderHorizontalStyle: value => [['borderInlineStyle', value]],
100
+ borderHorizontalColor: value => [['borderInlineColor', value]],
101
+ borderVerticalWidth: value => [['borderBlockWidth', value]],
102
+ borderVerticalStyle: value => [['borderBlockStyle', value]],
103
+ borderVerticalColor: value => [['borderBlockColor', value]],
104
+ borderBlockStartColor: value => [['borderTopColor', value]],
105
+ borderBlockEndColor: value => [['borderBottomColor', value]],
106
+ borderBlockStartStyle: value => [['borderTopStyle', value]],
107
+ borderBlockEndStyle: value => [['borderBottomStyle', value]],
108
+ borderBlockStartWidth: value => [['borderTopWidth', value]],
109
+ borderBlockEndWidth: value => [['borderBottomWidth', value]],
110
+ borderStartColor: value => [['borderInlineStartColor', value]],
111
+ borderEndColor: value => [['borderInlineEndColor', value]],
112
+ borderStartStyle: value => [['borderInlineStartStyle', value]],
113
+ borderEndStyle: value => [['borderInlineEndStyle', value]],
114
+ borderStartWidth: value => [['borderInlineStartWidth', value]],
115
+ borderEndWidth: value => [['borderInlineEndWidth', value]],
116
+ borderTopStartRadius: value => [['borderStartStartRadius', value]],
117
+ borderTopEndRadius: value => [['borderStartEndRadius', value]],
118
+ borderBottomStartRadius: value => [['borderEndStartRadius', value]],
119
+ borderBottomEndRadius: value => [['borderEndEndRadius', value]],
120
+ marginBlockStart: value => [['marginTop', value]],
121
+ marginBlockEnd: value => [['marginBottom', value]],
122
+ marginStart: value => [['marginInlineStart', value]],
123
+ marginEnd: value => [['marginInlineEnd', value]],
124
+ marginHorizontal: value => [['marginInline', value]],
125
+ marginVertical: value => [['marginBlock', value]],
126
+ paddingBlockStart: rawValue => [['paddingTop', rawValue]],
127
+ paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
128
+ paddingStart: value => [['paddingInlineStart', value]],
129
+ paddingEnd: value => [['paddingInlineEnd', value]],
130
+ paddingHorizontal: value => [['paddingInline', value]],
131
+ paddingVertical: value => [['paddingBlock', value]],
132
+ insetBlockStart: value => [['top', value]],
133
+ insetBlockEnd: value => [['bottom', value]],
134
+ start: value => [['insetInlineStart', value]],
135
+ end: value => [['insetInlineEnd', value]]
136
+ };
137
+ const expansions = {
138
+ ...shorthands,
139
+ ...aliases
140
+ };
141
+ var _default = expansions;
142
+ exports.default = _default;