@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.
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.BANNED_PROPERTIES = void 0;
7
6
  exports.default = flatMapExpandedShorthands;
8
7
  exports.expandedKeys = void 0;
9
8
  var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
@@ -42,337 +41,281 @@ function splitValue(str) {
42
41
  return nodes;
43
42
  }
44
43
 
45
- // TODO: to be added later.
46
- // const aliases = {
47
- // marginInlineStart: (rawValue) => [['marginStart', rawValue]],
48
- // marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
49
- // marginInline: (rawValue) => [
50
- // ['marginStart', rawValue],
51
- // ['marginEnd', rawValue],
52
- // ],
53
- // paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
54
- // paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
55
- // paddingInline: (rawValue) => [
56
- // ['paddingStart', rawValue],
57
- // ['paddingEnd', rawValue],
58
- // ],
59
- // // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
60
- // // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
61
- // // // This will need to change.
62
- // // 'borderInline': (rawValue) => [
63
- // // ['borderStart', rawValue],
64
- // // ['borderEnd', rawValue],
65
- // // ],
66
- // };
67
-
68
44
  /**
69
45
  * Shorthand properties:
70
- * - [!] all - BANNED
71
- * - [!] animation - BANNED
72
- * - [!] background - BANNED
73
- * - [x] border - Expanded to border-{direction}. Not to border-*-(width|style|color).
74
- * This is to limit the number of atoms to 4 instead of 12.
75
- * - [o] border-top - Only the shorthand is allowed.
76
- * - [o] border-end - Only the shorthand is allowed.
77
- * - [o] border-bottom - Only the shorthand is allowed.
78
- * - [o] border-start - Only the shorthand is allowed.
79
- * - [!] border-left - BANNED
80
- * - [!] border-right
81
- * - [!] border-*-width - BANNED
82
- * - [!] border-*-style - BANNED
83
- * - [!] border-*-color - BANNED
84
- * - [ ] border-block-end
85
- * - [ ] border-block-start
86
- * - [ ] border-inline-start
87
- * - [ ] border-inline-end
88
- * - [!] border-image - BANNED
46
+ * - [x] all - Should be banned
47
+ * - [x] animation
48
+ * - [x] background
49
+ * - [x] border
50
+ * - [x] border-block-end
51
+ * - [x] border-block-start
52
+ * - [x] border-bottom
53
+ * - [x] border-color
54
+ * - [x] border-image
55
+ * - [x] border-inline-end
56
+ * - [x] border-inline-start
57
+ * - [x] border-left
89
58
  * - [x] border-radius
90
- * - [o] column-rule - Only the shorthand is allowed.
91
- * - [!] columns - BANNED
92
- * - [!] flex - BANNED
93
- * - [!] flex-flow - BANNED
94
- * - [!] font - BANNED
59
+ * - [x] border-right
60
+ * - [x] border-style
61
+ * - [x] border-top
62
+ * - [x] border-width
63
+ * - [x] column-rule
64
+ * - [x] columns
65
+ * - [x] container
66
+ * - [x] flex
67
+ * - [x] flex-flow
68
+ * - [x] font
95
69
  * - [x] gap
96
- * - [!] grid - BANNED
97
- * - [!] grid-area - BANNED
98
- * - [!] grid-column - BANNED
99
- * - [!] grid-row - BANNED
100
- * - [!] grid-template - BANNED
101
- * - [!] grid-template-areas - BANNED
102
- *
103
- * - [o] list-style - Only the shorthand is allowed.
70
+ * - [x] grid
71
+ * - [x] grid-area
72
+ * - [x] grid-column
73
+ * - [x] grid-row
74
+ * - [x] grid-template
75
+ * - [x] inset
76
+ * - [x] inset-block
77
+ * - [x] inset-inline
78
+ * - [x] list-style
104
79
  * - [x] margin
105
- * - [o] mask - Only the shorthand is allowed.
106
- * - [o] offset - Only the shorthand is allowed.
107
- * - [o] outline - Only the shorthand is allowed.
80
+ * - [x] mask
81
+ * - [x] offset
82
+ * - [x] outline
108
83
  * - [x] overflow
109
84
  * - [x] padding
110
85
  * - [x] place-content
111
86
  * - [x] place-items
112
87
  * - [x] place-self
113
- * - [X] scroll-margin
88
+ * - [x] scroll-margin
114
89
  * - [x] scroll-padding
115
- * - [o] text-decoration - Only the shorthand is allowed.
116
- * - [o] text-emphasis - Only the shorthand is allowed.
117
- * - [!] transition - BANNED
90
+ * - [x] text-decoration
91
+ * - [x] text-emphasis
92
+ * - [x] transition
118
93
  */
