@stylexjs/shared 0.2.0-beta.21 → 0.2.0-beta.23
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/convert-to-className.js +6 -6
- package/lib/generate-css-rule.js +3 -3
- package/lib/hash.js +10 -11
- package/lib/index.d.ts +4 -4
- package/lib/index.js +12 -21
- package/lib/index.js.flow +4 -4
- package/lib/messages.d.ts +2 -1
- package/lib/messages.js +29 -54
- package/lib/messages.js.flow +2 -1
- package/lib/physical-rtl/generate-ltr.js +39 -39
- package/lib/physical-rtl/generate-rtl.js +57 -57
- package/lib/preprocess-rules/PreRule.js +2 -2
- package/lib/preprocess-rules/application-order.d.ts +36 -8
- package/lib/preprocess-rules/application-order.js +149 -164
- package/lib/preprocess-rules/application-order.js.flow +35 -7
- package/lib/preprocess-rules/basic-validation.js +6 -6
- package/lib/preprocess-rules/flatten-raw-style-obj.js +10 -10
- package/lib/preprocess-rules/index.js +6 -6
- package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +22 -2
- package/lib/preprocess-rules/legacy-expand-shorthands.js +81 -65
- package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +22 -2
- package/lib/preprocess-rules/property-specificity.d.ts +29 -25
- package/lib/preprocess-rules/property-specificity.js +63 -75
- package/lib/preprocess-rules/property-specificity.js.flow +28 -24
- package/lib/properties/CSS Animations.json +445 -0
- package/lib/properties/CSS Backgrounds and Borders.json +1085 -0
- package/lib/properties/CSS Basic User Interface.json +365 -0
- package/lib/properties/CSS Box Alignment.json +245 -0
- package/lib/properties/CSS Box Model.json +501 -0
- package/lib/properties/CSS Color.json +100 -0
- package/lib/properties/CSS Columns.json +185 -0
- package/lib/properties/CSS Containment.json +203 -0
- package/lib/properties/CSS Counter Styles.json +56 -0
- package/lib/properties/CSS Display.json +20 -0
- package/lib/properties/CSS Flexible Box Layout.json +167 -0
- package/lib/properties/CSS Fonts.json +684 -0
- package/lib/properties/CSS Fragmentation.json +110 -0
- package/lib/properties/CSS Generated Content.json +38 -0
- package/lib/properties/CSS Grid Layout.json +500 -0
- package/lib/properties/CSS Images.json +91 -0
- package/lib/properties/CSS Inline.json +38 -0
- package/lib/properties/CSS Lists and Counters.json +86 -0
- package/lib/properties/CSS Logical Properties.json +1086 -0
- package/lib/properties/CSS Masking.json +399 -0
- package/lib/properties/CSS Miscellaneous.json +38 -0
- package/lib/properties/CSS Motion Path.json +132 -0
- package/lib/properties/CSS Overflow.json +216 -0
- package/lib/properties/CSS Pages.json +83 -0
- package/lib/properties/CSS Positioning.json +166 -0
- package/lib/properties/CSS Ruby.json +55 -0
- package/lib/properties/CSS Scroll Anchoring.json +19 -0
- package/lib/properties/CSS Scroll Snap.json +604 -0
- package/lib/properties/CSS Scrollbars.json +38 -0
- package/lib/properties/CSS Shapes.json +56 -0
- package/lib/properties/CSS Speech.json +20 -0
- package/lib/properties/CSS Table.json +115 -0
- package/lib/properties/CSS Text Decoration.json +312 -0
- package/lib/properties/CSS Text.json +415 -0
- package/lib/properties/CSS Transforms.json +188 -0
- package/lib/properties/CSS Transitions.json +122 -0
- package/lib/properties/CSS Variables.json +20 -0
- package/lib/properties/CSS View Transitions.json +20 -0
- package/lib/properties/CSS Will Change.json +20 -0
- package/lib/properties/CSS Writing Modes.json +92 -0
- package/lib/properties/Compositing and Blending.json +62 -0
- package/lib/properties/Filter Effects.json +38 -0
- package/lib/properties/MathML.json +56 -0
- package/lib/properties/Microsoft Extensions.json +885 -0
- package/lib/properties/Mozilla Extensions.json +607 -0
- package/lib/properties/Pointer Events.json +20 -0
- package/lib/properties/WebKit Extensions.json +707 -0
- package/lib/properties.json +10122 -0
- package/lib/{stylex-override-vars.d.ts → stylex-create-theme.d.ts} +2 -2
- package/lib/{stylex-override-vars.js → stylex-create-theme.js} +13 -13
- package/lib/{stylex-override-vars.js.flow → stylex-create-theme.js.flow} +1 -1
- package/lib/stylex-create.js +1 -1
- package/lib/{stylex-create-vars.d.ts → stylex-define-vars.d.ts} +2 -2
- package/lib/{stylex-create-vars.js → stylex-define-vars.js} +9 -9
- package/lib/{stylex-create-vars.js.flow → stylex-define-vars.js.flow} +1 -1
- package/lib/stylex-keyframes.js +6 -6
- package/lib/transform-value.js +13 -15
- package/lib/types/index.js +33 -46
- package/lib/utils/dashify.js +1 -1
- package/lib/utils/default-options.js +4 -5
- package/lib/utils/file-based-identifier.js +1 -1
- package/lib/utils/genCSSRule.js +6 -6
- package/lib/utils/normalize-value.js +3 -2
- package/lib/utils/normalizers/convert-camel-case-transition-props.d.ts +14 -0
- package/lib/utils/normalizers/convert-camel-case-transition-props.js +23 -0
- package/lib/utils/normalizers/convert-camel-case-transition-props.js.flow +13 -0
- package/lib/utils/normalizers/convert-camel-case-values.d.ts +14 -0
- package/lib/utils/normalizers/convert-camel-case-values.js +23 -0
- package/lib/utils/normalizers/convert-camel-case-values.js.flow +13 -0
- package/lib/utils/normalizers/detect-unclosed-fns.js +2 -2
- package/lib/utils/normalizers/font-size-px-to-rem.js +4 -4
- package/lib/utils/normalizers/leading-zero.js +3 -3
- package/lib/utils/normalizers/quotes.js +4 -4
- package/lib/utils/normalizers/timings.js +4 -4
- package/lib/utils/normalizers/whitespace.js +12 -12
- package/lib/utils/normalizers/zero-dimensions.js +8 -8
- package/lib/utils/object-utils.d.ts +3 -6
- package/lib/utils/object-utils.js +2 -2
- package/lib/utils/property-priorities.js +527 -88
- package/lib/utils/split-css-value.js +8 -8
- package/lib/validate.js +2 -2
- package/package.json +2 -2
@@ -7,14 +7,14 @@ exports.default = generateRTL;
|
|
7
7
|
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
9
9
|
const cursorFlip = {
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
10
|
+
'e-resize': 'w-resize',
|
11
|
+
'w-resize': 'e-resize',
|
12
|
+
'ne-resize': 'nw-resize',
|
13
|
+
'nesw-resize': 'nwse-resize',
|
14
|
+
'nw-resize': 'ne-resize',
|
15
|
+
'nwse-resize': 'nesw-resize',
|
16
|
+
'se-resize': 'sw-resize',
|
17
|
+
'sw-resize': 'se-resize'
|
18
18
|
};
|
19
19
|
function splitByDivisor(value) {
|
20
20
|
const ast = (0, _postcssValueParser.default)(value);
|
@@ -28,7 +28,7 @@ function splitByDivisor(value) {
|
|
28
28
|
currGroup = [];
|
29
29
|
}
|
30
30
|
for (const node of ast.nodes) {
|
31
|
-
if (node.type ===
|
31
|
+
if (node.type === 'div') {
|
32
32
|
push();
|
33
33
|
} else {
|
34
34
|
currGroup.push(node);
|
@@ -38,110 +38,110 @@ function splitByDivisor(value) {
|
|
38
38
|
return groups;
|
39
39
|
}
|
40
40
|
function flipSign(value) {
|
41
|
-
if (value ===
|
41
|
+
if (value === '0') {
|
42
42
|
return value;
|
43
43
|
} else {
|
44
|
-
return value[0] ===
|
44
|
+
return value[0] === '-' ? value.slice(1) : '-' + value;
|
45
45
|
}
|
46
46
|
}
|
47
47
|
function flipShadow(value) {
|
48
48
|
const defs = splitByDivisor(value);
|
49
49
|
const builtDefs = [];
|
50
50
|
for (const def of defs) {
|
51
|
-
const parts = def.split(
|
51
|
+
const parts = def.split(' ');
|
52
52
|
const index = _postcssValueParser.default.unit(parts[0]) === false ? 1 : 0;
|
53
53
|
if (index < parts.length) {
|
54
54
|
parts[index] = flipSign(parts[index]);
|
55
55
|
}
|
56
|
-
builtDefs.push(parts.join(
|
56
|
+
builtDefs.push(parts.join(' '));
|
57
57
|
}
|
58
|
-
const rtl = builtDefs.join(
|
58
|
+
const rtl = builtDefs.join(', ');
|
59
59
|
if (rtl !== value) {
|
60
60
|
return rtl;
|
61
61
|
}
|
62
62
|
}
|
63
63
|
const shadowsFlip = {
|
64
|
-
|
64
|
+
'box-shadow': _ref => {
|
65
65
|
let [key, val] = _ref;
|
66
66
|
const rtlVal = flipShadow(val);
|
67
67
|
return rtlVal ? [key, rtlVal] : null;
|
68
68
|
},
|
69
|
-
|
69
|
+
'text-shadow': _ref2 => {
|
70
70
|
let [key, val] = _ref2;
|
71
71
|
const rtlVal = flipShadow(val);
|
72
72
|
return rtlVal ? [key, rtlVal] : null;
|
73
73
|
}
|
74
74
|
};
|
75
75
|
const logicalToPhysical = {
|
76
|
-
start:
|
77
|
-
end:
|
76
|
+
start: 'right',
|
77
|
+
end: 'left'
|
78
78
|
};
|
79
79
|
const propertyToRTL = {
|
80
|
-
|
80
|
+
'margin-start': _ref3 => {
|
81
81
|
let [_key, val] = _ref3;
|
82
|
-
return [
|
82
|
+
return ['margin-right', val];
|
83
83
|
},
|
84
|
-
|
84
|
+
'margin-end': _ref4 => {
|
85
85
|
let [_key, val] = _ref4;
|
86
|
-
return [
|
86
|
+
return ['margin-left', val];
|
87
87
|
},
|
88
|
-
|
88
|
+
'padding-start': _ref5 => {
|
89
89
|
let [_key, val] = _ref5;
|
90
|
-
return [
|
90
|
+
return ['padding-right', val];
|
91
91
|
},
|
92
|
-
|
92
|
+
'padding-end': _ref6 => {
|
93
93
|
let [_key, val] = _ref6;
|
94
|
-
return [
|
94
|
+
return ['padding-left', val];
|
95
95
|
},
|
96
|
-
|
96
|
+
'border-start': _ref7 => {
|
97
97
|
let [_key, val] = _ref7;
|
98
|
-
return [
|
98
|
+
return ['border-right', val];
|
99
99
|
},
|
100
|
-
|
100
|
+
'border-end': _ref8 => {
|
101
101
|
let [_key, val] = _ref8;
|
102
|
-
return [
|
102
|
+
return ['border-left', val];
|
103
103
|
},
|
104
|
-
|
104
|
+
'border-start-width': _ref9 => {
|
105
105
|
let [_key, val] = _ref9;
|
106
|
-
return [
|
106
|
+
return ['border-right-width', val];
|
107
107
|
},
|
108
|
-
|
108
|
+
'border-end-width': _ref10 => {
|
109
109
|
let [_key, val] = _ref10;
|
110
|
-
return [
|
110
|
+
return ['border-left-width', val];
|
111
111
|
},
|
112
|
-
|
112
|
+
'border-start-color': _ref11 => {
|
113
113
|
let [_key, val] = _ref11;
|
114
|
-
return [
|
114
|
+
return ['border-right-color', val];
|
115
115
|
},
|
116
|
-
|
116
|
+
'border-end-color': _ref12 => {
|
117
117
|
let [_key, val] = _ref12;
|
118
|
-
return [
|
118
|
+
return ['border-left-color', val];
|
119
119
|
},
|
120
|
-
|
120
|
+
'border-start-style': _ref13 => {
|
121
121
|
let [_key, val] = _ref13;
|
122
|
-
return [
|
122
|
+
return ['border-right-style', val];
|
123
123
|
},
|
124
|
-
|
124
|
+
'border-end-style': _ref14 => {
|
125
125
|
let [_key, val] = _ref14;
|
126
|
-
return [
|
126
|
+
return ['border-left-style', val];
|
127
127
|
},
|
128
|
-
|
128
|
+
'border-top-start-radius': _ref15 => {
|
129
129
|
let [_key, val] = _ref15;
|
130
|
-
return [
|
130
|
+
return ['border-top-right-radius', val];
|
131
131
|
},
|
132
|
-
|
132
|
+
'border-bottom-start-radius': _ref16 => {
|
133
133
|
let [_key, val] = _ref16;
|
134
|
-
return [
|
134
|
+
return ['border-bottom-right-radius', val];
|
135
135
|
},
|
136
|
-
|
136
|
+
'border-top-end-radius': _ref17 => {
|
137
137
|
let [_key, val] = _ref17;
|
138
|
-
return [
|
138
|
+
return ['border-top-left-radius', val];
|
139
139
|
},
|
140
|
-
|
140
|
+
'border-bottom-end-radius': _ref18 => {
|
141
141
|
let [_key, val] = _ref18;
|
142
|
-
return [
|
142
|
+
return ['border-bottom-left-radius', val];
|
143
143
|
},
|
144
|
-
|
144
|
+
'text-align': _ref19 => {
|
145
145
|
let [key, val] = _ref19;
|
146
146
|
return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
|
147
147
|
},
|
@@ -155,19 +155,19 @@ const propertyToRTL = {
|
|
155
155
|
},
|
156
156
|
start: _ref22 => {
|
157
157
|
let [_key, val] = _ref22;
|
158
|
-
return [
|
158
|
+
return ['right', val];
|
159
159
|
},
|
160
160
|
end: _ref23 => {
|
161
161
|
let [_key, val] = _ref23;
|
162
|
-
return [
|
162
|
+
return ['left', val];
|
163
163
|
},
|
164
|
-
|
164
|
+
'background-position': _ref24 => {
|
165
165
|
let [key, val] = _ref24;
|
166
|
-
const words = val.split(
|
167
|
-
if (!words.includes(
|
166
|
+
const words = val.split(' ');
|
167
|
+
if (!words.includes('start') && !words.includes('end')) {
|
168
168
|
return null;
|
169
169
|
}
|
170
|
-
return [key, words.map(word => word ===
|
170
|
+
return [key, words.map(word => word === 'start' ? 'right' : word === 'end' ? 'left' : word).join(' ')];
|
171
171
|
},
|
172
172
|
cursor: _ref25 => {
|
173
173
|
let [key, val] = _ref25;
|
@@ -28,10 +28,10 @@ class PreIncludedStylesRule {
|
|
28
28
|
}
|
29
29
|
exports.PreIncludedStylesRule = PreIncludedStylesRule;
|
30
30
|
const stringComparator = (a, b) => {
|
31
|
-
if (a ===
|
31
|
+
if (a === 'default') {
|
32
32
|
return -1;
|
33
33
|
}
|
34
|
-
if (b ===
|
34
|
+
if (b === 'default') {
|
35
35
|
return 1;
|
36
36
|
}
|
37
37
|
return a.localeCompare(b);
|
@@ -114,15 +114,17 @@ type TReturn = ReadonlyArray<[string, TStyleValue]>;
|
|
114
114
|
declare const shorthands: {
|
115
115
|
all: (_: TStyleValue) => TReturn;
|
116
116
|
animation: (value: TStyleValue) => Array<[string, TStyleValue]>;
|
117
|
+
animationRange: (value: TStyleValue) => TReturn;
|
117
118
|
background: (value: TStyleValue) => TReturn;
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
119
|
+
backgroundPosition: (value: TStyleValue) => TReturn;
|
120
|
+
border: (_rawValue: TStyleValue) => TReturn;
|
121
|
+
borderInline: (_rawValue: TStyleValue) => TReturn;
|
122
|
+
borderBlock: (_rawValue: TStyleValue) => TReturn;
|
123
|
+
borderTop: (_rawValue: TStyleValue) => TReturn;
|
124
|
+
borderInlineEnd: (_rawValue: TStyleValue) => TReturn;
|
123
125
|
borderRight: (_rawValue: TStyleValue) => TReturn;
|
124
|
-
borderBottom: (
|
125
|
-
borderInlineStart: (
|
126
|
+
borderBottom: (_rawValue: TStyleValue) => TReturn;
|
127
|
+
borderInlineStart: (_rawValue: TStyleValue) => TReturn;
|
126
128
|
borderLeft: (_rawValue: TStyleValue) => TReturn;
|
127
129
|
borderInlineWidth: (rawValue: TStyleValue) => TReturn;
|
128
130
|
borderInlineStyle: (rawValue: TStyleValue) => TReturn;
|
@@ -154,12 +156,15 @@ declare const shorthands: {
|
|
154
156
|
borderTopRightRadius: (value: TStyleValue) => TReturn;
|
155
157
|
borderBottomLeftRadius: (value: TStyleValue) => TReturn;
|
156
158
|
borderBottomRightRadius: (value: TStyleValue) => TReturn;
|
159
|
+
borderImage: (value: TStyleValue) => TReturn;
|
157
160
|
columnRule: (value: TStyleValue) => TReturn;
|
158
161
|
columns: (value: TStyleValue) => TReturn;
|
159
162
|
container: (value: TStyleValue) => TReturn;
|
163
|
+
containIntrinsicSize: (value: TStyleValue) => TReturn;
|
160
164
|
flex: (value: TStyleValue) => TReturn;
|
161
165
|
flexFlow: (value: TStyleValue) => TReturn;
|
162
166
|
font: (value: TStyleValue) => TReturn;
|
167
|
+
fontVariant: (value: TStyleValue) => TReturn;
|
163
168
|
gap: (value: TStyleValue) => TReturn;
|
164
169
|
grid: (value: TStyleValue) => TReturn;
|
165
170
|
gridArea: (value: TStyleValue) => TReturn;
|
@@ -182,6 +187,7 @@ declare const shorthands: {
|
|
182
187
|
marginLeft: (value: TStyleValue) => TReturn;
|
183
188
|
marginRight: (value: TStyleValue) => TReturn;
|
184
189
|
mask: (value: TStyleValue) => TReturn;
|
190
|
+
maskBorder: (value: TStyleValue) => TReturn;
|
185
191
|
offset: (value: TStyleValue) => TReturn;
|
186
192
|
outline: (value: TStyleValue) => TReturn;
|
187
193
|
overflow: (value: TStyleValue) => TReturn;
|
@@ -196,7 +202,20 @@ declare const shorthands: {
|
|
196
202
|
placeItems: (value: TStyleValue) => TReturn;
|
197
203
|
placeSelf: (value: TStyleValue) => TReturn;
|
198
204
|
scrollMargin: (value: TStyleValue) => TReturn;
|
205
|
+
scrollMarginBlock: (value: TStyleValue) => TReturn;
|
206
|
+
scrollMarginInline: (value: TStyleValue) => TReturn;
|
207
|
+
scrollMarginInlineStart: (value: TStyleValue) => TReturn;
|
208
|
+
scrollMarginInlineEnd: (value: TStyleValue) => TReturn;
|
209
|
+
scrollMarginLeft: (value: TStyleValue) => TReturn;
|
210
|
+
scrollMarginRight: (value: TStyleValue) => TReturn;
|
199
211
|
scrollPadding: (value: TStyleValue) => TReturn;
|
212
|
+
scrollPaddingBlock: (value: TStyleValue) => TReturn;
|
213
|
+
scrollPaddingInline: (value: TStyleValue) => TReturn;
|
214
|
+
scrollPaddingInlineStart: (value: TStyleValue) => TReturn;
|
215
|
+
scrollPaddingInlineEnd: (value: TStyleValue) => TReturn;
|
216
|
+
scrollPaddingLeft: (value: TStyleValue) => TReturn;
|
217
|
+
scrollPaddingRight: (value: TStyleValue) => TReturn;
|
218
|
+
scrollSnapType: (value: TStyleValue) => TReturn;
|
200
219
|
scrollTimeline: (value: TStyleValue) => TReturn;
|
201
220
|
textDecoration: (value: TStyleValue) => TReturn;
|
202
221
|
textEmphasis: (value: TStyleValue) => TReturn;
|
@@ -237,25 +256,34 @@ declare const aliases: {
|
|
237
256
|
borderTopEndRadius: (value: TStyleValue) => TReturn;
|
238
257
|
borderBottomStartRadius: (value: TStyleValue) => TReturn;
|
239
258
|
borderBottomEndRadius: (value: TStyleValue) => TReturn;
|
259
|
+
containIntrinsicBlockSize: (value: TStyleValue) => TReturn;
|
260
|
+
containIntrinsicInlineSize: (value: TStyleValue) => TReturn;
|
261
|
+
gridGap: any;
|
262
|
+
gridRowGap: (value: TStyleValue) => TReturn;
|
263
|
+
gridColumnGap: (value: TStyleValue) => TReturn;
|
240
264
|
marginBlockStart: (value: TStyleValue) => TReturn;
|
241
265
|
marginBlockEnd: (value: TStyleValue) => TReturn;
|
242
266
|
marginStart: any;
|
243
267
|
marginEnd: any;
|
244
268
|
marginHorizontal: any;
|
245
269
|
marginVertical: any;
|
270
|
+
overflowBlock: (value: TStyleValue) => TReturn;
|
271
|
+
overflowInline: (value: TStyleValue) => TReturn;
|
246
272
|
paddingBlockStart: (rawValue: TStyleValue) => TReturn;
|
247
273
|
paddingBlockEnd: (rawValue: TStyleValue) => TReturn;
|
248
274
|
paddingStart: any;
|
249
275
|
paddingEnd: any;
|
250
276
|
paddingHorizontal: any;
|
251
277
|
paddingVertical: any;
|
278
|
+
scrollMarginBlockStart: (value: TStyleValue) => TReturn;
|
279
|
+
scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
|
252
280
|
insetBlockStart: (value: TStyleValue) => TReturn;
|
253
281
|
insetBlockEnd: (value: TStyleValue) => TReturn;
|
254
282
|
start: any;
|
255
283
|
end: any;
|
256
284
|
};
|
257
285
|
declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
|
258
|
-
* >
|
286
|
+
* > 239 | ...typeof shorthands,
|
259
287
|
* | ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
|
260
288
|
**/
|
261
289
|
any>;
|