@stylexjs/shared 0.2.0-beta.10 → 0.2.0-beta.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. package/lib/common-types.d.ts +49 -0
  2. package/lib/common-types.js.flow +64 -0
  3. package/lib/convert-to-className.d.ts +16 -0
  4. package/lib/convert-to-className.js.flow +23 -0
  5. package/lib/generate-css-rule.d.ts +17 -0
  6. package/lib/generate-css-rule.js.flow +17 -0
  7. package/lib/hash.d.ts +11 -0
  8. package/lib/hash.js.flow +12 -0
  9. package/lib/index.d.ts +32 -95
  10. package/lib/index.js.flow +46 -3
  11. package/lib/messages.d.ts +32 -0
  12. package/lib/messages.js.flow +35 -0
  13. package/lib/physical-rtl/generate-ltr.d.ts +12 -0
  14. package/lib/physical-rtl/generate-ltr.js.flow +13 -0
  15. package/lib/physical-rtl/generate-rtl.d.ts +14 -0
  16. package/lib/physical-rtl/generate-rtl.js.flow +13 -0
  17. package/lib/preprocess-rules/PreRule.d.ts +52 -0
  18. package/lib/preprocess-rules/PreRule.js.flow +64 -0
  19. package/lib/preprocess-rules/application-order.d.ts +253 -0
  20. package/lib/preprocess-rules/application-order.js.flow +206 -0
  21. package/lib/preprocess-rules/basic-validation.d.ts +13 -0
  22. package/lib/preprocess-rules/basic-validation.js +3 -3
  23. package/lib/preprocess-rules/basic-validation.js.flow +13 -0
  24. package/lib/preprocess-rules/flatten-raw-style-obj.d.ts +25 -0
  25. package/lib/preprocess-rules/flatten-raw-style-obj.js +5 -5
  26. package/lib/preprocess-rules/flatten-raw-style-obj.js.flow +27 -0
  27. package/lib/preprocess-rules/index.d.ts +18 -0
  28. package/lib/preprocess-rules/index.js.flow +19 -0
  29. package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +122 -0
  30. package/lib/preprocess-rules/legacy-expand-shorthands.js +0 -139
  31. package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +101 -0
  32. package/lib/preprocess-rules/property-specificity.d.ts +76 -0
  33. package/lib/preprocess-rules/property-specificity.js.flow +87 -0
  34. package/lib/stylex-create-vars.d.ts +27 -0
  35. package/lib/stylex-create-vars.js +59 -0
  36. package/lib/stylex-create-vars.js.flow +22 -0
  37. package/lib/stylex-create.d.ts +23 -0
  38. package/lib/stylex-create.js.flow +30 -0
  39. package/lib/stylex-first-that-works.d.ts +14 -0
  40. package/lib/stylex-first-that-works.js.flow +13 -0
  41. package/lib/stylex-include.d.ts +19 -0
  42. package/lib/stylex-include.js.flow +21 -0
  43. package/lib/stylex-keyframes.d.ts +17 -0
  44. package/lib/stylex-keyframes.js.flow +20 -0
  45. package/lib/transform-value.d.ts +13 -0
  46. package/lib/transform-value.js.flow +15 -0
  47. package/lib/utils/Rule.d.ts +58 -0
  48. package/lib/utils/Rule.js.flow +64 -0
  49. package/lib/utils/dashify.d.ts +10 -0
  50. package/lib/utils/dashify.js.flow +9 -0
  51. package/lib/utils/default-options.d.ts +10 -0
  52. package/lib/utils/default-options.js.flow +24 -0
  53. package/lib/utils/file-based-identifier.d.ts +14 -0
  54. package/lib/utils/file-based-identifier.js +22 -0
  55. package/lib/utils/file-based-identifier.js.flow +13 -0
  56. package/lib/utils/genCSSRule.d.ts +16 -0
  57. package/lib/utils/genCSSRule.js.flow +16 -0
  58. package/lib/utils/normalize-value.d.ts +12 -0
  59. package/lib/utils/normalize-value.js.flow +14 -0
  60. package/lib/utils/normalizers/detect-unclosed-fns.d.ts +17 -0
  61. package/lib/utils/normalizers/detect-unclosed-fns.js.flow +16 -0
  62. package/lib/utils/normalizers/font-size-px-to-rem.d.ts +19 -0
  63. package/lib/utils/normalizers/font-size-px-to-rem.js +9 -4
  64. package/lib/utils/normalizers/font-size-px-to-rem.js.flow +18 -0
  65. package/lib/utils/normalizers/leading-zero.d.ts +17 -0
  66. package/lib/utils/normalizers/leading-zero.js.flow +16 -0
  67. package/lib/utils/normalizers/quotes.d.ts +19 -0
  68. package/lib/utils/normalizers/quotes.js.flow +18 -0
  69. package/lib/utils/normalizers/timings.d.ts +19 -0
  70. package/lib/utils/normalizers/timings.js.flow +18 -0
  71. package/lib/utils/normalizers/whitespace.d.ts +20 -0
  72. package/lib/utils/normalizers/whitespace.js.flow +19 -0
  73. package/lib/utils/normalizers/zero-dimensions.d.ts +19 -0
  74. package/lib/utils/normalizers/zero-dimensions.js.flow +18 -0
  75. package/lib/utils/object-utils.d.ts +61 -0
  76. package/lib/utils/object-utils.js.flow +81 -0
  77. package/lib/utils/property-priorities.d.ts +11 -0
  78. package/lib/utils/property-priorities.js.flow +10 -0
  79. package/lib/utils/split-css-value.d.ts +15 -0
  80. package/lib/utils/split-css-value.js.flow +16 -0
  81. package/lib/validate.d.ts +12 -0
  82. package/lib/validate.js.flow +12 -0
  83. package/package.json +4 -4
  84. package/lib/expand-shorthands.d.ts +0 -5
  85. package/lib/expand-shorthands.js +0 -330
  86. package/lib/namespace-transforms/__tests__/preflatten.test.js +0 -120
  87. package/lib/namespace-transforms/preflatten.js +0 -89
  88. package/lib/preprocess-rules/expand-shorthands.js +0 -156
  89. package/lib/preprocess-rules/null-out-longhand.js +0 -310
  90. package/lib/preprocess-rules/react-native-web.js +0 -142
  91. package/lib/stylex-defaultValue.js +0 -397