119
94
 
120
- const BANNED_PROPERTIES = {
121
- all: '`all` is not supported. Use individual properties instead.',
122
- animation: '`animation` is not supported. Use individual properties like `animationName`, `animationDuration`, etc. instead.',
123
- background: '`background` is not supported. Use individual properties like `backgroundImage`, `backgroundPosition`, etc. instead.',
124
- borderColor: '`borderColor` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
125
- borderStyle: '`borderStyle` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
126
- borderWidth: '`borderWidth` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
127
- borderTopColor: '`borderTopColor` is not supported. Use `borderTop` instead.',
128
- borderTopStyle: '`borderTopStyle` is not supported. Use `borderTop` instead.',
129
- borderTopWidth: '`borderTopWidth` is not supported. Use `borderTop` instead.',
130
- borderEndColor: '`borderEndColor` is not supported. Use `borderEnd` instead.',
131
- borderEndStyle: '`borderEndStyle` is not supported. Use `borderEnd` instead.',
132
- borderEndWidth: '`borderEndWidth` is not supported. Use `borderEnd` instead.',
133
- borderBottomColor: '`borderBottomColor` is not supported. Use `borderBottom` instead.',
134
- borderBottomStyle: '`borderBottomStyle` is not supported. Use `borderBottom` instead.',
135
- borderBottomWidth: '`borderBottomWidth` is not supported. Use `borderBottom` instead.',
136
- borderStartColor: '`borderStartColor` is not supported. Use `borderStart` instead.',
137
- borderStartStyle: '`borderStartStyle` is not supported. Use `borderStart` instead.',
138
- borderStartWidth: '`borderStartWidth` is not supported. Use `borderStart` instead.',
139
- borderBlockStartColor: '`borderBlockStartColor` is not supported. Use `borderTop` instead.',
140
- borderBlockStartStyle: '`borderBlockStartStyle` is not supported. Use `borderTop` instead.',
141
- borderBlockStartWidth: '`borderBlockStartWidth` is not supported. Use `borderTop` instead.',
142
- borderBlockEndColor: '`borderBlockEndColor` is not supported. Use `borderBottom` instead.',
143
- borderBlockEndStyle: '`borderBlockEndStyle` is not supported. Use `borderBottom` instead.',
144
- borderBlockEndWidth: '`borderBlockEndWidth` is not supported. Use `borderBottom` instead.',
145
- borderInlineStartColor: '`borderInlineStartColor` is not supported. Use `borderStart` instead.',
146
- borderInlineStartStyle: '`borderInlineStartStyle` is not supported. Use `borderStart` instead.',
147
- borderInlineStartWidth: '`borderInlineStartWidth` is not supported. Use `borderStart` instead.',
148
- borderInlineEndColor: '`borderInlineEndColor` is not supported. Use `borderEnd` instead.',
149
- borderInlineEndStyle: '`borderInlineEndStyle` is not supported. Use `borderEnd` instead.',
150
- borderInlineEndWidth: '`borderInlineEndWidth` is not supported. Use `borderEnd` instead.',
151
- borderLeft: '`borderLeft` is not supported. Use `borderStart` instead.',
152
- borderLeftColor: '`borderLeftColor` is not supported. Use `borderStart` instead.',
153
- borderLeftStyle: '`borderLeftStyle` is not supported. Use `borderStart` instead.',
154
- borderLeftWidth: '`borderLeftWidth` is not supported. Use `borderStart` instead.',
155
- borderRight: '`borderRight` is not supported. Use `borderEnd` instead.',
156
- borderRightColor: '`borderRightColor` is not supported. Use `borderEnd` instead.',
157
- borderRightStyle: '`borderRightStyle` is not supported. Use `borderEnd` instead.',
158
- borderRightWidth: '`borderRightWidth` is not supported. Use `borderEnd` instead.',
159
- borderTopLeftRadius: '`borderTopLeftRadius` is not supported. Use `borderTopStartRadius` instead.',
160
- borderTopRightRadius: '`borderTopRightRadius` is not supported. Use `borderTopEndRadius` instead.',
161
- borderBottomLeftRadius: '`borderBottomLeftRadius` is not supported. Use `borderBottomStartRadius` instead.',
162
- borderBottomRightRadius: '`borderBottomRightRadius` is not supported. Use `borderBottomEndRadius` instead.',
163
- borderImageSource: '`borderImageSource` is not supported. Use `borderImage` instead.',
164
- borderImageSlice: '`borderImageSlice` is not supported. Use `borderImage` instead.',
165
- borderImageWidth: '`borderImageWidth` is not supported. Use `borderImage` instead.',
166
- borderImageOutset: '`borderImageOutset` is not supported. Use `borderImage` instead.',
167
- borderImageRepeat: '`borderImageRepeat` is not supported. Use `borderImage` instead.',
168
- marginLeft: '`marginLeft` is not supported. Use `marginStart` instead.',
169
- marginRight: '`marginRight` is not supported. Use `marginEnd` instead.',
170
- paddingLeft: '`paddingLeft` is not supported. Use `paddingStart` instead.',
171
- paddingRight: '`paddingRight` is not supported. Use `paddingEnd` instead.',
172
- columnRuleWidth: '`columnRuleWidth` is not supported. Use `columnRule` instead.',
173
- columnRuleStyle: '`columnRuleStyle` is not supported. Use `columnRule` instead.',
174
- columnRuleColor: '`columnRuleColor` is not supported. Use `columnRule` instead.',
175
- columns: '`columns` is not supported. Use `columnCount` and `columnWidth` instead.',
176
- flex: '`flex` is not supported. Use `flexGrow`, `flexShrink`, and `flexBasis` instead.',
177
- flexFlow: '`flexFlow` is not supported. Use `flexDirection` and `flexWrap` instead.',
178
- font: '`font` is not supported. Use individual properties like `fontFamily`, `fontSize`, etc. instead.',
179
- grid: '`grid` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
180
- gridColumn: '`gridColumn` is not supported. Use `gridColumnStart` and `gridColumnEnd` instead.',
181
- gridRow: '`gridRow` is not supported. Use `gridRowStart` and `gridRowEnd` instead.',
182
- gridArea: '`gridArea` is not supported. Use `gridRowStart`, `gridColumnStart`, `gridRowEnd`, and `gridColumnEnd` instead.',
183
- gridTemplate: '`gridTemplate` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
184
- gridTemplateAreas: '`gridTemplateAreas` is not supported. Use `gridTemplateRows` and `gridTemplateColumns` instead.',
185
- listStyleImage: '`listStyleImage` is not supported. Use `listStyle` instead.',
186
- listStylePosition: '`listStylePosition` is not supported. Use `listStyle` instead.',
187
- listStyleType: '`listStyleType` is not supported. Use `listStyle` instead.',
188
- maskClip: '`maskClip` is not supported. Use `mask` instead.',
189
- maskComposite: '`maskComposite` is not supported. Use `mask` instead.',
190
- maskImage: '`maskImage` is not supported. Use `mask` instead.',
191
- maskMode: '`maskMode` is not supported. Use `mask` instead.',
192
- maskOrigin: '`maskOrigin` is not supported. Use `mask` instead.',
193
- maskPosition: '`maskPosition` is not supported. Use `mask` instead.',
194
- maskRepeat: '`maskRepeat` is not supported. Use `mask` instead.',
195
- maskSize: '`maskSize` is not supported. Use `mask` instead.',
196
- offsetAnchor: '`offsetAnchor` is not supported. Use `offset` instead.',
197
- offsetDistance: '`offsetDistance` is not supported. Use `offset` instead.',
198
- offsetPath: '`offsetPath` is not supported. Use `offset` instead.',
199
- offsetPosition: '`offsetPosition` is not supported. Use `offset` instead.',
200
- offsetRotate: '`offsetRotate` is not supported. Use `offset` instead.',
201
- outlineColor: '`outlineColor` is not supported. Use `outline` instead.',
202
- outlineStyle: '`outlineStyle` is not supported. Use `outline` instead.',
203
- outlineWidth: '`outlineWidth` is not supported. Use `outline` instead.',
204
- textDecorationColor: '`textDecorationColor` is not supported. Use `textDecoration` instead.',
205
- textDecorationLine: '`textDecorationLine` is not supported. Use `textDecoration` instead.',
206
- textDecorationStyle: '`textDecorationStyle` is not supported. Use `textDecoration` instead.',
207
- textDecorationThickness: '`textDecorationThickness` is not supported. Use `textDecoration` instead.',
208
- textEmphasisColor: '`textEmphasisColor` is not supported. Use `textEmphasis` instead.',
209
- textEmphasisStyle: '`textEmphasisStyle` is not supported. Use `textEmphasis` instead.',
210
- transition: '`transition` is not supported. Use individual properties like `transitionProperty`, `transitionDuration`, etc. instead.'
211
- };
212
- exports.BANNED_PROPERTIES = BANNED_PROPERTIES;
213
- const expansions = {
214
- border: rawValue => {
215
- return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
216
- },
217
- // border: (rawValue: string) => {
218
- // if (typeof rawValue === 'number') {
219
- // return expansions.borderWidth(rawValue);
220
- // }
221
- // const [width, style, color, more] = splitValue(rawValue);
222
- // if (more != null) {
223
- // throw new Error(messages.MULTIPLE_DIRECTIONS_IN_SHORTHAND);
224
- // }
225
- // if (style == null || color == null) {
226
- // throw new Error(
227
- // 'Border shorthand requires at least 2 values - width, style and color.'
228
- // );
229
- // }
230
- // return [
231
- // ...expansions.borderWidth(width),
232
- // ...expansions.borderStyle(style),
233
- // ...expansions.borderColor(color),
234
- // ];
235
- // },
236
- // borderTop: (rawValue: string) => {
237
- // if (typeof rawValue === 'number') {
238
- // return [['borderTopWidth', rawValue + 'px']];
239
- // }
240
- // const [width, style, color] = splitValue(rawValue);
241
- // if (style == null || color == null) {
242
- // throw new Error(
243
- // 'BorderTop shorthand requires at least 2 values - width, style and color.'
244
- // );
245
- // }
246
- // return [
247
- // ['borderTopWidth', width],
248
- // ['borderTopStyle', style],
249
- // ['borderTopColor', color],
250
- // ];
251
- // },
252
- // borderEnd: (rawValue: string) => {
253
- // if (typeof rawValue === 'number') {
254
- // return [['borderEndWidth', rawValue + 'px']];
255
- // }
256
- // const [width, style, color] = splitValue(rawValue);
257
- // if (style == null || color == null) {
258
- // throw new Error(
259
- // 'BorderEnd shorthand requires at least 2 values - width, style and color.'
260
- // );
261
- // }
262
- // return [
263
- // ['borderEndWidth', width],
264
- // ['borderEndStyle', style],
265
- // ['borderEndColor', color],
266
- // ];
267
- // },
268
- // borderBottom: (rawValue: string) => {
269
- // if (typeof rawValue === 'number') {
270
- // return [['borderBottomWidth', rawValue + 'px']];
271
- // }
272
- // const [width, style, color] = splitValue(rawValue);
273
- // if (style == null || color == null) {
274
- // throw new Error(
275
- // 'BorderBottom shorthand requires at least 2 values - width, style and color.'
276
- // );
277
- // }
278
- // return [
279
- // ['borderBottomWidth', width],
280
- // ['borderBottomStyle', style],
281
- // ['borderBottomColor', color],
282
- // ];
283
- // },
284
- // borderStart: (rawValue: string) => {
285
- // if (typeof rawValue === 'number') {
286
- // return [['borderStartWidth', rawValue + 'px']];
287
- // }
288
- // const [width, style, color] = splitValue(rawValue);
289
- // if (style == null || color == null) {
290
- // throw new Error(
291
- // 'BorderStart shorthand requires at least 2 values - width, style and color.'
292
- // );
293
- // }
294
- // return [
295
- // ['borderStartWidth', width],
296
- // ['borderStartStyle', style],
297
- // ['borderStartColor', color],
298
- // ];
299
- // },
300
- borderColor: rawValue => {
301
- const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
302
- return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
303
- },
304
- borderHorizontal: rawValue => {
305
- return [['borderStart', rawValue], ['borderEnd', rawValue]];
306
- },
307
- borderStyle: rawValue => {
308
- const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
309
- return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
310
- },
311
- borderVertical: rawValue => {
312
- return [['borderTop', rawValue], ['borderBottom', rawValue]];
313
- },
314
- borderWidth: rawValue => {
315
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
316
- return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
317
- },
318
- borderRadius: rawValue => {
319
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? splitValue(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
320
-
321
- return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
95
+ const shorthands = {
96
+ all: _ => {
97
+ throw new Error('all is not supported');
322
98
  },
323
- margin: rawValue => {
324
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
325
- return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
99
+ animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]],
100
+ background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]],
101
+ // These will be removed later, matching the properties with React Native.
102
+ // For now, we're compiling them to the React Native properties.
103
+ // @Deprecated
104
+ border: rawValue => {
105
+ if (typeof rawValue === 'number') {
106
+ return shorthands.borderWidth(rawValue);
107
+ }
108
+ const [width, style, color] = splitValue(rawValue);
109
+ return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
326
110
  },
327
- marginHorizontal: rawValue => {
328
- return [['marginStart', rawValue], ['marginEnd', rawValue]];
111
+ // @Deprecated
112
+ borderInline: rawValue => {
113
+ if (typeof rawValue === 'number') {
114
+ return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
115
+ }
116
+ const [width, style, color] = splitValue(rawValue);
117
+ return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
329
118
  },
330
- marginVertical: rawValue => {
331
- return [['marginTop', rawValue], ['marginBottom', rawValue]];
119
+ // @Deprecated
120
+ borderBlock: rawValue => {
121
+ if (typeof rawValue === 'number') {
122
+ return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
123
+ }
124
+ const [width, style, color] = splitValue(rawValue);
125
+ return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
332
126
  },
333
- overflow: rawValue => {
334
- const [x, y = x] = splitValue(rawValue);
335
- return [['overflowX', x], ['overflowY', y]];
127
+ // @Deprecated
128
+ borderTop: rawValue => {
129
+ if (typeof rawValue === 'number') {
130
+ return [['borderTopWidth', rawValue]];
131
+ }
132
+ const [width, style, color] = splitValue(rawValue);
133
+ return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
336
134
  },
337
- padding: rawValue => {
338
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
339
- return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
135
+ // @Deprecated
136
+ borderInlineEnd: rawValue => {
137
+ if (typeof rawValue === 'number') {
138
+ return [['borderInlineEndWidth', rawValue]];
139
+ }
140
+ const [width, style, color] = splitValue(rawValue);
141
+ return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
340
142
  },
341
- paddingHorizontal: rawValue => {
342
- return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
143
+ // @Deprecated
144
+ borderRight: rawValue => {
145
+ 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(' '));
343
146
  },
344
- paddingVertical: rawValue => {
345
- return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
147
+ // @Deprecated
148
+ borderBottom: rawValue => {
149
+ if (typeof rawValue === 'number') {
150
+ return [['borderBottomWidth', rawValue]];
151
+ }
152
+ const [width, style, color] = splitValue(rawValue);
153
+ return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
346
154
  },
347
- gap: rawValue => {
155
+ // @Deprecated
156
+ borderInlineStart: rawValue => {
348
157
  if (typeof rawValue === 'number') {
349
- return [['rowGap', rawValue], ['columnGap', rawValue]];
158
+ return [['borderInlineStartWidth', rawValue]];
350
159
  }
351
- const [row, column = row] = splitValue(rawValue);
352
- return [['rowGap', row], ['columnGap', column]];
160
+ const [width, style, color] = splitValue(rawValue);
161
+ return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
353
162
  },
354
- placeContent: rawValue => {
355
- const [align, justify = align] = splitValue(rawValue);
356
- return [['alignContent', align], ['justifyContent', justify]];
163
+ // @Deprecated
164
+ borderLeft: rawValue => {
165
+ 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(' '));
357
166
  },
358
- placeItems: rawValue => {
359
- const [align, justify = align] = splitValue(rawValue);
360
- return [['alignItems', align], ['justifyItems', justify]];
167
+ borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
168
+ borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
169
+ borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
170
+ borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]],
171
+ borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]],
172
+ borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]],
173
+ borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]],
174
+ borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]],
175
+ borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]],
176
+ borderRadius: value => {
177
+ const values = typeof value === 'number' ? [value] : splitValue(value);
178
+ if (values.length === 1) {
179
+ return [['borderRadius', value],
180
+ // // logical constituents
181
+ ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
182
+ // physical constituents
183
+ ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
184
+ }
185
+
186
+ // @Deprecated
187
+ const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
188
+ return [
189
+ // split into logical consituents
190
+ ['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
191
+ // unset physical consituents
192
+ ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
361
193
  },
362
- placeSelf: rawValue => {
363
- const [align, justify = align] = splitValue(rawValue);
364
- return [['alignSelf', align], ['justifySelf', justify]];
194
+ columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]],
195
+ columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
196
+ container: value => [['container', value], ['containerName', null], ['containerType', null]],
197
+ flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
198
+ flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
199
+ // @Deprecated ?
200
+ font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]],
201
+ gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
202
+ grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null]
203
+
204
+ // This is for grid items only
205
+ // Not a constituent of `grid`
206
+ // ['gridRow', null],
207
+ // ['gridRowStart', null],
208
+ // ['gridRowEnd', null],
209
+ // ['gridColumn', null],
210
+ // ['gridColumnStart', null],
211
+ // ['gridColumnEnd', null],
212
+ // ['gridArea', null],
213
+ ],
214
+
215
+ gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]],
216
+ gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]],
217
+ gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]],
218
+ gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]],
219
+ inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]],
220
+ insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]],
221
+ insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]],
222
+ listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
223
+ margin: value => {
224
+ const values = typeof value === 'number' ? [value] : splitValue(value);
225
+ if (values.length === 1) {
226
+ return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]];
227
+ }
228
+ // @Deprecated
229
+ const [top, right = top, bottom = top, left = right] = values;
230
+ return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]];
365
231
  },
