@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.
- package/README.md +81 -0
- package/lib/expand-shorthands.js +246 -303
- package/lib/generate-css-rule.js +6 -34
- package/lib/index.d.ts +1 -1
- package/lib/index.js.flow +5 -0
- package/lib/messages.js +3 -5
- package/lib/namespace-transforms/__tests__/preflatten.test.js +120 -0
- package/lib/namespace-transforms/preflatten.js +89 -0
- package/lib/preprocess-rules/application-order.js +259 -0
- package/lib/preprocess-rules/expand-shorthands.js +156 -0
- package/lib/preprocess-rules/index.js +39 -0
- package/lib/preprocess-rules/legacy-expand-shorthands.js +169 -0
- package/lib/preprocess-rules/null-out-longhand.js +310 -0
- package/lib/preprocess-rules/property-specificity.js +135 -0
- package/lib/preprocess-rules/react-native-web.js +142 -0
- package/lib/stylex-create.js +17 -13
- package/lib/stylex-keyframes.js +22 -10
- package/lib/utils/Rule.js +71 -0
- package/lib/utils/normalize-value.js +3 -0
- package/lib/utils/property-priorities.js +116 -0
- package/lib/utils/split-css-value.js +47 -0
- package/package.json +1 -1
@@ -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;
|