@stylix/core 4.1.1 → 5.1.0
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 +4 -4
- package/dist/index.d.ts +317 -0
- package/dist/index.js +1241 -728
- package/dist/index.js.map +1 -1
- package/package.json +37 -45
- package/tsconfig.json +15 -0
- package/dist/module.mjs +0 -866
- package/dist/module.mjs.map +0 -1
- package/dist/types.d.ts +0 -213
- package/dist/types.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,891 +1,1404 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React, { createContext, useLayoutEffect, useContext, useRef, useEffect } from 'react';
|
|
2
3
|
|
|
3
|
-
function
|
|
4
|
-
Object.defineProperty(a, '__esModule', {value: true, configurable: true});
|
|
5
|
-
}
|
|
6
|
-
function $parcel$export(e, n, v, s) {
|
|
7
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
|
-
}
|
|
9
|
-
function $parcel$interopDefault(a) {
|
|
10
|
-
return a && a.__esModule ? a.default : a;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
$parcel$defineInteropFlag(module.exports);
|
|
14
|
-
|
|
15
|
-
$parcel$export(module.exports, "useStylixContext", () => $918367b4cbc7189f$export$e3c6fdf4e371f028);
|
|
16
|
-
$parcel$export(module.exports, "useStylixTheme", () => $918367b4cbc7189f$export$c01a354187f160ee);
|
|
17
|
-
$parcel$export(module.exports, "StylixProvider", () => $918367b4cbc7189f$export$ae2c3ad5c234c4cc);
|
|
18
|
-
$parcel$export(module.exports, "StylixTheme", () => $918367b4cbc7189f$export$91c80431af53fbc7);
|
|
19
|
-
$parcel$export(module.exports, "useStyles", () => $b7bb7699b24ef4bd$export$28e6b9b82ee883c);
|
|
20
|
-
$parcel$export(module.exports, "useKeyframes", () => $b7bb7699b24ef4bd$export$f3922bb611b91373);
|
|
21
|
-
$parcel$export(module.exports, "useGlobalStyles", () => $b7bb7699b24ef4bd$export$abac79b9db5ae47b);
|
|
22
|
-
$parcel$export(module.exports, "defaultPlugins", () => $cb46c37cd304d3d0$export$b5ecb47695d6786e);
|
|
23
|
-
$parcel$export(module.exports, "customProps", () => $3173bf4e08028305$export$95cef81be5ddcfd4);
|
|
24
|
-
$parcel$export(module.exports, "mapObjectRecursive", () => $1ae3b31df309d474$export$72ae87c5302f282e);
|
|
25
|
-
$parcel$export(module.exports, "walkRecursive", () => $0893146e2e8f7a0d$export$a8d8e56b740dab80);
|
|
26
|
-
$parcel$export(module.exports, "createStyleCollector", () => $0c5ff6b44ea9986a$export$d3207b3764661c07);
|
|
27
|
-
$parcel$export(module.exports, "styleCollectorContext", () => $0c5ff6b44ea9986a$export$9b609b8e22cde6fe);
|
|
28
|
-
$parcel$export(module.exports, "classifyProps", () => $d4abddb46f405b94$export$54b296e95917282f);
|
|
29
|
-
$parcel$export(module.exports, "useClassifyProps", () => $d4abddb46f405b94$export$34c29a98f3a9910);
|
|
30
|
-
$parcel$export(module.exports, "styled", () => $f7963c5fb85d4dcf$export$3817b7a54a07cec7);
|
|
31
|
-
$parcel$export(module.exports, "default", () => $a4e8092b68236a62$export$2e2bcd8739ae039);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
function $d4abddb46f405b94$export$54b296e95917282f(props, knownProps) {
|
|
4
|
+
function classifyProps(props, knownProps) {
|
|
35
5
|
const styles = {};
|
|
36
6
|
const other = {};
|
|
37
|
-
for(const prop in props)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return [
|
|
49
|
-
styles,
|
|
50
|
-
other
|
|
51
|
-
];
|
|
7
|
+
for (const prop in props) {
|
|
8
|
+
// If prop is not a valid JSX prop, it must be a CSS selector.
|
|
9
|
+
// If prop has a style prop name and the value is likely a style value, it's a style prop.
|
|
10
|
+
if (!isValidJSXProp(prop) || isStyleProp(prop, knownProps)) {
|
|
11
|
+
styles[prop] = props[prop];
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
other[prop] = props[prop];
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return [styles, other];
|
|
52
18
|
}
|
|
53
|
-
|
|
54
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Determines if `value` is a recognized CSS property (can be standard CSS or custom Stylix prop).
|
|
21
|
+
*/
|
|
22
|
+
function isStyleProp(prop, knownProps) {
|
|
23
|
+
return isValidJSXProp(prop) && simplifyStylePropName(prop) in knownProps;
|
|
55
24
|
}
|
|
56
|
-
function
|
|
25
|
+
function isValidJSXProp(value) {
|
|
57
26
|
// Not an exact check, but mostly rules out complex css selectors
|
|
58
|
-
return /^[a-z$][a-z0-9_-]*$/i.test(value);
|
|
59
|
-
}
|
|
60
|
-
function $d4abddb46f405b94$export$2eda63d9f5a68c09(value) {
|
|
61
|
-
return value.toLowerCase().replace(/[^a-z]/gi, "");
|
|
27
|
+
return typeof value === 'string' && /^[a-z$][a-z0-9_-]*$/i.test(value);
|
|
62
28
|
}
|
|
63
|
-
function
|
|
64
|
-
return
|
|
65
|
-
typeof value === "object" && value.constructor === Object && !("$$typeof" in value);
|
|
29
|
+
function simplifyStylePropName(value) {
|
|
30
|
+
return value.toLowerCase().replace(/[^a-z]/g, '');
|
|
66
31
|
}
|
|
67
32
|
|
|
33
|
+
var cssProps = [
|
|
34
|
+
"-webkit-line-clamp",
|
|
35
|
+
"-webkit-text-fill-color",
|
|
36
|
+
"-webkit-text-stroke",
|
|
37
|
+
"-webkit-text-stroke-color",
|
|
38
|
+
"-webkit-text-stroke-width",
|
|
39
|
+
"accent-color",
|
|
40
|
+
"align-content",
|
|
41
|
+
"align-items",
|
|
42
|
+
"align-self",
|
|
43
|
+
"align-tracks",
|
|
44
|
+
"all",
|
|
45
|
+
"anchor-name",
|
|
46
|
+
"anchor-scope",
|
|
47
|
+
"animation",
|
|
48
|
+
"animation-composition",
|
|
49
|
+
"animation-delay",
|
|
50
|
+
"animation-direction",
|
|
51
|
+
"animation-duration",
|
|
52
|
+
"animation-fill-mode",
|
|
53
|
+
"animation-iteration-count",
|
|
54
|
+
"animation-name",
|
|
55
|
+
"animation-play-state",
|
|
56
|
+
"animation-range",
|
|
57
|
+
"animation-range-end",
|
|
58
|
+
"animation-range-start",
|
|
59
|
+
"animation-timeline",
|
|
60
|
+
"animation-timing-function",
|
|
61
|
+
"appearance",
|
|
62
|
+
"aspect-ratio",
|
|
63
|
+
"backface-visibility",
|
|
64
|
+
"background",
|
|
65
|
+
"background-attachment",
|
|
66
|
+
"background-blend-mode",
|
|
67
|
+
"background-clip",
|
|
68
|
+
"background-color",
|
|
69
|
+
"background-image",
|
|
70
|
+
"background-origin",
|
|
71
|
+
"background-position",
|
|
72
|
+
"background-position-x",
|
|
73
|
+
"background-position-y",
|
|
74
|
+
"background-repeat",
|
|
75
|
+
"background-size",
|
|
76
|
+
"block-size",
|
|
77
|
+
"border",
|
|
78
|
+
"border-block",
|
|
79
|
+
"border-block-color",
|
|
80
|
+
"border-block-end",
|
|
81
|
+
"border-block-end-color",
|
|
82
|
+
"border-block-end-style",
|
|
83
|
+
"border-block-end-width",
|
|
84
|
+
"border-block-start",
|
|
85
|
+
"border-block-start-color",
|
|
86
|
+
"border-block-start-style",
|
|
87
|
+
"border-block-start-width",
|
|
88
|
+
"border-block-style",
|
|
89
|
+
"border-block-width",
|
|
90
|
+
"border-bottom",
|
|
91
|
+
"border-bottom-color",
|
|
92
|
+
"border-bottom-left-radius",
|
|
93
|
+
"border-bottom-right-radius",
|
|
94
|
+
"border-bottom-style",
|
|
95
|
+
"border-bottom-width",
|
|
96
|
+
"border-collapse",
|
|
97
|
+
"border-color",
|
|
98
|
+
"border-end-end-radius",
|
|
99
|
+
"border-end-start-radius",
|
|
100
|
+
"border-image",
|
|
101
|
+
"border-image-outset",
|
|
102
|
+
"border-image-repeat",
|
|
103
|
+
"border-image-slice",
|
|
104
|
+
"border-image-source",
|
|
105
|
+
"border-image-width",
|
|
106
|
+
"border-inline",
|
|
107
|
+
"border-inline-color",
|
|
108
|
+
"border-inline-end",
|
|
109
|
+
"border-inline-end-color",
|
|
110
|
+
"border-inline-end-style",
|
|
111
|
+
"border-inline-end-width",
|
|
112
|
+
"border-inline-start",
|
|
113
|
+
"border-inline-start-color",
|
|
114
|
+
"border-inline-start-style",
|
|
115
|
+
"border-inline-start-width",
|
|
116
|
+
"border-inline-style",
|
|
117
|
+
"border-inline-width",
|
|
118
|
+
"border-left",
|
|
119
|
+
"border-left-color",
|
|
120
|
+
"border-left-style",
|
|
121
|
+
"border-left-width",
|
|
122
|
+
"border-radius",
|
|
123
|
+
"border-right",
|
|
124
|
+
"border-right-color",
|
|
125
|
+
"border-right-style",
|
|
126
|
+
"border-right-width",
|
|
127
|
+
"border-spacing",
|
|
128
|
+
"border-start-end-radius",
|
|
129
|
+
"border-start-start-radius",
|
|
130
|
+
"border-style",
|
|
131
|
+
"border-top",
|
|
132
|
+
"border-top-color",
|
|
133
|
+
"border-top-left-radius",
|
|
134
|
+
"border-top-right-radius",
|
|
135
|
+
"border-top-style",
|
|
136
|
+
"border-top-width",
|
|
137
|
+
"border-width",
|
|
138
|
+
"bottom",
|
|
139
|
+
"box-decoration-break",
|
|
140
|
+
"box-shadow",
|
|
141
|
+
"box-sizing",
|
|
142
|
+
"break-after",
|
|
143
|
+
"break-before",
|
|
144
|
+
"break-inside",
|
|
145
|
+
"caption-side",
|
|
146
|
+
"caret",
|
|
147
|
+
"caret-color",
|
|
148
|
+
"caret-shape",
|
|
149
|
+
"clear",
|
|
150
|
+
"color",
|
|
151
|
+
"color-scheme",
|
|
152
|
+
"column-count",
|
|
153
|
+
"column-fill",
|
|
154
|
+
"column-gap",
|
|
155
|
+
"column-rule",
|
|
156
|
+
"column-rule-color",
|
|
157
|
+
"column-rule-style",
|
|
158
|
+
"column-rule-width",
|
|
159
|
+
"column-span",
|
|
160
|
+
"column-width",
|
|
161
|
+
"columns",
|
|
162
|
+
"contain",
|
|
163
|
+
"contain-intrinsic-block-size",
|
|
164
|
+
"contain-intrinsic-height",
|
|
165
|
+
"contain-intrinsic-inline-size",
|
|
166
|
+
"contain-intrinsic-size",
|
|
167
|
+
"contain-intrinsic-width",
|
|
168
|
+
"container",
|
|
169
|
+
"container-name",
|
|
170
|
+
"container-type",
|
|
171
|
+
"content",
|
|
172
|
+
"content-visibility",
|
|
173
|
+
"counter-increment",
|
|
174
|
+
"counter-reset",
|
|
175
|
+
"counter-set",
|
|
176
|
+
"cursor",
|
|
177
|
+
"direction",
|
|
178
|
+
"display",
|
|
179
|
+
"empty-cells",
|
|
180
|
+
"field-sizing",
|
|
181
|
+
"flex",
|
|
182
|
+
"flex-basis",
|
|
183
|
+
"flex-direction",
|
|
184
|
+
"flex-flow",
|
|
185
|
+
"flex-grow",
|
|
186
|
+
"flex-shrink",
|
|
187
|
+
"flex-wrap",
|
|
188
|
+
"float",
|
|
189
|
+
"font",
|
|
190
|
+
"font-family",
|
|
191
|
+
"font-feature-settings",
|
|
192
|
+
"font-kerning",
|
|
193
|
+
"font-language-override",
|
|
194
|
+
"font-optical-sizing",
|
|
195
|
+
"font-palette",
|
|
196
|
+
"font-size",
|
|
197
|
+
"font-size-adjust",
|
|
198
|
+
"font-stretch",
|
|
199
|
+
"font-style",
|
|
200
|
+
"font-synthesis",
|
|
201
|
+
"font-synthesis-position",
|
|
202
|
+
"font-synthesis-small-caps",
|
|
203
|
+
"font-synthesis-style",
|
|
204
|
+
"font-synthesis-weight",
|
|
205
|
+
"font-variant",
|
|
206
|
+
"font-variant-alternates",
|
|
207
|
+
"font-variant-caps",
|
|
208
|
+
"font-variant-east-asian",
|
|
209
|
+
"font-variant-emoji",
|
|
210
|
+
"font-variant-ligatures",
|
|
211
|
+
"font-variant-numeric",
|
|
212
|
+
"font-variant-position",
|
|
213
|
+
"font-variation-settings",
|
|
214
|
+
"font-weight",
|
|
215
|
+
"forced-color-adjust",
|
|
216
|
+
"gap",
|
|
217
|
+
"grid",
|
|
218
|
+
"grid-area",
|
|
219
|
+
"grid-auto-columns",
|
|
220
|
+
"grid-auto-flow",
|
|
221
|
+
"grid-auto-rows",
|
|
222
|
+
"grid-column",
|
|
223
|
+
"grid-column-end",
|
|
224
|
+
"grid-column-start",
|
|
225
|
+
"grid-row",
|
|
226
|
+
"grid-row-end",
|
|
227
|
+
"grid-row-start",
|
|
228
|
+
"grid-template",
|
|
229
|
+
"grid-template-areas",
|
|
230
|
+
"grid-template-columns",
|
|
231
|
+
"grid-template-rows",
|
|
232
|
+
"hanging-punctuation",
|
|
233
|
+
"height",
|
|
234
|
+
"hyphenate-character",
|
|
235
|
+
"hyphenate-limit-chars",
|
|
236
|
+
"hyphens",
|
|
237
|
+
"image-orientation",
|
|
238
|
+
"image-rendering",
|
|
239
|
+
"image-resolution",
|
|
240
|
+
"initial-letter",
|
|
241
|
+
"initial-letter-align",
|
|
242
|
+
"inline-size",
|
|
243
|
+
"input-security",
|
|
244
|
+
"inset",
|
|
245
|
+
"inset-block",
|
|
246
|
+
"inset-block-end",
|
|
247
|
+
"inset-block-start",
|
|
248
|
+
"inset-inline",
|
|
249
|
+
"inset-inline-end",
|
|
250
|
+
"inset-inline-start",
|
|
251
|
+
"interpolate-size",
|
|
252
|
+
"isolation",
|
|
253
|
+
"justify-content",
|
|
254
|
+
"justify-items",
|
|
255
|
+
"justify-self",
|
|
256
|
+
"justify-tracks",
|
|
257
|
+
"left",
|
|
258
|
+
"letter-spacing",
|
|
259
|
+
"line-break",
|
|
260
|
+
"line-clamp",
|
|
261
|
+
"line-height",
|
|
262
|
+
"line-height-step",
|
|
263
|
+
"list-style",
|
|
264
|
+
"list-style-image",
|
|
265
|
+
"list-style-position",
|
|
266
|
+
"list-style-type",
|
|
267
|
+
"margin",
|
|
268
|
+
"margin-block",
|
|
269
|
+
"margin-block-end",
|
|
270
|
+
"margin-block-start",
|
|
271
|
+
"margin-bottom",
|
|
272
|
+
"margin-inline",
|
|
273
|
+
"margin-inline-end",
|
|
274
|
+
"margin-inline-start",
|
|
275
|
+
"margin-left",
|
|
276
|
+
"margin-right",
|
|
277
|
+
"margin-top",
|
|
278
|
+
"margin-trim",
|
|
279
|
+
"mask-type",
|
|
280
|
+
"masonry-auto-flow",
|
|
281
|
+
"math-depth",
|
|
282
|
+
"math-shift",
|
|
283
|
+
"math-style",
|
|
284
|
+
"max-block-size",
|
|
285
|
+
"max-height",
|
|
286
|
+
"max-inline-size",
|
|
287
|
+
"max-lines",
|
|
288
|
+
"max-width",
|
|
289
|
+
"min-block-size",
|
|
290
|
+
"min-height",
|
|
291
|
+
"min-inline-size",
|
|
292
|
+
"min-width",
|
|
293
|
+
"mix-blend-mode",
|
|
294
|
+
"object-fit",
|
|
295
|
+
"object-position",
|
|
296
|
+
"offset",
|
|
297
|
+
"offset-anchor",
|
|
298
|
+
"offset-distance",
|
|
299
|
+
"offset-path",
|
|
300
|
+
"offset-position",
|
|
301
|
+
"offset-rotate",
|
|
302
|
+
"opacity",
|
|
303
|
+
"order",
|
|
304
|
+
"orphans",
|
|
305
|
+
"outline",
|
|
306
|
+
"outline-color",
|
|
307
|
+
"outline-offset",
|
|
308
|
+
"outline-style",
|
|
309
|
+
"outline-width",
|
|
310
|
+
"overflow",
|
|
311
|
+
"overflow-anchor",
|
|
312
|
+
"overflow-block",
|
|
313
|
+
"overflow-clip-margin",
|
|
314
|
+
"overflow-inline",
|
|
315
|
+
"overflow-wrap",
|
|
316
|
+
"overflow-x",
|
|
317
|
+
"overflow-y",
|
|
318
|
+
"overlay",
|
|
319
|
+
"overscroll-behavior",
|
|
320
|
+
"overscroll-behavior-block",
|
|
321
|
+
"overscroll-behavior-inline",
|
|
322
|
+
"overscroll-behavior-x",
|
|
323
|
+
"overscroll-behavior-y",
|
|
324
|
+
"padding",
|
|
325
|
+
"padding-block",
|
|
326
|
+
"padding-block-end",
|
|
327
|
+
"padding-block-start",
|
|
328
|
+
"padding-bottom",
|
|
329
|
+
"padding-inline",
|
|
330
|
+
"padding-inline-end",
|
|
331
|
+
"padding-inline-start",
|
|
332
|
+
"padding-left",
|
|
333
|
+
"padding-right",
|
|
334
|
+
"padding-top",
|
|
335
|
+
"page",
|
|
336
|
+
"page-break-after",
|
|
337
|
+
"page-break-before",
|
|
338
|
+
"page-break-inside",
|
|
339
|
+
"paint-order",
|
|
340
|
+
"perspective",
|
|
341
|
+
"perspective-origin",
|
|
342
|
+
"place-content",
|
|
343
|
+
"place-items",
|
|
344
|
+
"place-self",
|
|
345
|
+
"pointer-events",
|
|
346
|
+
"position",
|
|
347
|
+
"position-anchor",
|
|
348
|
+
"position-area",
|
|
349
|
+
"position-try",
|
|
350
|
+
"position-try-fallbacks",
|
|
351
|
+
"position-try-order",
|
|
352
|
+
"position-visibility",
|
|
353
|
+
"print-color-adjust",
|
|
354
|
+
"quotes",
|
|
355
|
+
"resize",
|
|
356
|
+
"right",
|
|
357
|
+
"rotate",
|
|
358
|
+
"row-gap",
|
|
359
|
+
"ruby-align",
|
|
360
|
+
"ruby-merge",
|
|
361
|
+
"ruby-position",
|
|
362
|
+
"scale",
|
|
363
|
+
"scroll-behavior",
|
|
364
|
+
"scroll-margin",
|
|
365
|
+
"scroll-margin-block",
|
|
366
|
+
"scroll-margin-block-end",
|
|
367
|
+
"scroll-margin-block-start",
|
|
368
|
+
"scroll-margin-bottom",
|
|
369
|
+
"scroll-margin-inline",
|
|
370
|
+
"scroll-margin-inline-end",
|
|
371
|
+
"scroll-margin-inline-start",
|
|
372
|
+
"scroll-margin-left",
|
|
373
|
+
"scroll-margin-right",
|
|
374
|
+
"scroll-margin-top",
|
|
375
|
+
"scroll-padding",
|
|
376
|
+
"scroll-padding-block",
|
|
377
|
+
"scroll-padding-block-end",
|
|
378
|
+
"scroll-padding-block-start",
|
|
379
|
+
"scroll-padding-bottom",
|
|
380
|
+
"scroll-padding-inline",
|
|
381
|
+
"scroll-padding-inline-end",
|
|
382
|
+
"scroll-padding-inline-start",
|
|
383
|
+
"scroll-padding-left",
|
|
384
|
+
"scroll-padding-right",
|
|
385
|
+
"scroll-padding-top",
|
|
386
|
+
"scroll-snap-align",
|
|
387
|
+
"scroll-snap-stop",
|
|
388
|
+
"scroll-snap-type",
|
|
389
|
+
"scroll-timeline",
|
|
390
|
+
"scroll-timeline-axis",
|
|
391
|
+
"scroll-timeline-name",
|
|
392
|
+
"scrollbar-color",
|
|
393
|
+
"scrollbar-gutter",
|
|
394
|
+
"scrollbar-width",
|
|
395
|
+
"shape-image-threshold",
|
|
396
|
+
"shape-margin",
|
|
397
|
+
"shape-outside",
|
|
398
|
+
"stroke",
|
|
399
|
+
"tab-size",
|
|
400
|
+
"table-layout",
|
|
401
|
+
"text-align",
|
|
402
|
+
"text-align-last",
|
|
403
|
+
"text-box",
|
|
404
|
+
"text-box-edge",
|
|
405
|
+
"text-box-trim",
|
|
406
|
+
"text-combine-upright",
|
|
407
|
+
"text-decoration",
|
|
408
|
+
"text-decoration-color",
|
|
409
|
+
"text-decoration-line",
|
|
410
|
+
"text-decoration-skip",
|
|
411
|
+
"text-decoration-skip-ink",
|
|
412
|
+
"text-decoration-style",
|
|
413
|
+
"text-decoration-thickness",
|
|
414
|
+
"text-emphasis",
|
|
415
|
+
"text-emphasis-color",
|
|
416
|
+
"text-emphasis-position",
|
|
417
|
+
"text-emphasis-style",
|
|
418
|
+
"text-indent",
|
|
419
|
+
"text-justify",
|
|
420
|
+
"text-orientation",
|
|
421
|
+
"text-overflow",
|
|
422
|
+
"text-rendering",
|
|
423
|
+
"text-shadow",
|
|
424
|
+
"text-size-adjust",
|
|
425
|
+
"text-spacing-trim",
|
|
426
|
+
"text-transform",
|
|
427
|
+
"text-underline-offset",
|
|
428
|
+
"text-underline-position",
|
|
429
|
+
"text-wrap",
|
|
430
|
+
"text-wrap-mode",
|
|
431
|
+
"text-wrap-style",
|
|
432
|
+
"timeline-scope",
|
|
433
|
+
"top",
|
|
434
|
+
"touch-action",
|
|
435
|
+
"transform",
|
|
436
|
+
"transform-box",
|
|
437
|
+
"transform-origin",
|
|
438
|
+
"transform-style",
|
|
439
|
+
"transition",
|
|
440
|
+
"transition-behavior",
|
|
441
|
+
"transition-delay",
|
|
442
|
+
"transition-duration",
|
|
443
|
+
"transition-property",
|
|
444
|
+
"transition-timing-function",
|
|
445
|
+
"translate",
|
|
446
|
+
"unicode-bidi",
|
|
447
|
+
"user-select",
|
|
448
|
+
"vertical-align",
|
|
449
|
+
"view-timeline",
|
|
450
|
+
"view-timeline-axis",
|
|
451
|
+
"view-timeline-inset",
|
|
452
|
+
"view-timeline-name",
|
|
453
|
+
"view-transition-name",
|
|
454
|
+
"visibility",
|
|
455
|
+
"white-space",
|
|
456
|
+
"white-space-collapse",
|
|
457
|
+
"widows",
|
|
458
|
+
"width",
|
|
459
|
+
"will-change",
|
|
460
|
+
"word-break",
|
|
461
|
+
"word-spacing",
|
|
462
|
+
"word-wrap",
|
|
463
|
+
"writing-mode",
|
|
464
|
+
"z-index",
|
|
465
|
+
"zoom"
|
|
466
|
+
];
|
|
68
467
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
468
|
+
function isEmpty(obj) {
|
|
469
|
+
if (!obj)
|
|
470
|
+
return true;
|
|
471
|
+
if (Array.isArray(obj))
|
|
472
|
+
return obj.length === 0;
|
|
473
|
+
for (const _ in obj)
|
|
474
|
+
return false;
|
|
475
|
+
if (typeof obj === 'object')
|
|
476
|
+
return true;
|
|
477
|
+
return false;
|
|
478
|
+
}
|
|
72
479
|
|
|
73
480
|
/**
|
|
74
481
|
* Indicates that an object is most likely just an object literal.
|
|
75
|
-
*/
|
|
76
|
-
|
|
482
|
+
*/
|
|
483
|
+
function isPlainObject(value) {
|
|
484
|
+
if (!value || typeof value !== 'object')
|
|
485
|
+
return false;
|
|
486
|
+
return Object.getPrototypeOf(value) === Object.prototype;
|
|
77
487
|
}
|
|
78
488
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
for(const key in object){
|
|
489
|
+
function _cleanStyles(object) {
|
|
490
|
+
for (const key in object) {
|
|
82
491
|
const value = object[key];
|
|
83
|
-
if (value === null || value === undefined || value ===
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
492
|
+
if (value === null || value === undefined || value === '' || value === false)
|
|
493
|
+
delete object[key];
|
|
494
|
+
else if (isPlainObject(value) || Array.isArray(value)) {
|
|
495
|
+
_cleanStyles(value);
|
|
496
|
+
if (isEmpty(value))
|
|
497
|
+
delete object[key];
|
|
87
498
|
}
|
|
88
499
|
}
|
|
89
|
-
return object;
|
|
90
500
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
501
|
+
/**
|
|
502
|
+
* Removes null, undefined, and empty string values from style objects.
|
|
503
|
+
*/
|
|
504
|
+
const cleanStyles = {
|
|
505
|
+
name: 'cleanStyles',
|
|
506
|
+
type: 'processStyles',
|
|
507
|
+
plugin(_ctx, styles) {
|
|
508
|
+
_cleanStyles(styles);
|
|
509
|
+
return styles;
|
|
510
|
+
},
|
|
97
511
|
};
|
|
98
512
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
513
|
+
/**
|
|
514
|
+
* Returns a new object or array, generated by invoking `map` on each key-value pair in `source` and merging the returned value into
|
|
515
|
+
* the result. The return value should be an object or array (to match `source`), or undefined to omit the key-value pair from the result.
|
|
516
|
+
*
|
|
517
|
+
* If `source` is an object, Object.assign() will be used to merge the response into the result object.
|
|
518
|
+
*
|
|
519
|
+
* If `source` is an array, the returned array entries will be pushed onto the result array (i.e. it will be flattened, one level deep).
|
|
520
|
+
*
|
|
521
|
+
* The `map` function will receive the following arguments:
|
|
522
|
+
* - The current key or index
|
|
523
|
+
* - The current value
|
|
524
|
+
* - The current object/array being mapped
|
|
525
|
+
* - A context object. This is a plain object that you can modify as needed. The value will be shallow cloned for each key, and the clone
|
|
526
|
+
* will be passed into the `mapRecursive` method in order to persist it in recursive mapping.
|
|
527
|
+
* - A `mapRecursive` function that can be used to recursively map nested objects or arrays. You can call this by passing the current value,
|
|
528
|
+
* which will run the same mapping function on the value and return the result. If the value is not an object or array, it will just
|
|
529
|
+
* return the value. The mapping function will receive the context object for the current key, and any modifications made to the context
|
|
530
|
+
* object will be persisted into the recursive call. This could be used, for example, to keep track of the current depth of the recursion
|
|
531
|
+
* or the full path of the current value.
|
|
532
|
+
*
|
|
533
|
+
* Example:
|
|
534
|
+
*
|
|
535
|
+
* ```ts
|
|
536
|
+
* const value = {
|
|
537
|
+
* ignoreMe: null,
|
|
538
|
+
* string: 'value',
|
|
539
|
+
* object: {
|
|
540
|
+
* a: 1,
|
|
541
|
+
* b: 2,
|
|
542
|
+
* },
|
|
543
|
+
* array: [1, 2, 3, 4],
|
|
544
|
+
* }
|
|
545
|
+
* const result = mapObjectRecursive(value, (key, value, source, context) => {
|
|
546
|
+
* if (key === 'ignoreMe')
|
|
547
|
+
* return undefined; // will omit key from result
|
|
548
|
+
* if (typeof key === 'string' && typeof value === 'string')
|
|
549
|
+
* return { [key]: value + '-mapped' }; // will append '-mapped' to string values
|
|
550
|
+
* if (typeof key === 'string' && typeof value === 'number')
|
|
551
|
+
* return { [key]: value, [`${key}-mapped`]: value * 2 }; // will add a new key with the value doubled
|
|
552
|
+
* if (typeof value === 'object')
|
|
553
|
+
* return { [key]: value }; // will leave object unchanged
|
|
554
|
+
* if (Array.isArray(source) && typeof value === 'number')
|
|
555
|
+
* return [value, value * 2]; // will add the value and the value doubled to the array
|
|
556
|
+
* });
|
|
557
|
+
* // result:
|
|
558
|
+
* // {
|
|
559
|
+
* // string: 'value-mapped',
|
|
560
|
+
* // object: {
|
|
561
|
+
* // a: 1,
|
|
562
|
+
* // 'a-mapped': 2,
|
|
563
|
+
* // b: 2,
|
|
564
|
+
* // 'b-mapped': 4,
|
|
565
|
+
* // },
|
|
566
|
+
* // array: [1, 2, 2, 4, 3, 6, 4, 8],
|
|
567
|
+
* // }
|
|
568
|
+
* ```
|
|
569
|
+
*/
|
|
570
|
+
function mapObject(source, map, context = {}) {
|
|
571
|
+
if (typeof source !== 'object')
|
|
572
|
+
return source;
|
|
573
|
+
const result = Array.isArray(source) ? [] : {};
|
|
574
|
+
for (const _key in source) {
|
|
575
|
+
const key = Array.isArray(source) ? +_key : _key;
|
|
576
|
+
const value = source[key];
|
|
577
|
+
const contextClone = { ...context };
|
|
578
|
+
const mapResult = map(key, value, source, contextClone, (value) => mapObject(value, map, contextClone));
|
|
579
|
+
if (typeof mapResult === 'undefined')
|
|
580
|
+
continue;
|
|
581
|
+
if (Array.isArray(mapResult) && Array.isArray(source)) {
|
|
582
|
+
result.push(...mapResult);
|
|
583
|
+
continue;
|
|
584
|
+
}
|
|
585
|
+
if (typeof mapResult === 'object' &&
|
|
586
|
+
!Array.isArray(mapResult) &&
|
|
587
|
+
typeof source === 'object' &&
|
|
588
|
+
!Array.isArray(source)) {
|
|
589
|
+
Object.assign(result, mapResult);
|
|
590
|
+
continue;
|
|
119
591
|
}
|
|
592
|
+
throw new Error(`mapObjectRecursive: return value of map function must be an object, array, or undefined, and must match the type of the source value. Type of source value was ${typeof source}, and type of returned value was ${typeof mapResult}.`);
|
|
120
593
|
}
|
|
121
|
-
return
|
|
594
|
+
return result;
|
|
122
595
|
}
|
|
123
596
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
597
|
+
const defaultIgnoreUnits = [
|
|
598
|
+
'aspect-ratio',
|
|
599
|
+
'columns',
|
|
600
|
+
'column-count',
|
|
601
|
+
'fill-opacity',
|
|
602
|
+
'flex',
|
|
603
|
+
'flex-grow',
|
|
604
|
+
'flex-shrink',
|
|
605
|
+
'font-weight',
|
|
606
|
+
'line-height',
|
|
607
|
+
'opacity',
|
|
608
|
+
'orphans',
|
|
609
|
+
'stroke-opacity',
|
|
610
|
+
'widows',
|
|
611
|
+
'z-index',
|
|
612
|
+
'zoom',
|
|
613
|
+
'order',
|
|
141
614
|
];
|
|
142
|
-
|
|
615
|
+
/**
|
|
616
|
+
* Adds unit (px, em, etc) to numeric values for any style properties not included in `ignoreProps`..
|
|
617
|
+
*/
|
|
618
|
+
const defaultUnits = (unit = 'px', ignoreProps = defaultIgnoreUnits) => {
|
|
143
619
|
return {
|
|
144
|
-
name:
|
|
145
|
-
type:
|
|
146
|
-
plugin
|
|
147
|
-
return (
|
|
148
|
-
|
|
149
|
-
ignoreProps: ignoreProps
|
|
150
|
-
});
|
|
151
|
-
}
|
|
620
|
+
name: 'defaultUnits',
|
|
621
|
+
type: 'processStyles',
|
|
622
|
+
plugin(ctx, styles) {
|
|
623
|
+
return mapObject(styles, defaultUnitsMap, { unit, ignoreProps });
|
|
624
|
+
},
|
|
152
625
|
};
|
|
153
626
|
};
|
|
154
|
-
const
|
|
155
|
-
if (typeof value ===
|
|
156
|
-
[key]: String(value) + ctx.unit
|
|
157
|
-
}
|
|
627
|
+
const defaultUnitsMap = (key, value, object, ctx, mapRecursive) => {
|
|
628
|
+
if (typeof value === 'number' && !ctx.ignoreProps.includes(key)) {
|
|
629
|
+
return { [key]: String(value) + ctx.unit };
|
|
630
|
+
}
|
|
631
|
+
return { [key]: mapRecursive(value) };
|
|
158
632
|
};
|
|
159
|
-
const
|
|
160
|
-
|
|
633
|
+
const defaultPixelUnits = defaultUnits();
|
|
161
634
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
for(let key in styles){
|
|
635
|
+
function _hoistKeyframes(styles, root) {
|
|
636
|
+
for (const key in styles) {
|
|
165
637
|
const value = styles[key];
|
|
166
|
-
if (key.startsWith(
|
|
167
|
-
//
|
|
168
|
-
root[key] =
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
else if ((
|
|
173
|
-
//
|
|
174
|
-
|
|
175
|
-
else key = (selector + " " + key).trim();
|
|
176
|
-
parent[key] = parent[key] || {};
|
|
177
|
-
$c8dda8e320ddf617$var$flatten(value, parent, key, root, mediaRoot);
|
|
178
|
-
} else {
|
|
179
|
-
// Selector is just a css property
|
|
180
|
-
parent[selector] = parent[selector] || {};
|
|
181
|
-
parent[selector][key] = styles[key];
|
|
638
|
+
if (key.startsWith('@keyframes')) {
|
|
639
|
+
// Add keyframe rules as-is directly to root object
|
|
640
|
+
root[key] = value;
|
|
641
|
+
if (styles !== root)
|
|
642
|
+
delete styles[key];
|
|
643
|
+
}
|
|
644
|
+
else if (isPlainObject(value)) {
|
|
645
|
+
// Recursively flatten nested styles
|
|
646
|
+
_hoistKeyframes(value, root);
|
|
182
647
|
}
|
|
183
648
|
}
|
|
649
|
+
return styles;
|
|
184
650
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
651
|
+
/**
|
|
652
|
+
* Hoists @keyframe declarations to root of styles object.
|
|
653
|
+
*/
|
|
654
|
+
const hoistKeyframes = {
|
|
655
|
+
name: 'hoistKeyframes',
|
|
656
|
+
type: 'processStyles',
|
|
657
|
+
plugin(ctx, styles) {
|
|
658
|
+
return _hoistKeyframes(styles, styles);
|
|
659
|
+
},
|
|
193
660
|
};
|
|
194
661
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
const
|
|
199
|
-
name:
|
|
200
|
-
type:
|
|
201
|
-
plugin
|
|
202
|
-
// Fill out ditto values
|
|
203
|
-
styles = (0, $1ae3b31df309d474$export$72ae87c5302f282e)(styles, $146fcd00a9d12160$var$mapDittoValues);
|
|
204
|
-
const mediaStyles = {};
|
|
205
|
-
let nonMediaStyles = styles;
|
|
206
|
-
for(const i in ctx.media){
|
|
207
|
-
const mediaQuery = ctx.media[i];
|
|
208
|
-
if (!mediaQuery) nonMediaStyles = (0, $1ae3b31df309d474$export$72ae87c5302f282e)(styles, $146fcd00a9d12160$var$mapNonMedia, {
|
|
209
|
-
i: i
|
|
210
|
-
});
|
|
211
|
-
else mediaStyles[`@media ${mediaQuery}`] = (0, $1ae3b31df309d474$export$72ae87c5302f282e)(styles, $146fcd00a9d12160$var$mapMediaStyles, {
|
|
212
|
-
i: i
|
|
213
|
-
});
|
|
214
|
-
}
|
|
215
|
-
return {
|
|
216
|
-
...nonMediaStyles,
|
|
217
|
-
...mediaStyles
|
|
218
|
-
};
|
|
219
|
-
}
|
|
662
|
+
/**
|
|
663
|
+
* Expands media objects using the media definitions from the Stylix context.
|
|
664
|
+
*/
|
|
665
|
+
const mediaObjects = {
|
|
666
|
+
name: 'mediaObjects',
|
|
667
|
+
type: 'processStyles',
|
|
668
|
+
plugin: mediaObjectsPlugin,
|
|
220
669
|
};
|
|
221
|
-
function
|
|
222
|
-
if (
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
670
|
+
function mediaObjectsPlugin(ctx, styles) {
|
|
671
|
+
if (!ctx.media)
|
|
672
|
+
return styles;
|
|
673
|
+
return processMediaStyles(ctx.media, ctx.styleProps, styles);
|
|
674
|
+
}
|
|
675
|
+
function processMediaStyles(mediaDef, styleProps, styles) {
|
|
676
|
+
if (!styles || typeof styles !== 'object')
|
|
677
|
+
return styles;
|
|
678
|
+
// If styles is an array, just recursively map it
|
|
679
|
+
if (Array.isArray(styles)) {
|
|
680
|
+
return styles.map((style) => processMediaStyles(mediaDef, styleProps, style));
|
|
681
|
+
}
|
|
682
|
+
mediaDef.default ||= (styles) => styles;
|
|
683
|
+
const result = { default: [] };
|
|
684
|
+
for (const styleKey in styles) {
|
|
685
|
+
const styleValue = styles[styleKey];
|
|
686
|
+
if (styleProps[simplifyStylePropName(styleKey)]) {
|
|
687
|
+
if (typeof styleValue !== 'object') {
|
|
688
|
+
// Regular style prop
|
|
689
|
+
result.default.push({ [styleKey]: styleValue });
|
|
690
|
+
continue;
|
|
691
|
+
}
|
|
692
|
+
// An object for a style prop is definitely a media object
|
|
693
|
+
for (const mediaKey in styleValue) {
|
|
694
|
+
result[mediaKey] ||= [];
|
|
695
|
+
result[mediaKey].push(mediaDef[mediaKey]({
|
|
696
|
+
// process recursively
|
|
697
|
+
[styleKey]: processMediaStyles(mediaDef, styleProps, styleValue[mediaKey]),
|
|
698
|
+
}));
|
|
699
|
+
}
|
|
700
|
+
continue;
|
|
226
701
|
}
|
|
227
|
-
|
|
228
|
-
[
|
|
229
|
-
|
|
702
|
+
if (styleKey in mediaDef) {
|
|
703
|
+
result[styleKey] ||= [];
|
|
704
|
+
result[styleKey].push(mediaDef[styleKey](
|
|
705
|
+
// process recursively
|
|
706
|
+
processMediaStyles(mediaDef, styleProps, styleValue)));
|
|
707
|
+
continue;
|
|
708
|
+
}
|
|
709
|
+
// Key is a selector, just process recursively and add to plain styles
|
|
710
|
+
result.default.push({ [styleKey]: processMediaStyles(mediaDef, styleProps, styleValue) });
|
|
230
711
|
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
if (Array.isArray(value)) return {
|
|
234
|
-
[key]: value[context.i]
|
|
235
|
-
};
|
|
236
|
-
}
|
|
237
|
-
function $146fcd00a9d12160$var$mapMediaStyles(key, value, object, context) {
|
|
238
|
-
if (typeof key === "number") return; // Not possible, but here for TS
|
|
239
|
-
if (key.startsWith("@keyframes")) context.keyframes = true;
|
|
240
|
-
if (Array.isArray(value)) return {
|
|
241
|
-
[key]: value[context.i]
|
|
242
|
-
};
|
|
243
|
-
if ((0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(value) || context.keyframes) return;
|
|
244
|
-
// delete key/value pair if primitive
|
|
245
|
-
return {
|
|
246
|
-
[key]: undefined
|
|
247
|
-
};
|
|
712
|
+
const results = Object.values(result);
|
|
713
|
+
return results.length === 1 ? results[0] : results.length === 0 ? null : results;
|
|
248
714
|
}
|
|
249
715
|
|
|
250
|
-
|
|
251
716
|
/**
|
|
252
|
-
*
|
|
253
|
-
*/
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
717
|
+
* Merges arrays into flat objects, recursively throughout the styles object.
|
|
718
|
+
*/
|
|
719
|
+
const mergeArrays = {
|
|
720
|
+
name: 'mergeArrays',
|
|
721
|
+
type: 'processStyles',
|
|
722
|
+
plugin: (_ctx, styles) => _mergeArrays(styles),
|
|
723
|
+
};
|
|
724
|
+
function _mergeArrays(obj) {
|
|
725
|
+
if (Array.isArray(obj))
|
|
726
|
+
return reduceArray(obj);
|
|
727
|
+
return reduceObjectProperties(obj);
|
|
257
728
|
}
|
|
258
|
-
function
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
729
|
+
function reduceArray(arr) {
|
|
730
|
+
arr = arr.flat();
|
|
731
|
+
let target = arr[0];
|
|
732
|
+
for (let i = 1; i < arr.length; i++) {
|
|
733
|
+
let source = arr[i];
|
|
734
|
+
if (Array.isArray(source)) {
|
|
735
|
+
source = reduceArray(source);
|
|
736
|
+
}
|
|
737
|
+
// ignore falsy values
|
|
738
|
+
if (typeof source === 'undefined')
|
|
739
|
+
continue;
|
|
740
|
+
// if both values are primitives, the source value takes precedence
|
|
741
|
+
if (typeof target !== 'object' && typeof source !== 'object') {
|
|
742
|
+
target = source;
|
|
743
|
+
continue;
|
|
744
|
+
}
|
|
745
|
+
// if target is primitive but source is object, replace target with source
|
|
746
|
+
if (typeof target !== 'object') {
|
|
747
|
+
target = source;
|
|
748
|
+
continue;
|
|
749
|
+
}
|
|
750
|
+
for (const key in source) {
|
|
751
|
+
const value = source[key];
|
|
752
|
+
// if the key does not exist in target, just add it
|
|
753
|
+
if (!(key in target))
|
|
754
|
+
target[key] = value;
|
|
755
|
+
// else, if the target value is an object or array:
|
|
756
|
+
else if (typeof target[key] === 'object') {
|
|
757
|
+
// if the source value is an object or array, convert target to array if necessary and push source value
|
|
758
|
+
if (typeof value === 'object') {
|
|
759
|
+
if (!Array.isArray(target[key]))
|
|
760
|
+
target[key] = [target[key]];
|
|
761
|
+
target[key].push(value);
|
|
762
|
+
}
|
|
763
|
+
// else, ignore the source value (it's primitive; object values take precedence)
|
|
764
|
+
}
|
|
765
|
+
// else, target value is primitive, overwrite target value
|
|
766
|
+
else {
|
|
767
|
+
target[key] = value;
|
|
768
|
+
}
|
|
769
|
+
}
|
|
262
770
|
}
|
|
771
|
+
return reduceObjectProperties(target);
|
|
263
772
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
$bf0e5f2ae2622b0c$export$f9e25e3471fd9b77(styles, result);
|
|
273
|
-
return result;
|
|
773
|
+
const _reduced = Symbol('reduced');
|
|
774
|
+
function reduceObjectProperties(obj) {
|
|
775
|
+
if (!obj || isEmpty(obj))
|
|
776
|
+
return undefined;
|
|
777
|
+
if (typeof obj !== 'object')
|
|
778
|
+
return obj;
|
|
779
|
+
if (obj?.[_reduced]) {
|
|
780
|
+
return obj;
|
|
274
781
|
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
const $css = obj[key];
|
|
280
|
-
if (Array.isArray($css)) {
|
|
281
|
-
const flat$css = (0, $6f995047b8c46148$export$bffa455ba8c619a6)($css);
|
|
282
|
-
for (const val of flat$css)$bf0e5f2ae2622b0c$export$f9e25e3471fd9b77(val, ctx);
|
|
283
|
-
} else $bf0e5f2ae2622b0c$export$f9e25e3471fd9b77($css, ctx);
|
|
284
|
-
} else {
|
|
285
|
-
let value = obj[key];
|
|
286
|
-
if ((0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(value)) {
|
|
287
|
-
value = ctx[key] || {};
|
|
288
|
-
$bf0e5f2ae2622b0c$export$f9e25e3471fd9b77(obj[key], value);
|
|
289
|
-
}
|
|
290
|
-
ctx[key] = value;
|
|
782
|
+
for (const k in obj) {
|
|
783
|
+
if (!obj[k] || typeof obj[k] !== 'object')
|
|
784
|
+
continue;
|
|
785
|
+
obj[k] = _mergeArrays(obj[k]);
|
|
291
786
|
}
|
|
787
|
+
Object.defineProperty(obj, _reduced, { value: true, enumerable: false });
|
|
788
|
+
return obj;
|
|
292
789
|
}
|
|
293
790
|
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
const
|
|
298
|
-
name:
|
|
299
|
-
type:
|
|
300
|
-
plugin
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
791
|
+
/**
|
|
792
|
+
* Removes null, undefined, and empty string values from style objects.
|
|
793
|
+
*/
|
|
794
|
+
const prepareStyles = {
|
|
795
|
+
name: 'prepareStyles',
|
|
796
|
+
type: 'preprocessStyles',
|
|
797
|
+
plugin(ctx, styles) {
|
|
798
|
+
while (Array.isArray(styles) && styles.length === 1)
|
|
799
|
+
styles = styles[0];
|
|
800
|
+
if (Array.isArray(styles) && !styles.length)
|
|
801
|
+
return null;
|
|
802
|
+
if (isPlainObject(styles) && Object.values(styles).every((v) => v === undefined))
|
|
803
|
+
return null;
|
|
804
|
+
return styles;
|
|
805
|
+
},
|
|
305
806
|
};
|
|
306
|
-
function $2244b5cf9ed91939$var$propCasingMap(key, value, object, context) {
|
|
307
|
-
if (typeof key !== "string") return;
|
|
308
|
-
const simpleKey = (0, $d4abddb46f405b94$export$2eda63d9f5a68c09)(key);
|
|
309
|
-
if (simpleKey in context.ctx.styleProps) return {
|
|
310
|
-
[context.ctx.styleProps[simpleKey]]: value
|
|
311
|
-
};
|
|
312
|
-
}
|
|
313
|
-
|
|
314
807
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
});
|
|
323
|
-
}
|
|
808
|
+
/**
|
|
809
|
+
* Fixes casing and hyphenation on known style props
|
|
810
|
+
*/
|
|
811
|
+
const propCasing = {
|
|
812
|
+
name: 'propCasing',
|
|
813
|
+
type: 'processStyles',
|
|
814
|
+
plugin(ctx, styles) {
|
|
815
|
+
return mapObject(styles, propCasingMap, { ctx });
|
|
816
|
+
},
|
|
324
817
|
};
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
const $f9ae6631426ed700$export$d9c204138d106585 = {
|
|
336
|
-
name: "themeFunctions",
|
|
337
|
-
type: "preprocessStyles",
|
|
338
|
-
plugin (ctx, styles) {
|
|
339
|
-
return (0, $1ae3b31df309d474$export$72ae87c5302f282e)(styles, $f9ae6631426ed700$var$themeFunctionsMap, {
|
|
340
|
-
ctx: ctx
|
|
341
|
-
});
|
|
818
|
+
const propCasingMap = (key, value, object, context, mapRecursive) => {
|
|
819
|
+
if (typeof key !== 'string' || key === '&')
|
|
820
|
+
return { [key]: mapRecursive(value) };
|
|
821
|
+
const simpleKey = simplifyStylePropName(key);
|
|
822
|
+
if (simpleKey && simpleKey in context.ctx.styleProps) {
|
|
823
|
+
return { [context.ctx.styleProps[simpleKey]]: mapRecursive(value) };
|
|
342
824
|
}
|
|
825
|
+
return { [key]: mapRecursive(value) };
|
|
343
826
|
};
|
|
344
|
-
function $f9ae6631426ed700$var$themeFunctionsMap(key, value, object, context) {
|
|
345
|
-
if (typeof value === "function") return {
|
|
346
|
-
[key]: value(context.ctx.theme, context.ctx)
|
|
347
|
-
};
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
function $fa892880309a8c54$export$629a2bd3f5a49ecc(value) {
|
|
355
|
-
if (!value || typeof value !== "object") return value;
|
|
356
|
-
if (Array.isArray(value)) {
|
|
357
|
-
const clone = [];
|
|
358
|
-
for(let index = 0; index < value.length; ++index)clone.push($fa892880309a8c54$export$629a2bd3f5a49ecc(value[index]));
|
|
359
|
-
return clone;
|
|
360
|
-
}
|
|
361
|
-
if ((0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(value)) {
|
|
362
|
-
const clone = {};
|
|
363
|
-
for(const key in value)clone[key] = $fa892880309a8c54$export$629a2bd3f5a49ecc(value[key]);
|
|
364
|
-
return clone;
|
|
365
|
-
}
|
|
366
|
-
return value;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
827
|
|
|
828
|
+
/**
|
|
829
|
+
* Replaces $$class with class name in string values
|
|
830
|
+
*/
|
|
831
|
+
const replace$$class = {
|
|
832
|
+
name: 'replace$$class',
|
|
833
|
+
type: 'processStyles',
|
|
834
|
+
plugin(ctx, styles) {
|
|
835
|
+
return mapObject(styles, replace$$classMap, { ctx });
|
|
836
|
+
},
|
|
837
|
+
};
|
|
838
|
+
const replace$$classMap = (key, value, object, context, mapRecursive) => {
|
|
839
|
+
value =
|
|
840
|
+
typeof value === 'string'
|
|
841
|
+
? value.replace('$$class', context.ctx.className || '')
|
|
842
|
+
: mapRecursive(value);
|
|
843
|
+
key = typeof key === 'string' ? key.replace('$$class', context.ctx.className || '') : key;
|
|
844
|
+
return { [key]: value };
|
|
845
|
+
};
|
|
370
846
|
|
|
371
|
-
function
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
847
|
+
function _customPropsProcess(styles, customProps) {
|
|
848
|
+
return mapObject(styles, (key, value, source, _ctx, mapRecursive) => {
|
|
849
|
+
if (!isValidJSXProp(key) || isPlainObject(value))
|
|
850
|
+
return Array.isArray(source) ? [mapRecursive(value)] : { [key]: mapRecursive(value) };
|
|
851
|
+
const simpleKey = simplifyStylePropName(key);
|
|
852
|
+
const propValue = customProps[simpleKey];
|
|
853
|
+
if (!propValue)
|
|
854
|
+
return { [key]: mapRecursive(value) };
|
|
855
|
+
if (typeof propValue === 'object') {
|
|
856
|
+
if (value)
|
|
857
|
+
return mapRecursive(propValue);
|
|
858
|
+
return undefined;
|
|
379
859
|
}
|
|
380
|
-
|
|
381
|
-
|
|
860
|
+
if (typeof propValue === 'string') {
|
|
861
|
+
return { [propValue]: mapRecursive(value) };
|
|
862
|
+
}
|
|
863
|
+
if (typeof propValue === 'function') {
|
|
864
|
+
return mapRecursive(propValue(value));
|
|
865
|
+
}
|
|
866
|
+
return { [key]: mapRecursive(value) };
|
|
867
|
+
});
|
|
382
868
|
}
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
for(const key in customProps)customProps[(0, $d4abddb46f405b94$export$2eda63d9f5a68c09)(key)] = customProps[key];
|
|
869
|
+
const customProps = (customProps) => {
|
|
870
|
+
for (const key in customProps) {
|
|
871
|
+
customProps[simplifyStylePropName(key)] = customProps[key];
|
|
872
|
+
}
|
|
388
873
|
return [
|
|
389
874
|
{
|
|
390
|
-
name:
|
|
391
|
-
type:
|
|
392
|
-
plugin
|
|
393
|
-
for(const key in customProps)
|
|
394
|
-
|
|
875
|
+
name: 'customPropsInit',
|
|
876
|
+
type: 'initialize',
|
|
877
|
+
plugin(ctx) {
|
|
878
|
+
for (const key in customProps) {
|
|
879
|
+
ctx.styleProps[simplifyStylePropName(key)] = key;
|
|
880
|
+
}
|
|
881
|
+
},
|
|
395
882
|
},
|
|
396
883
|
{
|
|
397
|
-
name:
|
|
398
|
-
type:
|
|
399
|
-
before:
|
|
400
|
-
plugin
|
|
401
|
-
return (
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
const propValue = customProps[simpleKey];
|
|
405
|
-
if (!propValue) return;
|
|
406
|
-
const objectClone = {
|
|
407
|
-
...object
|
|
408
|
-
};
|
|
409
|
-
const keys = Object.keys(object);
|
|
410
|
-
const afterKeys = keys.slice(keys.indexOf(key) + 1);
|
|
411
|
-
const newStyles = {};
|
|
412
|
-
if (typeof propValue === "object") {
|
|
413
|
-
if (value) Object.assign(newStyles, propValue);
|
|
414
|
-
} else if (typeof propValue === "string") newStyles[propValue] = value;
|
|
415
|
-
else if (typeof propValue === "function") Object.assign(newStyles, propValue(value));
|
|
416
|
-
delete object[key];
|
|
417
|
-
Object.assign(object, newStyles);
|
|
418
|
-
for (const k of afterKeys){
|
|
419
|
-
const val = objectClone[k];
|
|
420
|
-
delete object[k];
|
|
421
|
-
object[k] = val;
|
|
422
|
-
}
|
|
423
|
-
});
|
|
424
|
-
}
|
|
425
|
-
}
|
|
884
|
+
name: 'customPropsProcess',
|
|
885
|
+
type: 'processStyles',
|
|
886
|
+
before: mergeArrays,
|
|
887
|
+
plugin(_ctx, styles) {
|
|
888
|
+
return _customPropsProcess(styles, customProps);
|
|
889
|
+
},
|
|
890
|
+
},
|
|
426
891
|
];
|
|
427
892
|
};
|
|
428
893
|
|
|
429
|
-
|
|
430
|
-
function $cb46c37cd304d3d0$export$dd20d84ec8823bbf(type, styles, hash, context) {
|
|
894
|
+
function applyPlugins(type, styles, className, context) {
|
|
431
895
|
const pluginContext = {
|
|
432
896
|
id: context.id,
|
|
433
897
|
devMode: context.devMode,
|
|
434
|
-
theme: context.theme,
|
|
435
898
|
media: context.media,
|
|
436
899
|
stylesheet: context.stylesheet,
|
|
437
900
|
styleElement: context.styleElement,
|
|
438
901
|
styleProps: context.styleProps,
|
|
439
|
-
|
|
902
|
+
className,
|
|
440
903
|
};
|
|
441
|
-
let processedStyles = styles;
|
|
442
|
-
for(const i in context.plugins){
|
|
904
|
+
let processedStyles = styles || {};
|
|
905
|
+
for (const i in context.plugins) {
|
|
443
906
|
const plugin = context.plugins[i];
|
|
444
|
-
if (plugin.type === type)
|
|
907
|
+
if (plugin.type === type)
|
|
908
|
+
processedStyles = plugin.plugin(pluginContext, processedStyles);
|
|
445
909
|
}
|
|
446
910
|
return processedStyles;
|
|
447
911
|
}
|
|
448
|
-
const
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
propCasing
|
|
453
|
-
|
|
454
|
-
replace$$class
|
|
455
|
-
defaultPixelUnits
|
|
456
|
-
cleanStyles
|
|
457
|
-
|
|
458
|
-
|
|
912
|
+
const defaultPlugins = [
|
|
913
|
+
prepareStyles,
|
|
914
|
+
mediaObjects,
|
|
915
|
+
mergeArrays,
|
|
916
|
+
propCasing,
|
|
917
|
+
hoistKeyframes,
|
|
918
|
+
replace$$class,
|
|
919
|
+
defaultPixelUnits,
|
|
920
|
+
cleanStyles,
|
|
921
|
+
];
|
|
459
922
|
|
|
923
|
+
function StyleElement(props) {
|
|
924
|
+
const { styles, ...other } = props;
|
|
925
|
+
return (jsx("style", { type: "text/css", ...other, dangerouslySetInnerHTML: { __html: styles.join('\n') } }));
|
|
926
|
+
}
|
|
460
927
|
|
|
461
|
-
const
|
|
462
|
-
function
|
|
928
|
+
const styleCollectorContext = createContext(undefined);
|
|
929
|
+
function createStyleCollector() {
|
|
463
930
|
const styles = [];
|
|
464
931
|
const collector = {
|
|
465
|
-
collect: (element)
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
render: (props)=>/*#__PURE__*/ (0, ($parcel$interopDefault($cPdmE$react))).createElement("style", {
|
|
469
|
-
type: "text/css",
|
|
470
|
-
key: props.id || "stylix",
|
|
471
|
-
...props,
|
|
472
|
-
dangerouslySetInnerHTML: {
|
|
473
|
-
__html: collector.styles.join(" ")
|
|
474
|
-
}
|
|
475
|
-
}),
|
|
476
|
-
styles: styles
|
|
932
|
+
collect: (element) => (jsx(styleCollectorContext.Provider, { value: styles, children: element })),
|
|
933
|
+
render: (props) => (jsx(StyleElement, { styles: collector.styles }, props.id || 'stylix')),
|
|
934
|
+
styles,
|
|
477
935
|
};
|
|
478
|
-
collector.render.displayName =
|
|
936
|
+
collector.render.displayName = 'StylixStyleCollectorRenderer';
|
|
479
937
|
return collector;
|
|
480
938
|
}
|
|
481
939
|
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
if (!items.every((item)=>Array.isArray(item) || (0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(item))) {
|
|
491
|
-
items.reverse();
|
|
492
|
-
return items.find((item)=>Array.isArray(item) || (0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(item)) || items.find((item)=>typeof item !== "undefined");
|
|
493
|
-
}
|
|
494
|
-
const merged = Array.isArray(items[0]) ? [] : {};
|
|
495
|
-
for (const item of items){
|
|
496
|
-
if (!Array.isArray(item) && !(0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(item)) return merged;
|
|
497
|
-
const keys = [
|
|
498
|
-
...Object.keys(item),
|
|
499
|
-
...Object.getOwnPropertySymbols(item)
|
|
500
|
-
];
|
|
501
|
-
for (const key of keys){
|
|
502
|
-
const result = $69d6532a08c5f203$export$4950aa0f605343fb(merged[key], item[key]);
|
|
503
|
-
if (typeof result !== "undefined") merged[key] = result;
|
|
504
|
-
}
|
|
940
|
+
const detectSSR = () => !(typeof window !== 'undefined' && window.document?.head?.appendChild);
|
|
941
|
+
function useIsoLayoutEffect(fn, deps, runOnSsr, isSsr = detectSSR()) {
|
|
942
|
+
if (isSsr) {
|
|
943
|
+
if (runOnSsr)
|
|
944
|
+
return fn();
|
|
945
|
+
}
|
|
946
|
+
else {
|
|
947
|
+
useLayoutEffect(fn, deps);
|
|
505
948
|
}
|
|
506
|
-
return merged;
|
|
507
949
|
}
|
|
508
950
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
function $918367b4cbc7189f$var$createStylixContext(userValues = {}) {
|
|
951
|
+
let defaultStyleProps = undefined;
|
|
952
|
+
function createStylixContext(userValues = {}) {
|
|
953
|
+
if (!defaultStyleProps) {
|
|
954
|
+
defaultStyleProps = {};
|
|
955
|
+
for (const value of cssProps) {
|
|
956
|
+
defaultStyleProps[simplifyStylePropName(value)] = value;
|
|
957
|
+
}
|
|
958
|
+
}
|
|
518
959
|
const ctx = {
|
|
519
|
-
id: userValues.id ||
|
|
520
|
-
devMode: userValues.devMode,
|
|
521
|
-
styleProps:
|
|
522
|
-
|
|
523
|
-
media: userValues.media || null,
|
|
960
|
+
id: userValues.id || '$default',
|
|
961
|
+
devMode: !!userValues.devMode,
|
|
962
|
+
styleProps: defaultStyleProps,
|
|
963
|
+
media: userValues.media,
|
|
524
964
|
styleElement: userValues.styleElement,
|
|
525
|
-
plugins:
|
|
965
|
+
plugins: defaultPlugins.flat(),
|
|
966
|
+
styleCounter: 0,
|
|
526
967
|
rules: {},
|
|
527
|
-
|
|
968
|
+
ssr: userValues.ssr ?? detectSSR(),
|
|
969
|
+
cleanupRequest: undefined,
|
|
970
|
+
requestApply: false,
|
|
971
|
+
classifyProps(props) {
|
|
972
|
+
const [styles, other] = classifyProps(props, this.styleProps);
|
|
973
|
+
return [styles, other];
|
|
974
|
+
},
|
|
528
975
|
};
|
|
529
|
-
if (!ctx.styleElement && typeof document !== "undefined") {
|
|
530
|
-
if (!ctx.devMode && "adoptedStyleSheets" in document) {
|
|
531
|
-
ctx.stylesheet = new CSSStyleSheet();
|
|
532
|
-
document.adoptedStyleSheets.push(ctx.stylesheet);
|
|
533
|
-
} else {
|
|
534
|
-
// Legacy/devMode method
|
|
535
|
-
// TS assumes window.document is 'never', so we need to explicitly cast it to Document
|
|
536
|
-
const doc = document;
|
|
537
|
-
ctx.styleElement = doc.createElement("style");
|
|
538
|
-
ctx.styleElement.className = "stylix";
|
|
539
|
-
if (ctx.id) ctx.styleElement.id = "stylix-" + ctx.id;
|
|
540
|
-
doc.head.appendChild(ctx.styleElement);
|
|
541
|
-
}
|
|
542
|
-
}
|
|
543
|
-
if (ctx.styleElement) ctx.stylesheet = ctx.styleElement.sheet;
|
|
544
976
|
if (userValues.plugins?.length) {
|
|
545
|
-
const flatPlugins =
|
|
546
|
-
for(const i in flatPlugins){
|
|
977
|
+
const flatPlugins = userValues.plugins.flat();
|
|
978
|
+
for (const i in flatPlugins) {
|
|
547
979
|
const plugin = flatPlugins[i];
|
|
548
980
|
let pluginIndex = -1;
|
|
549
|
-
if (plugin.before && ctx.plugins.includes(plugin.before))
|
|
550
|
-
|
|
551
|
-
if (plugin.
|
|
552
|
-
|
|
553
|
-
else
|
|
981
|
+
if (plugin.before && ctx.plugins.includes(plugin.before))
|
|
982
|
+
pluginIndex = ctx.plugins.indexOf(plugin.before);
|
|
983
|
+
else if (plugin.after && ctx.plugins.includes(plugin.after))
|
|
984
|
+
pluginIndex = ctx.plugins.indexOf(plugin.after) + 1;
|
|
985
|
+
else if (plugin.atIndex !== undefined)
|
|
986
|
+
pluginIndex = plugin.atIndex;
|
|
987
|
+
if (pluginIndex === -1)
|
|
988
|
+
ctx.plugins.push(plugin);
|
|
989
|
+
else
|
|
990
|
+
ctx.plugins.splice(pluginIndex, 0, plugin);
|
|
554
991
|
}
|
|
555
992
|
}
|
|
556
|
-
(
|
|
993
|
+
applyPlugins('initialize', null, null, ctx);
|
|
557
994
|
return ctx;
|
|
558
995
|
}
|
|
559
996
|
// The React context object
|
|
560
|
-
const
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
devMode: devMode,
|
|
572
|
-
plugins: plugins,
|
|
573
|
-
styleElement: styleElement
|
|
574
|
-
});
|
|
575
|
-
ctx.current.styleCollector = (0, $cPdmE$react.useContext)((0, $0c5ff6b44ea9986a$export$9b609b8e22cde6fe));
|
|
576
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($cPdmE$react))).createElement($918367b4cbc7189f$var$stylixContext.Provider, {
|
|
577
|
-
value: ctx.current
|
|
578
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($cPdmE$react))).createElement($918367b4cbc7189f$export$91c80431af53fbc7, themeProps, children));
|
|
579
|
-
}
|
|
580
|
-
function $918367b4cbc7189f$var$mergeContexts(contextA, contextB) {
|
|
581
|
-
const obj = {
|
|
582
|
-
...contextA
|
|
583
|
-
};
|
|
584
|
-
const themeB = contextB.theme;
|
|
585
|
-
if (contextB) for(const key in contextB){
|
|
586
|
-
const value = contextB[key];
|
|
587
|
-
if (typeof value !== "undefined") obj[key] = value;
|
|
997
|
+
const stylixContext = createContext(undefined);
|
|
998
|
+
let defaultStylixContext = undefined;
|
|
999
|
+
/**
|
|
1000
|
+
* Gets the current Stylix context.
|
|
1001
|
+
*/
|
|
1002
|
+
function useStylixContext() {
|
|
1003
|
+
const ctx = useContext(stylixContext);
|
|
1004
|
+
if (!ctx) {
|
|
1005
|
+
if (!defaultStylixContext)
|
|
1006
|
+
defaultStylixContext = createStylixContext();
|
|
1007
|
+
return defaultStylixContext;
|
|
588
1008
|
}
|
|
589
|
-
|
|
590
|
-
return obj;
|
|
1009
|
+
return ctx;
|
|
591
1010
|
}
|
|
592
|
-
function
|
|
593
|
-
const
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
theme: theme
|
|
605
|
-
}));
|
|
606
|
-
}, [
|
|
607
|
-
parentCtx,
|
|
608
|
-
media?.join("|") || "",
|
|
609
|
-
theme
|
|
610
|
-
], false);
|
|
611
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($cPdmE$react))).createElement($918367b4cbc7189f$var$stylixContext.Provider, {
|
|
612
|
-
value: contextValue
|
|
613
|
-
}, children);
|
|
1011
|
+
function StylixProvider({ id, devMode, plugins, media, styleElement, children, ssr, }) {
|
|
1012
|
+
const ctx = useRef(null);
|
|
1013
|
+
if (!ctx.current)
|
|
1014
|
+
ctx.current = createStylixContext({ id, devMode, plugins, media, styleElement, ssr });
|
|
1015
|
+
ctx.current.styleCollector = useContext(styleCollectorContext);
|
|
1016
|
+
// When the component is unmounted, remove the style element, if any
|
|
1017
|
+
useEffect(() => {
|
|
1018
|
+
return () => {
|
|
1019
|
+
ctx.current?.styleElement?.remove();
|
|
1020
|
+
};
|
|
1021
|
+
}, []);
|
|
1022
|
+
return jsx(stylixContext.Provider, { value: ctx.current, children: children });
|
|
614
1023
|
}
|
|
615
1024
|
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
1025
|
+
function flattenRules(ctx) {
|
|
1026
|
+
return Object.values(ctx.rules)
|
|
1027
|
+
.flatMap((val) => (val && val.refs > 0 ? val.rules : []))
|
|
1028
|
+
.filter(Boolean);
|
|
1029
|
+
}
|
|
1030
|
+
/**
|
|
1031
|
+
* Applies rules from given StylixContext to the <style> element.
|
|
1032
|
+
*/
|
|
1033
|
+
function applyRules(ctx) {
|
|
624
1034
|
if (ctx.styleCollector) {
|
|
1035
|
+
const flattenedRules = flattenRules(ctx);
|
|
625
1036
|
ctx.styleCollector.length = 0;
|
|
626
1037
|
ctx.styleCollector.push(...flattenedRules);
|
|
627
1038
|
return;
|
|
628
1039
|
}
|
|
629
|
-
if (ctx.
|
|
1040
|
+
if (ctx.ssr)
|
|
1041
|
+
return;
|
|
1042
|
+
const supportsAdoptedStylesheets = 'adoptedStyleSheets' in document;
|
|
1043
|
+
// If there's no style element, and we're in dev mode or legacy browser, create one
|
|
1044
|
+
if (!ctx.styleElement && (ctx.devMode || !supportsAdoptedStylesheets)) {
|
|
1045
|
+
ctx.styleElement = document.createElement('style');
|
|
1046
|
+
ctx.styleElement.className = 'stylix';
|
|
1047
|
+
if (ctx.id)
|
|
1048
|
+
ctx.styleElement.id = `stylix-${ctx.id}`;
|
|
1049
|
+
document.head.appendChild(ctx.styleElement);
|
|
1050
|
+
}
|
|
1051
|
+
if (ctx.devMode && ctx.styleElement) {
|
|
1052
|
+
const flattenedRules = flattenRules(ctx);
|
|
1053
|
+
ctx.styleElement.innerHTML = flattenedRules.join('\n');
|
|
1054
|
+
}
|
|
630
1055
|
else {
|
|
1056
|
+
// If there's a style element, use its stylesheet
|
|
1057
|
+
if (ctx.styleElement)
|
|
1058
|
+
ctx.stylesheet = ctx.styleElement.sheet;
|
|
1059
|
+
// Still no stylesheet yet, create one
|
|
1060
|
+
if (!ctx.stylesheet) {
|
|
1061
|
+
ctx.stylesheet = new CSSStyleSheet();
|
|
1062
|
+
if (supportsAdoptedStylesheets) {
|
|
1063
|
+
document.adoptedStyleSheets.push(ctx.stylesheet);
|
|
1064
|
+
}
|
|
1065
|
+
else if (ctx.stylesheet.ownerNode) {
|
|
1066
|
+
document.head.appendChild(ctx.stylesheet.ownerNode);
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
631
1069
|
const stylesheet = ctx.stylesheet;
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
1070
|
+
const flattenedRules = flattenRules(ctx);
|
|
1071
|
+
if (stylesheet.replaceSync) {
|
|
1072
|
+
try {
|
|
1073
|
+
stylesheet.replaceSync(flattenedRules.join('\n'));
|
|
1074
|
+
}
|
|
1075
|
+
catch (e) {
|
|
1076
|
+
// Errors are ignored, this just means that a browser doesn't support a certain CSS feature.
|
|
1077
|
+
console.warn(e);
|
|
1078
|
+
}
|
|
637
1079
|
}
|
|
638
1080
|
else {
|
|
639
1081
|
// Legacy method
|
|
640
|
-
while(stylesheet.rules
|
|
641
|
-
|
|
642
|
-
stylesheet.insertRule(flattenedRules[i], +i);
|
|
643
|
-
} catch (e) {
|
|
644
|
-
// Errors are ignored, this just means that a browser doesn't support a certain CSS feature.
|
|
645
|
-
console.warn(e);
|
|
1082
|
+
while (stylesheet.rules?.length || stylesheet.cssRules?.length) {
|
|
1083
|
+
stylesheet.deleteRule(0);
|
|
646
1084
|
}
|
|
1085
|
+
for (const i in flattenedRules)
|
|
1086
|
+
try {
|
|
1087
|
+
stylesheet.insertRule(flattenedRules[i], +i);
|
|
1088
|
+
}
|
|
1089
|
+
catch (e) {
|
|
1090
|
+
// Errors are ignored, this just means that a browser doesn't support a certain CSS feature.
|
|
1091
|
+
console.warn(e);
|
|
1092
|
+
}
|
|
647
1093
|
}
|
|
648
1094
|
}
|
|
649
1095
|
}
|
|
650
1096
|
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
1097
|
+
function getParentComponentName() {
|
|
1098
|
+
const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
1099
|
+
const stack = internals?.ReactDebugCurrentFrame?.getStackAddendum?.()?.split('\n') || [];
|
|
1100
|
+
for (const line of stack) {
|
|
655
1101
|
// Look for a component name like "Component$123", either at the start of the line (Firefox) or after "at " (Safari/Chrome)
|
|
656
|
-
const m = line.match(/^(
|
|
657
|
-
|
|
658
|
-
|
|
1102
|
+
const m = line.trim().match(/^(?:at )?([A-Z][A-Za-z0-9$\.]*)/);
|
|
1103
|
+
const res = m?.[1] && m[1] !== 'Stylix' ? m[1] : undefined;
|
|
1104
|
+
if (res)
|
|
1105
|
+
return res;
|
|
1106
|
+
}
|
|
659
1107
|
}
|
|
660
1108
|
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
1109
|
+
/**
|
|
1110
|
+
* Serialize selector and styles to css rule string
|
|
1111
|
+
*/
|
|
1112
|
+
function serialize(selector, styles) {
|
|
1113
|
+
const lines = [];
|
|
1114
|
+
for (const key in styles) {
|
|
1115
|
+
const value = styles[key];
|
|
1116
|
+
if (isPlainObject(value))
|
|
1117
|
+
lines.push(serialize(key, value));
|
|
1118
|
+
else
|
|
1119
|
+
lines.push(` ${key}: ${value};`);
|
|
1120
|
+
}
|
|
1121
|
+
return `${selector} {\n${lines.join('\n')} }`;
|
|
1122
|
+
}
|
|
1123
|
+
/**
|
|
1124
|
+
* Converts a Stylix CSS object to an array of rules, suitable for passing to StyleSheet#insertRule.
|
|
1125
|
+
*/
|
|
1126
|
+
function stylesToRuleArray(styles, className, context) {
|
|
1127
|
+
if (isEmpty(styles))
|
|
1128
|
+
return [];
|
|
666
1129
|
try {
|
|
667
|
-
const processedStyles = (
|
|
668
|
-
// serialize to css rules array
|
|
669
|
-
const serialize = function serialize(selector, styles) {
|
|
670
|
-
const lines = [];
|
|
671
|
-
for(const key in styles){
|
|
672
|
-
const value = styles[key];
|
|
673
|
-
if ((0, $36e7f66f12914cd9$export$53b83ca8eaab0383)(value)) lines.push(serialize(key, value));
|
|
674
|
-
else lines.push(` ${key}: ${value};`);
|
|
675
|
-
}
|
|
676
|
-
return `${selector} {\n${lines.join("\n")} }`;
|
|
677
|
-
};
|
|
1130
|
+
const processedStyles = applyPlugins('processStyles', styles, className, context);
|
|
678
1131
|
const result = [];
|
|
679
|
-
for(const key in processedStyles){
|
|
1132
|
+
for (const key in processedStyles) {
|
|
680
1133
|
const value = processedStyles[key];
|
|
681
1134
|
result.push(serialize(key, value));
|
|
682
1135
|
}
|
|
683
1136
|
return result;
|
|
684
|
-
}
|
|
685
|
-
|
|
686
|
-
|
|
1137
|
+
}
|
|
1138
|
+
catch (e) {
|
|
1139
|
+
if (e.name && e.reason) {
|
|
1140
|
+
console.error(`${e.name}: ${e.reason}\n`, `${e.source.replace('\n', ' ').substring(Math.max(0, e.column - 20), Math.max(0, e.column - 20) + 100)}\n`, `${' '.repeat(20)}^`);
|
|
1141
|
+
}
|
|
1142
|
+
else {
|
|
1143
|
+
console.error(e);
|
|
1144
|
+
}
|
|
687
1145
|
return [];
|
|
688
1146
|
}
|
|
689
1147
|
}
|
|
690
1148
|
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
let hash = 5381;
|
|
697
|
-
let i = str.length;
|
|
698
|
-
while(i)hash = hash * 33 ^ str.charCodeAt(--i);
|
|
699
|
-
return "stylix-" + (hash >>> 0).toString(36);
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
function $b7bb7699b24ef4bd$var$cleanup(ctx) {
|
|
705
|
-
if (typeof ctx.cleanupRequest !== "undefined") return;
|
|
706
|
-
ctx.cleanupRequest = setTimeout(()=>{
|
|
707
|
-
let deleted = false;
|
|
708
|
-
for(const i in ctx.rules){
|
|
1149
|
+
function cleanup(ctx) {
|
|
1150
|
+
if (typeof ctx.cleanupRequest !== 'undefined')
|
|
1151
|
+
return;
|
|
1152
|
+
const doCleanup = () => {
|
|
1153
|
+
for (const i in ctx.rules) {
|
|
709
1154
|
const rule = ctx.rules[i];
|
|
710
|
-
if (!rule.refs) {
|
|
711
|
-
delete ctx.rules[
|
|
712
|
-
deleted = true;
|
|
1155
|
+
if (!rule || rule.refs <= 0) {
|
|
1156
|
+
delete ctx.rules[i];
|
|
713
1157
|
}
|
|
714
1158
|
}
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
if (typeof a === "object") {
|
|
723
|
-
if (Array.isArray(a) && Array.isArray(b) && a.length !== b.length) return false;
|
|
724
|
-
else if (Object.keys(a).length !== Object.keys(b).length) return false;
|
|
725
|
-
for(const key in b){
|
|
726
|
-
if (!$b7bb7699b24ef4bd$var$compare(a[key], b[key])) return false;
|
|
727
|
-
}
|
|
1159
|
+
ctx.cleanupRequest = undefined;
|
|
1160
|
+
};
|
|
1161
|
+
if (ctx.devMode) {
|
|
1162
|
+
doCleanup();
|
|
1163
|
+
}
|
|
1164
|
+
else {
|
|
1165
|
+
ctx.cleanupRequest = setTimeout(doCleanup, 100);
|
|
728
1166
|
}
|
|
729
|
-
return a === b;
|
|
730
1167
|
}
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
1168
|
+
/**
|
|
1169
|
+
* Accepts a Stylix CSS object and returns a unique className.
|
|
1170
|
+
* The styles are registered with the Stylix context and will be applied to the document.
|
|
1171
|
+
* If `global` is false, provided styles will be nested within the generated classname.
|
|
1172
|
+
* Returns the className if enabled, or an empty string.
|
|
1173
|
+
*/
|
|
1174
|
+
function useStyles(styles, options = { global: false }) {
|
|
1175
|
+
const stylixCtx = useStylixContext();
|
|
1176
|
+
const prevStylesJson = useRef('');
|
|
1177
|
+
// Preprocess styles with plugins
|
|
1178
|
+
if (styles && !isEmpty(styles))
|
|
1179
|
+
styles = applyPlugins('preprocessStyles', styles, null, stylixCtx);
|
|
1180
|
+
let stylesJson = styles && !isEmpty(styles) ? JSON.stringify(styles) : '';
|
|
1181
|
+
if (stylesJson && options.global)
|
|
1182
|
+
stylesJson = `global:${stylesJson}`;
|
|
1183
|
+
const changed = stylesJson !== prevStylesJson.current;
|
|
1184
|
+
prevStylesJson.current = stylesJson;
|
|
1185
|
+
options.debugLabel ||= stylixCtx.devMode ? getParentComponentName() : '';
|
|
1186
|
+
if (stylesJson && !stylixCtx.rules[stylesJson]) {
|
|
1187
|
+
stylixCtx.styleCounter++;
|
|
1188
|
+
const className = `stylix-${(stylixCtx.styleCounter).toString(36)}${options.debugLabel ? `-${options.debugLabel}` : ''}`;
|
|
752
1189
|
// If not global styles, wrap original styles with classname
|
|
753
|
-
if (!options.global)
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
refs: 1
|
|
1190
|
+
if (!options.global)
|
|
1191
|
+
styles = { [`.${className}`]: styles };
|
|
1192
|
+
stylixCtx.rules[stylesJson] = {
|
|
1193
|
+
className,
|
|
1194
|
+
rules: stylesToRuleArray(styles, className, stylixCtx),
|
|
1195
|
+
refs: 0,
|
|
760
1196
|
};
|
|
1197
|
+
}
|
|
1198
|
+
if (changed)
|
|
761
1199
|
stylixCtx.requestApply = true;
|
|
1200
|
+
// When json changes, add/remove ref count
|
|
1201
|
+
const ruleSet = stylixCtx.rules[stylesJson];
|
|
1202
|
+
if (stylesJson && changed && ruleSet) {
|
|
1203
|
+
ruleSet.refs++;
|
|
762
1204
|
}
|
|
763
1205
|
// Apply styles if requested.
|
|
764
1206
|
// This runs on every render. We utilize useLayoutEffect so that it runs *after* all the other
|
|
765
1207
|
// renders have completed. stylixCtx.requestApply guards against multiple runs. This reduces the number of calls
|
|
766
1208
|
// to applyRules(), but prevents styles potentially being added to the DOM after other components force the
|
|
767
1209
|
// browser to compute styles.
|
|
768
|
-
(
|
|
769
|
-
if (!stylixCtx.requestApply)
|
|
1210
|
+
useIsoLayoutEffect(() => {
|
|
1211
|
+
if (!stylixCtx.requestApply)
|
|
1212
|
+
return;
|
|
770
1213
|
stylixCtx.requestApply = false;
|
|
771
|
-
(
|
|
772
|
-
}, undefined, true);
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
1214
|
+
applyRules(stylixCtx);
|
|
1215
|
+
}, undefined, true, stylixCtx.ssr);
|
|
1216
|
+
useIsoLayoutEffect(() => {
|
|
1217
|
+
if (!stylesJson || !changed)
|
|
1218
|
+
return;
|
|
1219
|
+
return () => {
|
|
1220
|
+
const ruleSet = stylixCtx.rules[stylesJson];
|
|
1221
|
+
if (!ruleSet)
|
|
1222
|
+
return;
|
|
1223
|
+
ruleSet.refs--;
|
|
1224
|
+
if (ruleSet.refs <= 0)
|
|
1225
|
+
stylixCtx.rules[stylesJson] = undefined;
|
|
1226
|
+
cleanup(stylixCtx);
|
|
780
1227
|
};
|
|
781
|
-
}, [
|
|
782
|
-
|
|
783
|
-
], false);
|
|
784
|
-
return hash;
|
|
785
|
-
}
|
|
786
|
-
function $b7bb7699b24ef4bd$export$f3922bb611b91373(keyframes, options = {
|
|
787
|
-
disabled: false
|
|
788
|
-
}) {
|
|
789
|
-
return $b7bb7699b24ef4bd$export$28e6b9b82ee883c({
|
|
790
|
-
"@keyframes $$class": keyframes
|
|
791
|
-
}, {
|
|
792
|
-
global: true,
|
|
793
|
-
...options
|
|
794
|
-
});
|
|
1228
|
+
}, [stylesJson], false, stylixCtx.ssr);
|
|
1229
|
+
return stylixCtx.rules[stylesJson]?.className || '';
|
|
795
1230
|
}
|
|
796
|
-
function
|
|
797
|
-
|
|
798
|
-
}
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
global: true
|
|
802
|
-
});
|
|
1231
|
+
function useKeyframes(keyframes) {
|
|
1232
|
+
return useStyles({ '@keyframes $$class': keyframes }, { global: true });
|
|
1233
|
+
}
|
|
1234
|
+
function useGlobalStyles(styles, options = { disabled: false }) {
|
|
1235
|
+
return useStyles(styles, { ...options, global: true });
|
|
803
1236
|
}
|
|
804
1237
|
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
const
|
|
818
|
-
|
|
819
|
-
const [styleProps, otherProps] = (0, $d4abddb46f405b94$export$54b296e95917282f)(rest, ctx.styleProps);
|
|
820
|
-
if ($css) styleProps.$css = $css;
|
|
821
|
-
const hash = (0, $b7bb7699b24ef4bd$export$28e6b9b82ee883c)(styleProps, {
|
|
822
|
-
disabled: $disabled
|
|
823
|
-
});
|
|
824
|
-
const allProps = {
|
|
825
|
-
className: `${hash} ${className || ""}`.trim(),
|
|
826
|
-
ref: ref,
|
|
827
|
-
...otherProps
|
|
828
|
-
};
|
|
829
|
-
if (/*#__PURE__*/ (0, ($parcel$interopDefault($cPdmE$react))).isValidElement($el)) {
|
|
1238
|
+
function _Stylix(props, ref) {
|
|
1239
|
+
const { $el, $render, $css, className: outerClassName, children, ...rest } = props;
|
|
1240
|
+
const ctx = useStylixContext();
|
|
1241
|
+
const [styleProps, otherProps] = ctx.classifyProps(rest);
|
|
1242
|
+
let styles = [];
|
|
1243
|
+
if (!isEmpty(styleProps))
|
|
1244
|
+
styles.push(styleProps);
|
|
1245
|
+
if (!isEmpty($css))
|
|
1246
|
+
styles.push($css);
|
|
1247
|
+
if (styles.length === 1)
|
|
1248
|
+
styles = styles[0];
|
|
1249
|
+
const stylixClassName = useStyles(styles);
|
|
1250
|
+
const className = `${stylixClassName} ${outerClassName || ''}`.trim() || undefined;
|
|
1251
|
+
if (React.isValidElement($el)) {
|
|
830
1252
|
const $elProps = {
|
|
831
1253
|
...$el.props,
|
|
1254
|
+
ref,
|
|
832
1255
|
/**
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
1256
|
+
* `allProps` must override `$el.props` because the latter may contain default prop values provided by defaultProps.
|
|
1257
|
+
* The expectation is that for <$ $el={<SomeComponent />} someComponentProp="my value" />,
|
|
1258
|
+
* the `someComponentProp` prop would override any default value specified by SomeComponent.defaultProps.
|
|
1259
|
+
*/
|
|
1260
|
+
...otherProps,
|
|
1261
|
+
className: `${$el.props.className || ''} ${className || ''}`.trim() || undefined,
|
|
838
1262
|
};
|
|
839
|
-
return
|
|
1263
|
+
return React.cloneElement($el, $elProps, ...(React.Children.toArray(children) || []));
|
|
840
1264
|
}
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
$
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
const r = /*#__PURE__*/ (0, ($parcel$interopDefault($cPdmE$react))).forwardRef((props, ref)=>{
|
|
852
|
-
if (conflictingPropMapping) for(const k in conflictingPropMapping){
|
|
853
|
-
props[conflictingPropMapping[k]] = props[k];
|
|
854
|
-
delete props[k];
|
|
1265
|
+
if ($el) {
|
|
1266
|
+
const Component = $el;
|
|
1267
|
+
return (jsx(Component, { className: className, ref: ref, ...otherProps, children: children }));
|
|
1268
|
+
}
|
|
1269
|
+
if ($render) {
|
|
1270
|
+
return $render(className || undefined, { children, ...otherProps, ...(ref ? { ref } : null) });
|
|
1271
|
+
}
|
|
1272
|
+
if (children) {
|
|
1273
|
+
if (typeof children !== 'function') {
|
|
1274
|
+
throw new Error('Stylix: invalid component usage: children must be a function');
|
|
855
1275
|
}
|
|
856
|
-
return (
|
|
857
|
-
|
|
858
|
-
...
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
addProps?.$css,
|
|
863
|
-
props?.$css
|
|
864
|
-
].filter(Boolean)
|
|
865
|
-
} : {}
|
|
866
|
-
}, ref);
|
|
867
|
-
});
|
|
868
|
-
r.displayName = `$.${$el.displayName || $el.name || $el.toString?.() || "Unnamed"}`;
|
|
869
|
-
r.__isStylix = true;
|
|
870
|
-
return r;
|
|
1276
|
+
return children(className || undefined, {
|
|
1277
|
+
...otherProps,
|
|
1278
|
+
...(ref ? { ref } : null),
|
|
1279
|
+
});
|
|
1280
|
+
}
|
|
1281
|
+
throw new Error('Stylix: invalid stylix component usage: must provide $el, $render, or children');
|
|
871
1282
|
}
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
1283
|
+
const Stylix = React.forwardRef(_Stylix);
|
|
1284
|
+
Stylix.displayName = 'Stylix';
|
|
1285
|
+
Stylix.__isStylix = true;
|
|
1286
|
+
|
|
1287
|
+
const htmlTags = [
|
|
1288
|
+
'a',
|
|
1289
|
+
'abbr',
|
|
1290
|
+
'address',
|
|
1291
|
+
'area',
|
|
1292
|
+
'article',
|
|
1293
|
+
'aside',
|
|
1294
|
+
'audio',
|
|
1295
|
+
'b',
|
|
1296
|
+
'bdi',
|
|
1297
|
+
'bdo',
|
|
1298
|
+
'blockquote',
|
|
1299
|
+
'body',
|
|
1300
|
+
'br',
|
|
1301
|
+
'button',
|
|
1302
|
+
'canvas',
|
|
1303
|
+
'caption',
|
|
1304
|
+
'cite',
|
|
1305
|
+
'code',
|
|
1306
|
+
'col',
|
|
1307
|
+
'colgroup',
|
|
1308
|
+
'data',
|
|
1309
|
+
'dd',
|
|
1310
|
+
'del',
|
|
1311
|
+
'details',
|
|
1312
|
+
'dfn',
|
|
1313
|
+
'dialog',
|
|
1314
|
+
'div',
|
|
1315
|
+
'dl',
|
|
1316
|
+
'dt',
|
|
1317
|
+
'em',
|
|
1318
|
+
'embed',
|
|
1319
|
+
'fieldset',
|
|
1320
|
+
'figcaption',
|
|
1321
|
+
'figure',
|
|
1322
|
+
'footer',
|
|
1323
|
+
'form',
|
|
1324
|
+
'h1',
|
|
1325
|
+
'h2',
|
|
1326
|
+
'h3',
|
|
1327
|
+
'h4',
|
|
1328
|
+
'h5',
|
|
1329
|
+
'h6',
|
|
1330
|
+
'header',
|
|
1331
|
+
'hgroup',
|
|
1332
|
+
'hr',
|
|
1333
|
+
'html',
|
|
1334
|
+
'i',
|
|
1335
|
+
'iframe',
|
|
1336
|
+
'img',
|
|
1337
|
+
'input',
|
|
1338
|
+
'ins',
|
|
1339
|
+
'kbd',
|
|
1340
|
+
'label',
|
|
1341
|
+
'legend',
|
|
1342
|
+
'li',
|
|
1343
|
+
'main',
|
|
1344
|
+
'map',
|
|
1345
|
+
'mark',
|
|
1346
|
+
'menu',
|
|
1347
|
+
'menuitem',
|
|
1348
|
+
'meter',
|
|
1349
|
+
'nav',
|
|
1350
|
+
'noscript',
|
|
1351
|
+
'object',
|
|
1352
|
+
'ol',
|
|
1353
|
+
'optgroup',
|
|
1354
|
+
'option',
|
|
1355
|
+
'output',
|
|
1356
|
+
'p',
|
|
1357
|
+
'picture',
|
|
1358
|
+
'pre',
|
|
1359
|
+
'progress',
|
|
1360
|
+
'q',
|
|
1361
|
+
'rt',
|
|
1362
|
+
'ruby',
|
|
1363
|
+
's',
|
|
1364
|
+
'samp',
|
|
1365
|
+
'section',
|
|
1366
|
+
'select',
|
|
1367
|
+
'slot',
|
|
1368
|
+
'small',
|
|
1369
|
+
'source',
|
|
1370
|
+
'span',
|
|
1371
|
+
'strong',
|
|
1372
|
+
'sub',
|
|
1373
|
+
'summary',
|
|
1374
|
+
'sup',
|
|
1375
|
+
'svg',
|
|
1376
|
+
'table',
|
|
1377
|
+
'tbody',
|
|
1378
|
+
'td',
|
|
1379
|
+
'textarea',
|
|
1380
|
+
'tfoot',
|
|
1381
|
+
'th',
|
|
1382
|
+
'thead',
|
|
1383
|
+
'time',
|
|
1384
|
+
'tr',
|
|
1385
|
+
'track',
|
|
1386
|
+
'u',
|
|
1387
|
+
'ul',
|
|
1388
|
+
'var',
|
|
1389
|
+
'video',
|
|
1390
|
+
];
|
|
1391
|
+
for (const i in htmlTags) {
|
|
1392
|
+
const Tag = htmlTags[i];
|
|
1393
|
+
Stylix[Tag] = React.forwardRef(({ htmlContent, htmlTranslate, ...props }, ref) => (jsx(Stylix, { "$render": (className, props) => (jsx(Tag, { className: className, content: htmlContent, translate: htmlTranslate, ref: ref, ...props })), ...props })));
|
|
1394
|
+
Stylix[Tag].__isStylix = true;
|
|
1395
|
+
Stylix[Tag].displayName = `$.${Tag}`;
|
|
885
1396
|
}
|
|
886
1397
|
|
|
1398
|
+
function RenderServerStyles(props) {
|
|
1399
|
+
const ctx = useStylixContext();
|
|
1400
|
+
return jsx(StyleElement, { styles: ctx.ssr ? flattenRules(ctx) : [], ...props });
|
|
1401
|
+
}
|
|
887
1402
|
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
1403
|
+
export { RenderServerStyles, StyleElement, StylixProvider, createStyleCollector, customProps, Stylix as default, defaultPlugins, mapObject, styleCollectorContext, useGlobalStyles, useKeyframes, useStyles, useStylixContext };
|
|
891
1404
|
//# sourceMappingURL=index.js.map
|