@@ -1,156 +0,0 @@
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
- // TODO: to be added later.
19
- // const aliases = {
20
- // marginInlineStart: (rawValue) => [['marginStart', rawValue]],
21
- // marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
22
- // marginInline: (rawValue) => [
23
- // ['marginStart', rawValue],
24
- // ['marginEnd', rawValue],
25
- // ],
26
- // paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
27
- // paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
28
- // paddingInline: (rawValue) => [
29
- // ['paddingStart', rawValue],
30
- // ['paddingEnd', rawValue],
31
- // ],
32
- // // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
33
- // // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
34
- // // // This will need to change.
35
- // // 'borderInline': (rawValue) => [
36
- // // ['borderStart', rawValue],
37
- // // ['borderEnd', rawValue],
38
- // // ],
39
- // };
40
-
41
- /**
42
- * Shorthand properties:
43
- * - [x] all - Should be banned
44
- * - [ ] animation
45
- * - [ ] background
46
- * - [-] border
47
- * - [x] border-block-end
48
- * - [x] border-block-start
49
- * - [ ] border-bottom
50
- * - [x] border-color
51
- * - [x] border-image
52
- * - [x] border-inline-end
53
- * - [x] border-inline-start
54
- * - [ ] border-left
55
- * - [x] border-radius
56
- * - [ ] border-right
57
- * - [x] border-style
58
- * - [ ] border-top
59
- * - [x] border-width
60
- * - [ ] column-rule
61
- * - [ ] columns
62
- * - [ ] flex
63
- * - [ ] flex-flow
64
- * - [ ] font
65
- * - [ ] gap
66
- * - [ ] grid
67
- * - [ ] grid-area
68
- * - [ ] grid-column
69
- * - [ ] grid-row
70
- * - [ ] grid-template
71
- * - [ ] list-style
72
- * - [x] margin
73
- * - [ ] mask
74
- * - [ ] offset
75
- * - [ ] outline
76
- * - [x] overflow
77
- * - [x] padding
78
- * - [ ] place-content
79
- * - [ ] place-items
80
- * - [ ] place-self
81
- * - [ ] scroll-margin
82
- * - [ ] scroll-padding
83
- * - [ ] text-decoration
84
- * - [ ] text-emphasis
85
- * - [ ] transition
86
- */
87
-
88
- const expansions = {
89
- // ...aliases,
90
- border: rawValue => {
91
- return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
92
- },
93
- /*
94
- // Add this later, as this will be a breaking change
95
- border: (rawValue: string): Array<[string, string]> => {
96
- if (typeof rawValue === 'number') {
97
- return expansions.borderWidth(rawValue);
98
- }
99
- const [width, style, color] = splitValue(rawValue);
100
- return [
101
- ...expansions.borderWidth(width),
102
- ...expansions.borderStyle(style),
103
- ...expansions.borderColor(color),
104
- ];
105
- }
106
- */
107
- borderColor: rawValue => {
108
- const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
109
- return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
110
- },
111
- borderHorizontal: rawValue => {
112
- return [['borderStart', rawValue], ['borderEnd', rawValue]];
113
- },
114
- borderStyle: rawValue => {
115
- const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
116
- return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
117
- },
118
- borderVertical: rawValue => {
119
- return [['borderTop', rawValue], ['borderBottom', rawValue]];
120
- },
121
- borderWidth: rawValue => {
122
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
123
- return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
124
- },
125
- borderRadius: rawValue => {
126
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? (0, _splitCssValue.default)(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
127
-
128
- return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
129
- },
130
- margin: rawValue => {
131
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
132
- return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
133
- },
134
- marginHorizontal: rawValue => {
135
- return [['marginStart', rawValue], ['marginEnd', rawValue]];
136
- },
137
- marginVertical: rawValue => {
138
- return [['marginTop', rawValue], ['marginBottom', rawValue]];
139
- },
140
- overflow: rawValue => {
141
- const [x, y = x] = (0, _splitCssValue.default)(rawValue);
142
- return [['overflowX', x], ['overflowY', y]];
143
- },
144
- padding: rawValue => {
145
- const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
146
- return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
147
- },
148
- paddingHorizontal: rawValue => {
149
- return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
150
- },
151
- paddingVertical: rawValue => {
152
- return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
153
- }
154
- };
155
- var _default = expansions;
156
- exports.default = _default;
@@ -1,310 +0,0 @@
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;
@@ -1,142 +0,0 @@
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;