@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.
- package/README.md +81 -0
- package/lib/convert-to-className.js +13 -6
- package/lib/expand-shorthands.d.ts +5 -0
- package/lib/expand-shorthands.js +241 -101
- package/lib/generate-css-rule.js +10 -38
- package/lib/index.d.ts +14 -2
- package/lib/index.js.flow +5 -0
- package/lib/messages.js +11 -3
- package/lib/namespace-transforms/__tests__/preflatten.test.js +120 -0
- package/lib/namespace-transforms/preflatten.js +89 -0
- package/lib/physical-rtl/generate-ltr.js +32 -32
- package/lib/physical-rtl/generate-rtl.js +30 -30
- package/lib/preprocess-rules/PreRule.js +101 -0
- package/lib/preprocess-rules/application-order.js +259 -0
- package/lib/preprocess-rules/basic-validation.js +92 -0
- package/lib/preprocess-rules/expand-shorthands.js +156 -0
- package/lib/preprocess-rules/flatten-raw-style-obj.js +148 -0
- package/lib/preprocess-rules/index.js +39 -0
- package/lib/preprocess-rules/legacy-expand-shorthands.js +219 -0
- package/lib/preprocess-rules/null-out-longhand.js +310 -0
- package/lib/preprocess-rules/property-specificity.js +135 -0
- package/lib/preprocess-rules/react-native-web.js +142 -0
- package/lib/stylex-create.js +32 -91
- package/lib/stylex-defaultValue.js +397 -0
- package/lib/stylex-keyframes.js +23 -10
- package/lib/utils/Rule.js +71 -0
- package/lib/utils/default-options.js +34 -0
- package/lib/utils/genCSSRule.js +9 -8
- package/lib/utils/normalize-value.js +3 -0
- package/lib/utils/object-utils.js +24 -3
- package/lib/utils/property-priorities.js +116 -0
- package/lib/utils/split-css-value.js +47 -0
- package/lib/validate.js +1 -1
- package/package.json +1 -1
@@ -0,0 +1,397 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.StylexValueBuilder = void 0;
|
7
|
+
exports.default = stylexDefaultValue;
|
8
|
+
var messages = _interopRequireWildcard(require("./messages"));
|
9
|
+
var _dashify = _interopRequireDefault(require("./utils/dashify"));
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
13
|
+
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
14
|
+
function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
|
15
|
+
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
16
|
+
function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
|
17
|
+
function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
|
18
|
+
function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
|
19
|
+
function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
|
20
|
+
var _set = /*#__PURE__*/new WeakSet();
|
21
|
+
var _mediaWidths = /*#__PURE__*/new WeakMap();
|
22
|
+
var _mediaHeights = /*#__PURE__*/new WeakMap();
|
23
|
+
class StylexValueBuilder {
|
24
|
+
constructor(defaultValue) {
|
25
|
+
_classPrivateMethodInitSpec(this, _set);
|
26
|
+
_classPrivateFieldInitSpec(this, _mediaWidths, {
|
27
|
+
writable: true,
|
28
|
+
value: []
|
29
|
+
});
|
30
|
+
_classPrivateFieldInitSpec(this, _mediaHeights, {
|
31
|
+
writable: true,
|
32
|
+
value: []
|
33
|
+
});
|
34
|
+
this.default = defaultValue;
|
35
|
+
}
|
36
|
+
mediaWidth(_ref, value) {
|
37
|
+
let [min, max] = _ref;
|
38
|
+
if (_classPrivateFieldGet(this, _mediaWidths).some(_ref2 => {
|
39
|
+
let [m, M] = _ref2;
|
40
|
+
return m <= min && min < M || m < max && max <= M || min <= m && max >= M;
|
41
|
+
})) {
|
42
|
+
throw new Error(messages.OVERLAPPING_MEDIA_WIDTHS);
|
43
|
+
}
|
44
|
+
_classPrivateFieldGet(this, _mediaWidths).push([min, max]);
|
45
|
+
if (min > 0 && max < Infinity) {
|
46
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-width: ${min}px and max-width: ${max}px)`, value);
|
47
|
+
} else if (min === 0) {
|
48
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (max-width: ${max}px)`, value);
|
49
|
+
} else if (max === Infinity) {
|
50
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-width: ${min}px)`, value);
|
51
|
+
}
|
52
|
+
throw new Error(messages.INVALID_MEDIA_QUERY);
|
53
|
+
}
|
54
|
+
mediaHeight(_ref3, value) {
|
55
|
+
let [min, max] = _ref3;
|
56
|
+
if (_classPrivateFieldGet(this, _mediaHeights).some(_ref4 => {
|
57
|
+
let [m, M] = _ref4;
|
58
|
+
return m <= min && min < M || m < max && max <= M || min <= m && max >= M;
|
59
|
+
})) {
|
60
|
+
throw new Error(messages.OVERLAPPING_MEDIA_HEIGHTS);
|
61
|
+
}
|
62
|
+
_classPrivateFieldGet(this, _mediaHeights).push([min, max]);
|
63
|
+
if (min > 0 && max < Infinity) {
|
64
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-height: ${min}px and max-height: ${max}px)`, value);
|
65
|
+
} else if (min === 0) {
|
66
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (max-height: ${max}px)`, value);
|
67
|
+
} else if (max === Infinity) {
|
68
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-height: ${min}px)`, value);
|
69
|
+
}
|
70
|
+
throw new Error(messages.INVALID_MEDIA_QUERY);
|
71
|
+
}
|
72
|
+
|
73
|
+
// mediaAspectRatio<TAddedValue>(
|
74
|
+
// [min, max]: [number, number],
|
75
|
+
// value: TAddedValue
|
76
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
77
|
+
// if (min > 0 && max < Infinity) {
|
78
|
+
// return this.#set(
|
79
|
+
// `@media (min-aspect-ratio: ${min} and max-aspect-ratio: $, })`,
|
80
|
+
// value
|
81
|
+
// );
|
82
|
+
// } else if (min === 0) {
|
83
|
+
// return this.#set(`@media (max-aspect-ratio: ${max})`, value);
|
84
|
+
// } else if (max === Infinity) {
|
85
|
+
// return this.#set(`@media (min-aspect-ratio: ${min})`, value);
|
86
|
+
// }
|
87
|
+
// throw new Error(messages.INVALID_MEDIA_QUERY);
|
88
|
+
// }
|
89
|
+
|
90
|
+
// mediaPortrait<TAddedValue>(
|
91
|
+
// value: TAddedValue
|
92
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
93
|
+
// return this.#set('@media (orientation: portrait)', value);
|
94
|
+
// }
|
95
|
+
|
96
|
+
// mediaLandscape<TAddedValue>(
|
97
|
+
// value: TAddedValue
|
98
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
99
|
+
// return this.#set('@media (orientation: landscape)', value);
|
100
|
+
// }
|
101
|
+
|
102
|
+
// mediaSRGBDisplay<TAddedValue>(
|
103
|
+
// value: TAddedValue
|
104
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
105
|
+
// return this.#set('@media (color-gamut: srgb)', value);
|
106
|
+
// }
|
107
|
+
|
108
|
+
// mediaP3Display<TAddedValue>(
|
109
|
+
// value: TAddedValue
|
110
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
111
|
+
// return this.#set('@media (color-gamut: p3)', value);
|
112
|
+
// }
|
113
|
+
|
114
|
+
// mediaRec2020Display<TAddedValue>(
|
115
|
+
// value: TAddedValue
|
116
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
117
|
+
// return this.#set('@media (color-gamut: rec2020)', value);
|
118
|
+
// }
|
119
|
+
|
120
|
+
// mediaIsFullscreen<TAddedValue>(
|
121
|
+
// value: TAddedValue
|
122
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
123
|
+
// return this.#set('@media (display-mode: fullscreen)', value);
|
124
|
+
// }
|
125
|
+
|
126
|
+
// These are confusing, so skipping them for now
|
127
|
+
// mediaIsStandalone
|
128
|
+
// mediaIsMinimalUI
|
129
|
+
|
130
|
+
// mediaSDRDisplay<TAddedValue>(
|
131
|
+
// value: TAddedValue
|
132
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
133
|
+
// return this.#set('@media (dynamic-range: standard)', value);
|
134
|
+
// }
|
135
|
+
|
136
|
+
// mediaHDRDisplay<TAddedValue>(
|
137
|
+
// value: TAddedValue
|
138
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
139
|
+
// return this.#set('@media (dynamic-range: high)', value);
|
140
|
+
// }
|
141
|
+
|
142
|
+
// mediaSupportsHDRVideo<TAddedValue>(
|
143
|
+
// value: TAddedValue
|
144
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
145
|
+
// return this.#set('@media (video-dynamic-range: high)', value);
|
146
|
+
// }
|
147
|
+
|
148
|
+
//<TAddedValue> mediaHasColor(value: TAddedValue): StylexValueBuilder<TValue | TAddedValue> {
|
149
|
+
// return this.#set('@media (color)', value);
|
150
|
+
// }
|
151
|
+
|
152
|
+
// primaryInputCanHover<TAddedValue>(
|
153
|
+
// value: TAddedValue
|
154
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
155
|
+
// return this.#set('@media (hover: hover)', value);
|
156
|
+
// }
|
157
|
+
// primaryInputCanNotHover<TAddedValue>(
|
158
|
+
// value: TAddedValue
|
159
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
160
|
+
// return this.#set('@media (hover: none)', value);
|
161
|
+
// }
|
162
|
+
|
163
|
+
// someInputCanHover<TAddedValue>(
|
164
|
+
// value: TAddedValue
|
165
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
166
|
+
// return this.#set('@media (any-hover: hover)', value);
|
167
|
+
// }
|
168
|
+
|
169
|
+
// noInputCanHover<TAddedValue>(
|
170
|
+
// value: TAddedValue
|
171
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
172
|
+
// return this.#set('@media (any-hover: none)', value);
|
173
|
+
// }
|
174
|
+
|
175
|
+
// somePointerIsFine<TAddedValue>(
|
176
|
+
// value: TAddedValue
|
177
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
178
|
+
// return this.#set('@media (any-pointer: fine)', value);
|
179
|
+
// }
|
180
|
+
|
181
|
+
// somePointerIsCoarse<TAddedValue>(
|
182
|
+
// value: TAddedValue
|
183
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
184
|
+
// return this.#set('@media (any-pointer: coarse)', value);
|
185
|
+
// }
|
186
|
+
|
187
|
+
// primaryPointerIsFine<TAddedValue>(
|
188
|
+
// value: TAddedValue
|
189
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
190
|
+
// return this.#set('@media (pointer: fine)', value);
|
191
|
+
// }
|
192
|
+
|
193
|
+
// primaryPointerIsCoarse<TAddedValue>(
|
194
|
+
// value: TAddedValue
|
195
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
196
|
+
// return this.#set('@media (pointer: coarse)', value);
|
197
|
+
// }
|
198
|
+
|
199
|
+
// lightMode<TAddedValue>(
|
200
|
+
// value: TAddedValue
|
201
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
202
|
+
// return this.#set('@media (prefers-color-scheme: light)', value);
|
203
|
+
// }
|
204
|
+
|
205
|
+
// darkMode<TAddedValue>(
|
206
|
+
// value: TAddedValue
|
207
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
208
|
+
// return this.#set('@media (prefers-color-scheme: dark)', value);
|
209
|
+
// }
|
210
|
+
|
211
|
+
// userPrefersMoreContrast<TAddedValue>(
|
212
|
+
// value: TAddedValue
|
213
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
214
|
+
// return this.#set('@media (prefers-contrast: more)', value);
|
215
|
+
// }
|
216
|
+
|
217
|
+
// userPrefersLessContrast<TAddedValue>(
|
218
|
+
// value: TAddedValue
|
219
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
220
|
+
// return this.#set('@media (prefers-contrast: less)', value);
|
221
|
+
// }
|
222
|
+
|
223
|
+
// userPrefersReducedMotion<TAddedValue>(
|
224
|
+
// value: TAddedValue
|
225
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
226
|
+
// return this.#set('@media (prefers-reduced-motion)', value);
|
227
|
+
// }
|
228
|
+
|
229
|
+
// noScript<TAddedValue>(
|
230
|
+
// value: TAddedValue
|
231
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
232
|
+
// return this.#set('@media (scripting: none)', value);
|
233
|
+
// }
|
234
|
+
|
235
|
+
// Choosing a catch-all for now for familiarity
|
236
|
+
matchMedia(query, value) {
|
237
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media ${query}`, value);
|
238
|
+
}
|
239
|
+
supports(selector, value) {
|
240
|
+
const toSelector = _ref5 => {
|
241
|
+
let [k, v] = _ref5;
|
242
|
+
return `(${(0, _dashify.default)(k)}: ${String(v)})`;
|
243
|
+
};
|
244
|
+
const query = Object.entries(selector).map(toSelector).join(' and ');
|
245
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@supports ${query}`, value);
|
246
|
+
}
|
247
|
+
supportsNot(selector, value) {
|
248
|
+
const toSelector = _ref6 => {
|
249
|
+
let [k, v] = _ref6;
|
250
|
+
return `(not (${(0, _dashify.default)(k)}: ${String(v)}))`;
|
251
|
+
};
|
252
|
+
const query = Object.entries(selector).map(toSelector).join(' and ');
|
253
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `@supports ${query}`, value);
|
254
|
+
}
|
255
|
+
|
256
|
+
// Pseudo Classes
|
257
|
+
|
258
|
+
hover(value) {
|
259
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':hover', value);
|
260
|
+
}
|
261
|
+
focus(value) {
|
262
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':focus', value);
|
263
|
+
}
|
264
|
+
focusVisible(value) {
|
265
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':focus-visible', value);
|
266
|
+
}
|
267
|
+
focusWithin(value) {
|
268
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':focus-within', value);
|
269
|
+
}
|
270
|
+
active(value) {
|
271
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':active', value);
|
272
|
+
}
|
273
|
+
anyLink(value) {
|
274
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':any-link', value);
|
275
|
+
}
|
276
|
+
autofill(value) {
|
277
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':autofill', value);
|
278
|
+
}
|
279
|
+
checked(value) {
|
280
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':checked', value);
|
281
|
+
}
|
282
|
+
defaultSelection(value) {
|
283
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':default', value);
|
284
|
+
}
|
285
|
+
disabled(value) {
|
286
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':disabled', value);
|
287
|
+
}
|
288
|
+
empty(value) {
|
289
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':empty', value);
|
290
|
+
}
|
291
|
+
enabled(value) {
|
292
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':enabled', value);
|
293
|
+
}
|
294
|
+
fullscreen(value) {
|
295
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':fullscreen', value);
|
296
|
+
}
|
297
|
+
indeterminate(value) {
|
298
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':indeterminate', value);
|
299
|
+
}
|
300
|
+
invalid(value) {
|
301
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':invalid', value);
|
302
|
+
}
|
303
|
+
lang(value) {
|
304
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':lang', value);
|
305
|
+
}
|
306
|
+
dirRTLUNSFAE(value) {
|
307
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':dir(rtl)', value);
|
308
|
+
}
|
309
|
+
link(value) {
|
310
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':link', value);
|
311
|
+
}
|
312
|
+
optional(value) {
|
313
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':optional', value);
|
314
|
+
}
|
315
|
+
pictureInPicture(value) {
|
316
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':picture-in-picture', value);
|
317
|
+
}
|
318
|
+
placeholderShown(value) {
|
319
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':placeholder-shown', value);
|
320
|
+
}
|
321
|
+
paused(value) {
|
322
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':paused', value);
|
323
|
+
}
|
324
|
+
playing(value) {
|
325
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':playing', value);
|
326
|
+
}
|
327
|
+
readOnly(value) {
|
328
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':read-only', value);
|
329
|
+
}
|
330
|
+
readWrite(value) {
|
331
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':read-write', value);
|
332
|
+
}
|
333
|
+
required(value) {
|
334
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':required', value);
|
335
|
+
}
|
336
|
+
target(value) {
|
337
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':target', value);
|
338
|
+
}
|
339
|
+
valid(value) {
|
340
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':valid', value);
|
341
|
+
}
|
342
|
+
visited(value) {
|
343
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, ':visited', value);
|
344
|
+
}
|
345
|
+
get not() {
|
346
|
+
return {
|
347
|
+
hover: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:hover)', value),
|
348
|
+
focus: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus)', value),
|
349
|
+
focusVisible: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus-visible)', value),
|
350
|
+
focusWithin: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus-within)', value),
|
351
|
+
active: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:active)', value),
|
352
|
+
anyLink: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:any-link)', value),
|
353
|
+
autofill: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:autofill)', value),
|
354
|
+
checked: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:checked)', value),
|
355
|
+
defaultSelection: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:default)', value),
|
356
|
+
disabled: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:disabled)', value),
|
357
|
+
empty: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:empty)', value),
|
358
|
+
enabled: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:enabled)', value),
|
359
|
+
fullscreen: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:fullscreen)', value),
|
360
|
+
indeterminate: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:indeterminate)', value),
|
361
|
+
invalid: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:invalid)', value),
|
362
|
+
lang: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:lang)', value),
|
363
|
+
dirRTLUNSFAE: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:dir-rtlunsfae)', value),
|
364
|
+
link: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:link)', value),
|
365
|
+
optional: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:optional)', value),
|
366
|
+
pictureInPicture: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:picture-in-picture)', value),
|
367
|
+
placeholderShown: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:placeholder-shown)', value),
|
368
|
+
paused: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:paused)', value),
|
369
|
+
playing: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:playing)', value),
|
370
|
+
readOnly: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:read-only)', value),
|
371
|
+
readWrite: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:read-write)', value),
|
372
|
+
required: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:required)', value),
|
373
|
+
target: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:target)', value),
|
374
|
+
valid: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:valid)', value),
|
375
|
+
visited: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:visited)', value)
|
376
|
+
};
|
377
|
+
}
|
378
|
+
pseudoUNSAFE(selector, value) {
|
379
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `:${selector}`, value);
|
380
|
+
}
|
381
|
+
// These can be used to write arbitrary CSS selectors
|
382
|
+
// Which is UNSAFE!
|
383
|
+
_isUNSAFE(selector, value) {
|
384
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `:is(${selector})`, value);
|
385
|
+
}
|
386
|
+
_notUNSAFE(selector, value) {
|
387
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `:not(${selector})`, value);
|
388
|
+
}
|
389
|
+
}
|
390
|
+
exports.StylexValueBuilder = StylexValueBuilder;
|
391
|
+
function _set2(key, value) {
|
392
|
+
this[key] = value;
|
393
|
+
return this;
|
394
|
+
}
|
395
|
+
function stylexDefaultValue(value) {
|
396
|
+
return new StylexValueBuilder(value);
|
397
|
+
}
|
package/lib/stylex-keyframes.js
CHANGED
@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.default = styleXKeyframes;
|
7
7
|
var _hash = _interopRequireDefault(require("./hash"));
|
8
|
-
var
|
8
|
+
var _index = _interopRequireDefault(require("./preprocess-rules/index"));
|
9
9
|
var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
|
10
10
|
var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
|
11
11
|
var _transformValue = _interopRequireDefault(require("./transform-value"));
|
12
12
|
var _dashify = _interopRequireDefault(require("./utils/dashify"));
|
13
13
|
var _objectUtils = require("./utils/object-utils");
|
14
|
+
var _defaultOptions = require("./utils/default-options");
|
14
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
16
|
/**
|
16
17
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
@@ -27,11 +28,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
27
28
|
// It also expands shorthand properties to maintain parity with
|
28
29
|
// `stylex.create`.
|
29
30
|
function styleXKeyframes(frames) {
|
30
|
-
let
|
31
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
|
32
|
+
const {
|
31
33
|
stylexSheetName = '<>',
|
32
34
|
classNamePrefix = 'x'
|
33
|
-
} =
|
34
|
-
const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(expandFrameShorthands).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
|
35
|
+
} = options;
|
36
|
+
const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
|
35
37
|
const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
|
36
38
|
const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
|
37
39
|
const ltrString = constructKeyframesObj(ltrStyles);
|
@@ -47,16 +49,27 @@ function styleXKeyframes(frames) {
|
|
47
49
|
priority: 1
|
48
50
|
}];
|
49
51
|
}
|
50
|
-
function expandFrameShorthands(frame) {
|
51
|
-
return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0,
|
52
|
+
function expandFrameShorthands(frame, options) {
|
53
|
+
return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => {
|
54
|
+
let [key, value] = _ref;
|
55
|
+
if (typeof value === 'string' || typeof value === 'number') {
|
56
|
+
return [key, value];
|
57
|
+
}
|
58
|
+
return null;
|
59
|
+
}).filter(Boolean))
|
60
|
+
// Keyframes are not combined. The nulls can be skipped
|
61
|
+
.filter(_ref2 => {
|
62
|
+
let [_key, value] = _ref2;
|
63
|
+
return value != null;
|
64
|
+
}));
|
52
65
|
}
|
53
66
|
|
54
67
|
// Create t
|
55
68
|
function constructKeyframesObj(frames) {
|
56
|
-
return (0, _objectUtils.objEntries)(frames).map(
|
57
|
-
let [key, value] =
|
58
|
-
return `${key}{${(0, _objectUtils.objEntries)(value).map(
|
59
|
-
let [k, v] =
|
69
|
+
return (0, _objectUtils.objEntries)(frames).map(_ref3 => {
|
70
|
+
let [key, value] = _ref3;
|
71
|
+
return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => {
|
72
|
+
let [k, v] = _ref4;
|
60
73
|
return `${k}:${v};`;
|
61
74
|
}).join('')}}`;
|
62
75
|
}).join('');
|
@@ -0,0 +1,71 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Rule = exports.RawRuleRTLTuple = exports.RawRuleList = exports.RawRule = exports.CompiledRuleTuple2 = exports.CompiledRule = void 0;
|
7
|
+
/**
|
8
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
+
*
|
10
|
+
* This source code is licensed under the MIT license found in the
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
12
|
+
*
|
13
|
+
*
|
14
|
+
*/
|
15
|
+
|
16
|
+
/**
|
17
|
+
* This could be an interface, but we use a class so that we can
|
18
|
+
* use instanceof to check for it.
|
19
|
+
*/
|
20
|
+
// eslint-disable-next-line no-unused-vars
|
21
|
+
class Rule {}
|
22
|
+
|
23
|
+
/**
|
24
|
+
* This is a class that represents a raw style rule.
|
25
|
+
*
|
26
|
+
* It exists to track the actual CSS rule that should be compiled
|
27
|
+
* even as we transform the structure of the RawStyles object.
|
28
|
+
*/
|
29
|
+
exports.Rule = Rule;
|
30
|
+
class RawRule extends Rule {
|
31
|
+
constructor(key, value, psuedos, atRules) {
|
32
|
+
super();
|
33
|
+
this.key = key;
|
34
|
+
this.value = value;
|
35
|
+
this.psuedos = psuedos;
|
36
|
+
this.atRules = atRules;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
exports.RawRule = RawRule;
|
40
|
+
class RawRuleList extends Rule {
|
41
|
+
constructor(rules) {
|
42
|
+
super();
|
43
|
+
this.rules = rules;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
exports.RawRuleList = RawRuleList;
|
47
|
+
class RawRuleRTLTuple extends Rule {
|
48
|
+
constructor(rule1, rule2) {
|
49
|
+
super();
|
50
|
+
this.rules = [rule1, rule2];
|
51
|
+
}
|
52
|
+
}
|
53
|
+
exports.RawRuleRTLTuple = RawRuleRTLTuple;
|
54
|
+
class CompiledRule extends Rule {
|
55
|
+
constructor(key, value, psuedos, atRules, className) {
|
56
|
+
super();
|
57
|
+
this.key = key;
|
58
|
+
this.value = value;
|
59
|
+
this.psuedos = psuedos;
|
60
|
+
this.atRules = atRules;
|
61
|
+
this.className = className;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
exports.CompiledRule = CompiledRule;
|
65
|
+
class CompiledRuleTuple2 extends Rule {
|
66
|
+
constructor(rule1, rule2) {
|
67
|
+
super();
|
68
|
+
this.rules = [rule1, rule2];
|
69
|
+
}
|
70
|
+
}
|
71
|
+
exports.CompiledRuleTuple2 = CompiledRuleTuple2;
|
@@ -0,0 +1,34 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.defaultOptions = void 0;
|
7
|
+
/**
|
8
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
+
*
|
10
|
+
* This source code is licensed under the MIT license found in the
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
12
|
+
*
|
13
|
+
*/
|
14
|
+
|
15
|
+
// {
|
16
|
+
// ...options,
|
17
|
+
// dev: !!(options as any).dev,
|
18
|
+
// test: !!(options as any).test,
|
19
|
+
// stylexSheetName: (options as any).stylexSheetName ?? undefined,
|
20
|
+
// classNamePrefix: (options as any).classNamePrefix ?? 'x',
|
21
|
+
// importSources: (options as any).importSources ?? [name, 'stylex'],
|
22
|
+
// definedStylexCSSVariables:
|
23
|
+
// (options as any).definedStylexCSSVariables ?? {},
|
24
|
+
// genConditionalClasses: !!(options as any).genConditionalClasses,
|
25
|
+
// skipShorthandExpansion: !!(options as any).skipShorthandExpansion,
|
26
|
+
// } as StyleXOptions;
|
27
|
+
|
28
|
+
const defaultOptions = {
|
29
|
+
dev: false,
|
30
|
+
test: false,
|
31
|
+
classNamePrefix: 'x',
|
32
|
+
styleResolution: 'application-order'
|
33
|
+
};
|
34
|
+
exports.defaultOptions = defaultOptions;
|
package/lib/utils/genCSSRule.js
CHANGED
@@ -13,12 +13,13 @@
|
|
13
13
|
Object.defineProperty(exports, "__esModule", {
|
14
14
|
value: true
|
15
15
|
});
|
16
|
-
exports.
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
16
|
+
exports.genCSSRule = genCSSRule;
|
17
|
+
const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
|
18
|
+
function genCSSRule(className, decls, pseudos, atRules) {
|
19
|
+
const pseudo = pseudos.filter(p => p !== '::thumb').join('');
|
20
|
+
let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join('') + pseudo;
|
21
|
+
if (pseudos.includes('::thumb')) {
|
22
|
+
selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(', ');
|
21
23
|
}
|
22
|
-
return
|
23
|
-
}
|
24
|
-
const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
|
24
|
+
return atRules.reduce((acc, atRule) => `${atRule}{${acc}}`, `${selectorForAtRules}{${decls}}`);
|
25
|
+
}
|
@@ -27,6 +27,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
27
27
|
// changes 500ms to 0.5s, then `LeadingZero` makes it .5s
|
28
28
|
const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
|
29
29
|
function normalizeValue(value, key) {
|
30
|
+
if (value == null) {
|
31
|
+
return value;
|
32
|
+
}
|
30
33
|
const parsedAST = (0, _postcssValueParser.default)(value);
|
31
34
|
return normalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString();
|
32
35
|
}
|
@@ -3,8 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.Pipe = void 0;
|
6
|
+
exports.arraySort = exports.arrayEquals = exports.Pipe = void 0;
|
7
7
|
exports.flattenObject = flattenObject;
|
8
|
+
exports.isPlainObject = isPlainObject;
|
8
9
|
exports.objEntries = objEntries;
|
9
10
|
exports.objFromEntries = objFromEntries;
|
10
11
|
exports.objMap = objMap;
|
@@ -23,10 +24,13 @@ var _stylexInclude = require("../stylex-include");
|
|
23
24
|
|
24
25
|
// A bunch of object utils with better Flow types
|
25
26
|
|
27
|
+
function isPlainObject(obj) {
|
28
|
+
return typeof obj === 'object' && obj != null && !Array.isArray(obj) && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
|
29
|
+
}
|
26
30
|
function flattenObject(obj) {
|
27
31
|
const result = {};
|
28
32
|
for (const [key, value] of objEntries(obj)) {
|
29
|
-
if (typeof value === 'string') {
|
33
|
+
if (typeof value === 'string' || value == null) {
|
30
34
|
result[key] = value;
|
31
35
|
} else if (value instanceof _stylexInclude.IncludedStyles) {
|
32
36
|
result[key] = value;
|
@@ -91,4 +95,21 @@ class Pipe {
|
|
91
95
|
return new Pipe(val);
|
92
96
|
}
|
93
97
|
}
|
94
|
-
|
98
|
+
|
99
|
+
// Function that sorts an array without mutating it and returns a new array
|
100
|
+
exports.Pipe = Pipe;
|
101
|
+
const arraySort = (arr, fn) => [...arr].sort(fn);
|
102
|
+
exports.arraySort = arraySort;
|
103
|
+
const arrayEquals = function (arr1, arr2) {
|
104
|
+
let equals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (a, b) => a === b;
|
105
|
+
if (arr1.length !== arr2.length) {
|
106
|
+
return false;
|
107
|
+
}
|
108
|
+
for (let i = 0; i < arr1.length; i++) {
|
109
|
+
if (!equals(arr1[i], arr2[i])) {
|
110
|
+
return false;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
return true;
|
114
|
+
};
|
115
|
+
exports.arrayEquals = arrayEquals;
|