@stylexjs/shared 0.1.0-beta.6 → 0.2.0-beta.10

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.
Files changed (34) hide show
  1. package/README.md +81 -0
  2. package/lib/convert-to-className.js +13 -6
  3. package/lib/expand-shorthands.d.ts +5 -0
  4. package/lib/expand-shorthands.js +241 -101
  5. package/lib/generate-css-rule.js +10 -38
  6. package/lib/index.d.ts +14 -2
  7. package/lib/index.js.flow +5 -0
  8. package/lib/messages.js +11 -3
  9. package/lib/namespace-transforms/__tests__/preflatten.test.js +120 -0
  10. package/lib/namespace-transforms/preflatten.js +89 -0
  11. package/lib/physical-rtl/generate-ltr.js +32 -32
  12. package/lib/physical-rtl/generate-rtl.js +30 -30
  13. package/lib/preprocess-rules/PreRule.js +101 -0
  14. package/lib/preprocess-rules/application-order.js +259 -0
  15. package/lib/preprocess-rules/basic-validation.js +92 -0
  16. package/lib/preprocess-rules/expand-shorthands.js +156 -0
  17. package/lib/preprocess-rules/flatten-raw-style-obj.js +148 -0
  18. package/lib/preprocess-rules/index.js +39 -0
  19. package/lib/preprocess-rules/legacy-expand-shorthands.js +219 -0
  20. package/lib/preprocess-rules/null-out-longhand.js +310 -0
  21. package/lib/preprocess-rules/property-specificity.js +135 -0
  22. package/lib/preprocess-rules/react-native-web.js +142 -0
  23. package/lib/stylex-create.js +32 -91
  24. package/lib/stylex-defaultValue.js +397 -0
  25. package/lib/stylex-keyframes.js +23 -10
  26. package/lib/utils/Rule.js +71 -0
  27. package/lib/utils/default-options.js +34 -0
  28. package/lib/utils/genCSSRule.js +9 -8
  29. package/lib/utils/normalize-value.js +3 -0
  30. package/lib/utils/object-utils.js +24 -3
  31. package/lib/utils/property-priorities.js +116 -0
  32. package/lib/utils/split-css-value.js +47 -0
  33. package/lib/validate.js +1 -1
  34. package/package.json +1 -1
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = flatMapExpandedShorthands;
7
+ exports.getExpandedKeys = getExpandedKeys;
8
+ var _applicationOrder = _interopRequireDefault(require("./application-order"));
9
+ var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-shorthands"));
10
+ var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+ /**
13
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
14
+ *
15
+ * This source code is licensed under the MIT license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ *
18
+ *
19
+ */
20
+
21
+ const expansions = {
22
+ 'application-order': _applicationOrder.default,
23
+ 'property-specificity': _propertySpecificity.default,
24
+ 'legacy-expand-shorthands': _legacyExpandShorthands.default
25
+ };
26
+ function getExpandedKeys(options) {
27
+ return Object.keys(expansions[options.styleResolution ?? 'application-order']);
28
+ }
29
+ function flatMapExpandedShorthands(objEntry, options) {
30
+ const [key, value] = objEntry;
31
+ const expansion = expansions[options.styleResolution ?? 'application-order'][key];
32
+ if (expansion) {
33
+ if (Array.isArray(value)) {
34
+ throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
35
+ }
36
+ return expansion(value);
37
+ }
38
+ return [[key, value]];
39
+ }
@@ -0,0 +1,219 @@
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 borderWidthKeywords = new Set(['thin', 'medium', 'thick']);
19
+ const borderStyleKeywords = new Set(['none', 'hidden', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inside',
20
+ // Non-standard
21
+ 'inset', 'outset']);
22
+ const globalKeywords = new Set(['initial', 'inherit', 'unset']);
23
+ // eslint-disable-next-line no-unused-vars
24
+ function borderDetector(borderParts) {
25
+ const parts = borderParts.filter(Boolean).slice();
26
+ let suffix = '';
27
+ for (let i = 0; i < parts.length; i++) {
28
+ const part = parts[i];
29
+ if (typeof part === 'string' && part.endsWith('!important')) {
30
+ parts[i] = part.replace('!important', '').trim();
31
+ suffix = ' !important';
32
+ }
33
+ }
34
+ if (parts.length === 1 && typeof parts[0] === 'string' && globalKeywords.has(parts[0])) {
35
+ return [parts[0], parts[0], parts[0]];
36
+ }
37
+
38
+ // Find the part that starts with a number
39
+ // This is most likely to be the borderWidth
40
+ let width = parts.find(part => typeof part === 'number' || part.match(/^\.?\d+/) || borderWidthKeywords.has(part));
41
+ if (typeof width === 'number') {
42
+ width = String(width) + 'px';
43
+ }
44
+ // console.log('width', width);
45
+ if (width != null) {
46
+ parts.splice(parts.indexOf(width), 1);
47
+ }
48
+ if (parts.length === 0) {
49
+ return [String(width) + suffix, null, null];
50
+ }
51
+ const style = parts.find(part => typeof part === 'string' && borderStyleKeywords.has(part));
52
+ if (style != null) {
53
+ parts.splice(parts.indexOf(style), 1);
54
+ }
55
+ if (parts.length === 2 && width == null) {
56
+ width = parts[0];
57
+ parts.splice(0, 1);
58
+ }
59
+ if (width != null && parts.length > 1) {
60
+ throw new Error('Invalid border shorthand value');
61
+ }
62
+ const color = parts[0];
63
+ return [width, style, color].map(part => part != null ? part + suffix : null);
64
+ }
65
+ const expansions = {
66
+ // TODO: Due to UI regressions internally, we need to maintain the buggy behaviour of
67
+ // border shorthand for now. This will be fixed in a future release.
68
+ // border: (rawValue: TStyleValue): TReturn => {
69
+ // if (typeof rawValue === 'number') {
70
+ // return expansions.borderWidth(rawValue);
71
+ // }
72
+
73
+ // const parts = splitValue(rawValue);
74
+ // const [width, style, color] = borderDetector(parts);
75
+
76
+ // return [
77
+ // ...(width != null ? expansions.borderWidth(width) : []),
78
+ // ...(style != null ? expansions.borderStyle(style) : []),
79
+ // ...(color != null ? expansions.borderColor(color) : []),
80
+ // ];
81
+ // },
82
+ // borderTop: (rawValue: TStyleValue): TReturn => {
83
+ // if (typeof rawValue === 'number') {
84
+ // return [['borderTopWidth', rawValue]];
85
+ // }
86
+ // const parts = splitValue(rawValue);
87
+ // const [width, style, color] = borderDetector(parts);
88
+
89
+ // return [
90
+ // width != null ? ['borderTopWidth', width] : null,
91
+ // style != null ? ['borderTopStyle', style] : null,
92
+ // color != null ? ['borderTopColor', color] : null,
93
+ // ].filter(Boolean);
94
+ // },
95
+ // borderEnd: (rawValue: TStyleValue): TReturn => {
96
+ // if (typeof rawValue === 'number') {
97
+ // return [['borderEndWidth', rawValue]];
98
+ // }
99
+
100
+ // const parts = splitValue(rawValue);
101
+ // const [width, style, color] = borderDetector(parts);
102
+
103
+ // return [
104
+ // width != null ? ['borderEndWidth', width] : null,
105
+ // style != null ? ['borderEndStyle', style] : null,
106
+ // color != null ? ['borderEndColor', color] : null,
107
+ // ].filter(Boolean);
108
+ // },
109
+ // borderRight: (rawValue: TStyleValue): TReturn => {
110
+ // if (typeof rawValue === 'number') {
111
+ // return [['borderRightWidth', rawValue]];
112
+ // }
113
+ // const parts = splitValue(rawValue);
114
+ // const [width, style, color] = borderDetector(parts);
115
+ // return [
116
+ // width != null ? ['borderRightWidth', width] : null,
117
+ // style != null ? ['borderRightStyle', style] : null,
118
+ // color != null ? ['borderRightColor', color] : null,
119
+ // ].filter(Boolean);
120
+ // },
121
+ // borderBottom: (rawValue: TStyleValue): TReturn => {
122
+ // if (typeof rawValue === 'number') {
123
+ // return [['borderBottomWidth', rawValue]];
124
+ // }
125
+ // const parts = splitValue(rawValue);
126
+ // const [width, style, color] = borderDetector(parts);
127
+ // return [
128
+ // width != null ? ['borderBottomWidth', width] : null,
129
+ // style != null ? ['borderBottomStyle', style] : null,
130
+ // color != null ? ['borderBottomColor', color] : null,
131
+ // ].filter(Boolean);
132
+ // },
133
+ // borderStart: (rawValue: TStyleValue): TReturn => {
134
+ // if (typeof rawValue === 'number') {
135
+ // return [['borderStartWidth', rawValue]];
136
+ // }
137
+ // const parts = splitValue(rawValue);
138
+ // const [width, style, color] = borderDetector(parts);
139
+ // return [
140
+ // width != null ? ['borderStartWidth', width] : null,
141
+ // style != null ? ['borderStartStyle', style] : null,
142
+ // color != null ? ['borderStartColor', color] : null,
143
+ // ].filter(Boolean);
144
+ // },
145
+ // borderLeft: (rawValue: TStyleValue): TReturn => {
146
+ // if (typeof rawValue === 'number') {
147
+ // return [['borderLeftWidth', rawValue]];
148
+ // }
149
+ // const parts = splitValue(rawValue);
150
+ // const [width, style, color] = borderDetector(parts);
151
+ // return [
152
+ // width != null ? ['borderLeftWidth', width] : null,
153
+ // style != null ? ['borderLeftStyle', style] : null,
154
+ // color != null ? ['borderLeftColor', color] : null,
155
+ // ].filter(Boolean);
156
+ // },
157
+
158
+ border: rawValue => {
159
+ return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
160
+ },
161
+ borderColor: rawValue => {
162
+ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
163
+ return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
164
+ },
165
+ borderHorizontal: rawValue => {
166
+ return [['borderStart', rawValue], ['borderEnd', rawValue]];
167
+ // return [
168
+ // ...expansions.borderStart(rawValue),
169
+ // ...expansions.borderEnd(rawValue),
170
+ // ];
171
+ },
172
+
173
+ borderStyle: rawValue => {
174
+ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
175
+ return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
176
+ },
177
+ borderVertical: rawValue => {
178
+ return [['borderTop', rawValue], ['borderBottom', rawValue]];
179
+ // return [
180
+ // ...expansions.borderTop(rawValue),
181
+ // ...expansions.borderBottom(rawValue),
182
+ // ];
183
+ },
184
+
185
+ borderWidth: rawValue => {
186
+ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
187
+ return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
188
+ },
189
+ borderRadius: rawValue => {
190
+ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
191
+ return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
192
+ },
193
+ margin: rawValue => {
194
+ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
195
+ return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
196
+ },
197
+ marginHorizontal: rawValue => {
198
+ return [['marginStart', rawValue], ['marginEnd', rawValue]];
199
+ },
200
+ marginVertical: rawValue => {
201
+ return [['marginTop', rawValue], ['marginBottom', rawValue]];
202
+ },
203
+ overflow: rawValue => {
204
+ const [x, y = x] = (0, _splitCssValue.default)(rawValue);
205
+ return [['overflowX', x], ['overflowY', y]];
206
+ },
207
+ padding: rawValue => {
208
+ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
209
+ return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
210
+ },
211
+ paddingHorizontal: rawValue => {
212
+ return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
213
+ },
214
+ paddingVertical: rawValue => {
215
+ return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
216
+ }
217
+ };
218
+ var _default = expansions;
219
+ exports.default = _default;
@@ -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;