366
- scrollMargin: rawValue => {
367
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
368
- return [['scrollMarginTop', top], ['scrollMarginEnd', right], ['scrollMarginBottom', bottom], ['scrollMarginStart', left]];
232
+ marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
233
+ marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
234
+ mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]],
235
+ offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
236
+ outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]],
237
+ overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
238
+ padding: rawValue => {
239
+ const values = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
240
+ if (values.length === 1) {
241
+ return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
242
+ }
243
+ // @Deprecated
244
+ const [top, right = top, bottom = top, left = right] = values;
245
+ return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
369
246
  },
370
- scrollPadding: rawValue => {
371
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
372
- return [['scrollPaddingTop', top], ['scrollPaddingEnd', right], ['scrollPaddingBottom', bottom], ['scrollPaddingStart', left]];
373
- }
247
+ paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
248
+ paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
249
+ placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]],
250
+ placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]],
251
+ placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]],
252
+ scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]],
253
+ scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]],
254
+ scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]],
255
+ textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]],
256
+ textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]],
257
+ transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
258
+ };
259
+ const aliases = {
260
+ // @Deprecated
261
+ borderHorizontal: shorthands.borderInline,
262
+ // @Deprecated
263
+ borderVertical: shorthands.borderBlock,
264
+ // @Deprecated
265
+ borderBlockStart: shorthands.borderTop,
266
+ // @Deprecated
267
+ borderEnd: shorthands.borderInlineEnd,
268
+ // @Deprecated
269
+ borderBlockEnd: shorthands.borderBottom,
270
+ // @Deprecated
271
+ borderStart: shorthands.borderInlineStart,
272
+ borderHorizontalWidth: shorthands.borderInlineWidth,
273
+ borderHorizontalStyle: shorthands.borderInlineStyle,
274
+ borderHorizontalColor: shorthands.borderInlineColor,
275
+ borderVerticalWidth: shorthands.borderBlockWidth,
276
+ borderVerticalStyle: shorthands.borderBlockStyle,
277
+ borderVerticalColor: shorthands.borderBlockColor,
278
+ borderBlockStartColor: value => [['borderTopColor', value]],
279
+ borderBlockEndColor: value => [['borderBottomColor', value]],
280
+ borderStartColor: value => [['borderInlineStartColor', value]],
281
+ borderEndColor: value => [['borderInlineEndColor', value]],
282
+ borderBlockStartStyle: value => [['borderTopStyle', value]],
283
+ borderBlockEndStyle: value => [['borderBottomStyle', value]],
284
+ borderStartStyle: value => [['borderInlineStartStyle', value]],
285
+ borderEndStyle: value => [['borderInlineEndStyle', value]],
286
+ borderBlockStartWidth: value => [['borderTopWidth', value]],
287
+ borderBlockEndWidth: value => [['borderBottomWidth', value]],
288
+ borderStartWidth: value => [['borderInlineStartWidth', value]],
289
+ borderEndWidth: value => [['borderInlineEndWidth', value]],
290
+ borderTopStartRadius: value => [['borderStartStartRadius', value]],
291
+ borderTopEndRadius: value => [['borderStartEndRadius', value]],
292
+ borderBottomStartRadius: value => [['borderEndStartRadius', value]],
293
+ borderBottomEndRadius: value => [['borderEndEndRadius', value]],
294
+ marginBlockStart: value => [['marginTop', value]],
295
+ marginBlockEnd: value => [['marginBottom', value]],
296
+ marginStart: value => [['marginInlineStart', value]],
297
+ marginEnd: value => [['marginInlineEnd', value]],
298
+ marginHorizontal: shorthands.marginInline,
299
+ marginVertical: shorthands.marginBlock,
300
+ paddingBlockStart: rawValue => [['paddingTop', rawValue]],
301
+ paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
302
+ paddingStart: rawValue => [['paddingInlinStart', rawValue]],
303
+ paddingEnd: rawValue => [['paddingInlineEnd', rawValue]],
304
+ paddingHorizontal: shorthands.paddingInline,
305
+ paddingVertical: shorthands.paddingBlock,
306
+ insetBlockStart: value => [['top', value]],
307
+ insetBlockEnd: value => [['bottom', value]],
308
+ start: value => [['insetInlineStart', value]],
309
+ end: value => [['insetInlineEnd', value]]
374
310
  };
375
- const expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)];
311
+ const expansions = {
312
+ ...shorthands,
313
+ ...aliases
314
+ };
315
+
316
+ // TODO: It should be possible to remove this as we should no longer have
317
+ // to disallow shorthand properties with object values.
318
+ const expandedKeys = Object.keys(expansions);
376
319
  exports.expandedKeys = expandedKeys;
377
320
  function flatMapExpandedShorthands(objEntry) {
378
321
  const [key, value] = objEntry;