@stylix/core 3.1.3 → 4.0.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/dist/index.js +853 -28
- package/dist/index.js.map +1 -1
- package/dist/module.mjs +828 -0
- package/dist/module.mjs.map +1 -0
- package/dist/types.d.ts +159 -26
- package/dist/types.d.ts.map +1 -0
- package/package.json +19 -31
- package/dist/Stylix.d.ts +0 -3
- package/dist/Stylix.js +0 -66
- package/dist/Stylix.js.map +0 -1
- package/dist/StylixProvider.d.ts +0 -52
- package/dist/StylixProvider.js +0 -143
- package/dist/StylixProvider.js.map +0 -1
- package/dist/applyRules.d.ts +0 -5
- package/dist/applyRules.js +0 -31
- package/dist/applyRules.js.map +0 -1
- package/dist/classifyProps.d.ts +0 -7
- package/dist/classifyProps.js +0 -35
- package/dist/classifyProps.js.map +0 -1
- package/dist/css-props.json +0 -413
- package/dist/html-tags.json +0 -119
- package/dist/index.d.ts +0 -8
- package/dist/plugins/cleanStyles.d.ts +0 -5
- package/dist/plugins/cleanStyles.js +0 -28
- package/dist/plugins/cleanStyles.js.map +0 -1
- package/dist/plugins/customProps.d.ts +0 -2
- package/dist/plugins/customProps.js +0 -61
- package/dist/plugins/customProps.js.map +0 -1
- package/dist/plugins/defaultUnits.d.ts +0 -7
- package/dist/plugins/defaultUnits.js +0 -41
- package/dist/plugins/defaultUnits.js.map +0 -1
- package/dist/plugins/flattenNestedStyles.d.ts +0 -5
- package/dist/plugins/flattenNestedStyles.js +0 -47
- package/dist/plugins/flattenNestedStyles.js.map +0 -1
- package/dist/plugins/index.d.ts +0 -30
- package/dist/plugins/index.js +0 -44
- package/dist/plugins/index.js.map +0 -1
- package/dist/plugins/mediaArrays.d.ts +0 -5
- package/dist/plugins/mediaArrays.js +0 -56
- package/dist/plugins/mediaArrays.js.map +0 -1
- package/dist/plugins/merge$css.d.ts +0 -6
- package/dist/plugins/merge$css.js +0 -45
- package/dist/plugins/merge$css.js.map +0 -1
- package/dist/plugins/propCasing.d.ts +0 -5
- package/dist/plugins/propCasing.js +0 -21
- package/dist/plugins/propCasing.js.map +0 -1
- package/dist/plugins/replace$$class.d.ts +0 -5
- package/dist/plugins/replace$$class.js +0 -20
- package/dist/plugins/replace$$class.js.map +0 -1
- package/dist/plugins/themeFunctions.d.ts +0 -5
- package/dist/plugins/themeFunctions.js +0 -20
- package/dist/plugins/themeFunctions.js.map +0 -1
- package/dist/styleCollector.d.ts +0 -8
- package/dist/styleCollector.js +0 -40
- package/dist/styleCollector.js.map +0 -1
- package/dist/stylesToRuleArray.d.ts +0 -5
- package/dist/stylesToRuleArray.js +0 -41
- package/dist/stylesToRuleArray.js.map +0 -1
- package/dist/types.js +0 -3
- package/dist/types.js.map +0 -1
- package/dist/useStyles.d.ts +0 -16
- package/dist/useStyles.js +0 -115
- package/dist/useStyles.js.map +0 -1
- package/dist/util/cloneDeep.d.ts +0 -4
- package/dist/util/cloneDeep.js +0 -28
- package/dist/util/cloneDeep.js.map +0 -1
- package/dist/util/flatten.d.ts +0 -4
- package/dist/util/flatten.js +0 -19
- package/dist/util/flatten.js.map +0 -1
- package/dist/util/hashString.d.ts +0 -4
- package/dist/util/hashString.js +0 -15
- package/dist/util/hashString.js.map +0 -1
- package/dist/util/isPlainObject.d.ts +0 -4
- package/dist/util/isPlainObject.js +0 -11
- package/dist/util/isPlainObject.js.map +0 -1
- package/dist/util/mapObjectRecursive.d.ts +0 -8
- package/dist/util/mapObjectRecursive.js +0 -37
- package/dist/util/mapObjectRecursive.js.map +0 -1
- package/dist/util/merge.d.ts +0 -5
- package/dist/util/merge.js +0 -31
- package/dist/util/merge.js.map +0 -1
- package/dist/util/useIsoLayoutEffect.d.ts +0 -2
- package/dist/util/useIsoLayoutEffect.js +0 -8
- package/dist/util/useIsoLayoutEffect.js.map +0 -1
- package/dist/util/walkRecursive.d.ts +0 -8
- package/dist/util/walkRecursive.js +0 -26
- package/dist/util/walkRecursive.js.map +0 -1
- package/exports.mjs +0 -8
package/dist/module.mjs
ADDED
|
@@ -0,0 +1,828 @@
|
|
|
1
|
+
import $10ngl$react, {createContext as $10ngl$createContext, useContext as $10ngl$useContext, useRef as $10ngl$useRef, useState as $10ngl$useState, useLayoutEffect as $10ngl$useLayoutEffect} from "react";
|
|
2
|
+
|
|
3
|
+
function $parcel$interopDefault(a) {
|
|
4
|
+
return a && a.__esModule ? a.default : a;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
function $3ff9dea9e2b78201$export$54b296e95917282f(props, knownProps) {
|
|
9
|
+
const styles = {};
|
|
10
|
+
const other = {};
|
|
11
|
+
for(const prop in props)// If prop is not a valid JSX prop, it must be a CSS selector
|
|
12
|
+
if (!$3ff9dea9e2b78201$export$4ee529ad08c1c79c(prop) || $3ff9dea9e2b78201$export$95b76554d0cd12d6(prop, knownProps) && $3ff9dea9e2b78201$export$bd35f4abe4dfe31c(props[prop])) styles[prop] = props[prop];
|
|
13
|
+
else other[prop] = props[prop];
|
|
14
|
+
return [
|
|
15
|
+
styles,
|
|
16
|
+
other
|
|
17
|
+
];
|
|
18
|
+
}
|
|
19
|
+
function $3ff9dea9e2b78201$export$34c29a98f3a9910(props) {
|
|
20
|
+
const ctx = (0, $ce69b86a5144edcd$export$e3c6fdf4e371f028)();
|
|
21
|
+
const [styles, other] = $3ff9dea9e2b78201$export$54b296e95917282f(props, ctx.styleProps);
|
|
22
|
+
return [
|
|
23
|
+
styles,
|
|
24
|
+
other
|
|
25
|
+
];
|
|
26
|
+
}
|
|
27
|
+
function $3ff9dea9e2b78201$export$95b76554d0cd12d6(prop, knownProps) {
|
|
28
|
+
return $3ff9dea9e2b78201$export$4ee529ad08c1c79c(prop) && $3ff9dea9e2b78201$export$2eda63d9f5a68c09(prop) in knownProps;
|
|
29
|
+
}
|
|
30
|
+
function $3ff9dea9e2b78201$export$4ee529ad08c1c79c(value) {
|
|
31
|
+
// Not an exact check, but mostly rules out complex css selectors
|
|
32
|
+
return /^[a-z$][a-z0-9_-]*$/i.test(value);
|
|
33
|
+
}
|
|
34
|
+
function $3ff9dea9e2b78201$export$2eda63d9f5a68c09(value) {
|
|
35
|
+
return value.toLowerCase().replace(/[^a-z]/gi, "");
|
|
36
|
+
}
|
|
37
|
+
function $3ff9dea9e2b78201$export$bd35f4abe4dfe31c(value) {
|
|
38
|
+
return typeof value === "function" || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "undefined" || Array.isArray(value) || // Check for plain objects, and make sure it doesn't have the $$typeof property (react elements are never valid as style values)
|
|
39
|
+
typeof value === "object" && value.constructor === Object && !("$$typeof" in value);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
var $a2745028d395a990$exports = {};
|
|
44
|
+
$a2745028d395a990$exports = JSON.parse('["align-content","align-items","align-self","align-tracks","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","appearance","aspect-ratio","azimuth","backdrop-filter","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","block-overflow","block-size","border","border-block","border-block-color","border-block-style","border-block-width","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-end-end-radius","border-end-start-radius","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-end","border-inline-color","border-inline-style","border-inline-width","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-start-end-radius","border-start-start-radius","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-align","box-decoration-break","box-direction","box-flex","box-flex-group","box-lines","box-ordinal-group","box-orient","box-pack","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","color","color-adjust","color-scheme","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","content-visibility","counter-increment","counter-reset","counter-set","cursor","direction","display","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","font","font-family","font-feature-settings","font-kerning","font-language-override","font-optical-sizing","font-variation-settings","font-size","font-size-adjust","font-smooth","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","forced-color-adjust","gap","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","image-orientation","image-rendering","image-resolution","ime-mode","initial-letter","initial-letter-align","inline-size","inset","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","isolation","justify-content","justify-items","justify-self","justify-tracks","left","letter-spacing","line-break","line-clamp","line-height","line-height-step","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","margin-trim","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","masonry-auto-flow","math-style","max-block-size","max-height","max-inline-size","max-lines","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","object-fit","object-position","offset","offset-anchor","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-anchor","overflow-block","overflow-clip-box","overflow-clip-margin","overflow-inline","overflow-wrap","overflow-x","overflow-y","overscroll-behavior","overscroll-behavior-block","overscroll-behavior-inline","overscroll-behavior-x","overscroll-behavior-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","paint-order","perspective","perspective-origin","place-content","place-items","place-self","pointer-events","position","quotes","resize","right","rotate","row-gap","ruby-align","ruby-merge","ruby-position","scale","scrollbar-color","scrollbar-gutter","scrollbar-width","scroll-behavior","scroll-margin","scroll-margin-block","scroll-margin-block-start","scroll-margin-block-end","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-start","scroll-margin-inline-end","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-start","scroll-padding-block-end","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-start","scroll-padding-inline-end","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-coordinate","scroll-snap-destination","scroll-snap-points-x","scroll-snap-points-y","scroll-snap-stop","scroll-snap-type","scroll-snap-type-x","scroll-snap-type-y","shape-image-threshold","shape-margin","shape-outside","tab-size","table-layout","text-align","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-skip-ink","text-decoration-style","text-decoration-thickness","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-offset","text-underline-position","top","touch-action","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","translate","unicode-bidi","user-select","vertical-align","visibility","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index","zoom"]');
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Indicates that an object is most likely just an object literal.
|
|
49
|
+
*/ function $edf5ed4fba86638e$export$53b83ca8eaab0383(obj) {
|
|
50
|
+
return typeof obj === "object" && obj?.constructor === Object;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
function $0e5c015e7b007f3a$var$cleanObject(object) {
|
|
55
|
+
for(const key in object){
|
|
56
|
+
const value = object[key];
|
|
57
|
+
if (value === null || value === undefined || value === "") delete object[key];
|
|
58
|
+
else if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value) || Array.isArray(value)) {
|
|
59
|
+
$0e5c015e7b007f3a$var$cleanObject(value);
|
|
60
|
+
if (!Object.keys(value).length) delete object[key];
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return object;
|
|
64
|
+
}
|
|
65
|
+
const $0e5c015e7b007f3a$export$d01916932d7c8665 = {
|
|
66
|
+
name: "cleanStyles",
|
|
67
|
+
type: "processStyles",
|
|
68
|
+
plugin (ctx, styles) {
|
|
69
|
+
return $0e5c015e7b007f3a$var$cleanObject(styles);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
function $aaadd42d89c94302$export$72ae87c5302f282e(object, map, context = {}) {
|
|
76
|
+
const clone = Array.isArray(object) ? [] : {};
|
|
77
|
+
for (const k of Object.keys(object)){
|
|
78
|
+
let key = k;
|
|
79
|
+
const value = object[key];
|
|
80
|
+
if (Array.isArray(object)) key = +key;
|
|
81
|
+
const contextClone = {
|
|
82
|
+
...context
|
|
83
|
+
};
|
|
84
|
+
let result = map(key, value, object, contextClone);
|
|
85
|
+
if (typeof result !== "undefined" && typeof result !== "object" && !Array.isArray(result)) throw new Error("mapObjectRecursive: return value of map function must be undefined, object, or array!");
|
|
86
|
+
if (typeof result === "undefined") result = {
|
|
87
|
+
[key]: value
|
|
88
|
+
};
|
|
89
|
+
for(const kk in result){
|
|
90
|
+
let value = result[kk];
|
|
91
|
+
if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value) || Array.isArray(value)) value = $aaadd42d89c94302$export$72ae87c5302f282e(value, map, contextClone);
|
|
92
|
+
if (typeof value !== "undefined") clone[kk] = value;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
return clone;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
const $d7a178c62e252f70$export$dada68e03f41f865 = [
|
|
100
|
+
"columns",
|
|
101
|
+
"column-count",
|
|
102
|
+
"fill-opacity",
|
|
103
|
+
"flex",
|
|
104
|
+
"flex-grow",
|
|
105
|
+
"flex-shrink",
|
|
106
|
+
"font-weight",
|
|
107
|
+
"line-height",
|
|
108
|
+
"opacity",
|
|
109
|
+
"orphans",
|
|
110
|
+
"stroke-opacity",
|
|
111
|
+
"widows",
|
|
112
|
+
"z-index",
|
|
113
|
+
"zoom",
|
|
114
|
+
"order"
|
|
115
|
+
];
|
|
116
|
+
const $d7a178c62e252f70$export$18583267fbb07c11 = (unit = "px", ignoreProps = $d7a178c62e252f70$export$dada68e03f41f865)=>{
|
|
117
|
+
return {
|
|
118
|
+
name: "defaultUnits",
|
|
119
|
+
type: "processStyles",
|
|
120
|
+
plugin (ctx, styles) {
|
|
121
|
+
return (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $d7a178c62e252f70$var$defaultUnitsMap, {
|
|
122
|
+
unit: unit,
|
|
123
|
+
ignoreProps: ignoreProps
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
const $d7a178c62e252f70$var$defaultUnitsMap = (key, value, object, ctx)=>{
|
|
129
|
+
if (typeof value === "number" && !ctx.ignoreProps.includes(key)) return {
|
|
130
|
+
[key]: String(value) + ctx.unit
|
|
131
|
+
};
|
|
132
|
+
};
|
|
133
|
+
const $d7a178c62e252f70$export$30fd8e83e8b8d3e8 = $d7a178c62e252f70$export$18583267fbb07c11();
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
function $cc50451802495710$var$flatten(styles, parent, selector, root, mediaRoot) {
|
|
138
|
+
for(let key in styles){
|
|
139
|
+
const value = styles[key];
|
|
140
|
+
if (key.startsWith("@media")) {
|
|
141
|
+
// Flatten media queries, but nest them under the root object
|
|
142
|
+
root[key] = root[key] || {};
|
|
143
|
+
$cc50451802495710$var$flatten(value, root[key], selector, root, root[key]);
|
|
144
|
+
} else if (key.startsWith("@keyframes")) // Add keyframe rules as-is directly to mediaRoot object
|
|
145
|
+
mediaRoot[key] = value;
|
|
146
|
+
else if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(styles[key])) {
|
|
147
|
+
// Concatenate or replace & in selectors and then continue flattening styles
|
|
148
|
+
if (key.includes("&")) key = key.replace(/&/g, selector);
|
|
149
|
+
else key = (selector + " " + key).trim();
|
|
150
|
+
parent[key] = parent[key] || {};
|
|
151
|
+
$cc50451802495710$var$flatten(value, parent, key, root, mediaRoot);
|
|
152
|
+
} else {
|
|
153
|
+
// Selector is just a css property
|
|
154
|
+
parent[selector] = parent[selector] || {};
|
|
155
|
+
parent[selector][key] = styles[key];
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
const $cc50451802495710$export$83990f03bc941cb5 = {
|
|
160
|
+
name: "flattenNestedStyles",
|
|
161
|
+
type: "processStyles",
|
|
162
|
+
plugin (ctx, styles) {
|
|
163
|
+
const flattened = {};
|
|
164
|
+
$cc50451802495710$var$flatten(styles, flattened, "", flattened, flattened);
|
|
165
|
+
return flattened;
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
const $5f434cd9a2aebf44$export$7cc8703894decffe = {
|
|
173
|
+
name: "mediaArrays",
|
|
174
|
+
type: "processStyles",
|
|
175
|
+
plugin (ctx, styles) {
|
|
176
|
+
// Fill out ditto values
|
|
177
|
+
styles = (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $5f434cd9a2aebf44$var$mapDittoValues);
|
|
178
|
+
const mediaStyles = {};
|
|
179
|
+
let nonMediaStyles = styles;
|
|
180
|
+
for(const i in ctx.media){
|
|
181
|
+
const mediaQuery = ctx.media[i];
|
|
182
|
+
if (!mediaQuery) nonMediaStyles = (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $5f434cd9a2aebf44$var$mapNonMedia, {
|
|
183
|
+
i: i
|
|
184
|
+
});
|
|
185
|
+
else mediaStyles[`@media ${mediaQuery}`] = (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $5f434cd9a2aebf44$var$mapMediaStyles, {
|
|
186
|
+
i: i
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
return {
|
|
190
|
+
...nonMediaStyles,
|
|
191
|
+
...mediaStyles
|
|
192
|
+
};
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
function $5f434cd9a2aebf44$var$mapDittoValues(key, value) {
|
|
196
|
+
if (Array.isArray(value)) {
|
|
197
|
+
for(const i in value){
|
|
198
|
+
const v = value[i];
|
|
199
|
+
if (v === "@") value[i] = value[+i - 1];
|
|
200
|
+
}
|
|
201
|
+
return {
|
|
202
|
+
[key]: value
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
function $5f434cd9a2aebf44$var$mapNonMedia(key, value, object, context) {
|
|
207
|
+
if (Array.isArray(value)) return {
|
|
208
|
+
[key]: value[context.i]
|
|
209
|
+
};
|
|
210
|
+
}
|
|
211
|
+
function $5f434cd9a2aebf44$var$mapMediaStyles(key, value, object, context) {
|
|
212
|
+
if (typeof key === "number") return; // Not possible, but here for TS
|
|
213
|
+
if (key.startsWith("@keyframes")) context.keyframes = true;
|
|
214
|
+
if (Array.isArray(value)) return {
|
|
215
|
+
[key]: value[context.i]
|
|
216
|
+
};
|
|
217
|
+
if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value) || context.keyframes) return;
|
|
218
|
+
// delete key/value pair if primitive
|
|
219
|
+
return {
|
|
220
|
+
[key]: undefined
|
|
221
|
+
};
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* Flatten an array recursively.
|
|
227
|
+
*/ function $63603460f37659a2$export$bffa455ba8c619a6(array) {
|
|
228
|
+
const result = [];
|
|
229
|
+
$63603460f37659a2$var$_flatten(array, result);
|
|
230
|
+
return result;
|
|
231
|
+
}
|
|
232
|
+
function $63603460f37659a2$var$_flatten(array, result) {
|
|
233
|
+
for(let i = 0; i < array.length; i++){
|
|
234
|
+
const value = array[i];
|
|
235
|
+
Array.isArray(value) ? $63603460f37659a2$var$_flatten(value, result) : result.push(value);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
const $3eb676b5e9eeeb72$export$3fc9bcb7effc6280 = {
|
|
242
|
+
name: "merge$css",
|
|
243
|
+
type: "processStyles",
|
|
244
|
+
plugin (ctx, styles) {
|
|
245
|
+
const result = {};
|
|
246
|
+
$3eb676b5e9eeeb72$export$f9e25e3471fd9b77(styles, result);
|
|
247
|
+
return result;
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
function $3eb676b5e9eeeb72$export$f9e25e3471fd9b77(obj, ctx) {
|
|
251
|
+
if (!(0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(obj)) return;
|
|
252
|
+
for(const key in obj)if (key === "$css") {
|
|
253
|
+
const $css = obj[key];
|
|
254
|
+
if (Array.isArray($css)) {
|
|
255
|
+
const flat$css = (0, $63603460f37659a2$export$bffa455ba8c619a6)($css);
|
|
256
|
+
for (const val of flat$css)$3eb676b5e9eeeb72$export$f9e25e3471fd9b77(val, ctx);
|
|
257
|
+
} else $3eb676b5e9eeeb72$export$f9e25e3471fd9b77($css, ctx);
|
|
258
|
+
} else {
|
|
259
|
+
let value = obj[key];
|
|
260
|
+
if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value)) {
|
|
261
|
+
value = ctx[key] || {};
|
|
262
|
+
$3eb676b5e9eeeb72$export$f9e25e3471fd9b77(obj[key], value);
|
|
263
|
+
}
|
|
264
|
+
ctx[key] = value;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
const $c4f1751057a2356d$export$d85214c343312efe = {
|
|
272
|
+
name: "normalizeStyleProps",
|
|
273
|
+
type: "processStyles",
|
|
274
|
+
plugin (ctx, styles) {
|
|
275
|
+
return (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $c4f1751057a2356d$var$propCasingMap, {
|
|
276
|
+
ctx: ctx
|
|
277
|
+
});
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
function $c4f1751057a2356d$var$propCasingMap(key, value, object, context) {
|
|
281
|
+
if (typeof key === "string" && context.ctx.styleProps[(0, $3ff9dea9e2b78201$export$2eda63d9f5a68c09)(key)]) return {
|
|
282
|
+
[context.ctx.styleProps[(0, $3ff9dea9e2b78201$export$2eda63d9f5a68c09)(key)]]: value
|
|
283
|
+
};
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
const $ae7f145112a15dd5$export$a5988781fa300750 = {
|
|
289
|
+
name: "replace$$class",
|
|
290
|
+
type: "processStyles",
|
|
291
|
+
plugin (ctx, styles) {
|
|
292
|
+
return (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $ae7f145112a15dd5$var$replace$$classMap, {
|
|
293
|
+
ctx: ctx
|
|
294
|
+
});
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
function $ae7f145112a15dd5$var$replace$$classMap(key, value, object, context) {
|
|
298
|
+
value = typeof value === "string" ? value.replace("$$class", context.ctx.hash) : value;
|
|
299
|
+
key = typeof key === "string" ? key.replace("$$class", context.ctx.hash) : key;
|
|
300
|
+
return {
|
|
301
|
+
[key]: value
|
|
302
|
+
};
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
const $ee5098dc94e032ed$export$d9c204138d106585 = {
|
|
308
|
+
name: "themeFunctions",
|
|
309
|
+
type: "preprocessStyles",
|
|
310
|
+
plugin (ctx, styles) {
|
|
311
|
+
return (0, $aaadd42d89c94302$export$72ae87c5302f282e)(styles, $ee5098dc94e032ed$var$themeFunctionsMap, {
|
|
312
|
+
ctx: ctx
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
};
|
|
316
|
+
function $ee5098dc94e032ed$var$themeFunctionsMap(key, value, object, context) {
|
|
317
|
+
if (typeof value === "function") return {
|
|
318
|
+
[key]: value(context.ctx.theme, context.ctx)
|
|
319
|
+
};
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
function $b605e3734a054da2$export$629a2bd3f5a49ecc(value) {
|
|
327
|
+
if (!value || typeof value !== "object") return value;
|
|
328
|
+
if (Array.isArray(value)) {
|
|
329
|
+
const clone = [];
|
|
330
|
+
for(let index = 0; index < value.length; ++index)clone.push($b605e3734a054da2$export$629a2bd3f5a49ecc(value[index]));
|
|
331
|
+
return clone;
|
|
332
|
+
}
|
|
333
|
+
if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value)) {
|
|
334
|
+
const clone = {};
|
|
335
|
+
for(const key in value)clone[key] = $b605e3734a054da2$export$629a2bd3f5a49ecc(value[key]);
|
|
336
|
+
return clone;
|
|
337
|
+
}
|
|
338
|
+
return value;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
function $b14b1781b09bbb5d$export$a8d8e56b740dab80(object, cb, context) {
|
|
344
|
+
const keys = Object.keys(object);
|
|
345
|
+
for (const key of keys){
|
|
346
|
+
const value = object[key];
|
|
347
|
+
cb(key, value, object, context);
|
|
348
|
+
if (Array.isArray(value) || (0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value)) {
|
|
349
|
+
const contextClone = (0, $b605e3734a054da2$export$629a2bd3f5a49ecc)(context);
|
|
350
|
+
$b14b1781b09bbb5d$export$a8d8e56b740dab80(value, cb, contextClone);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
return object;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
|
|
358
|
+
const $61d992b103afb529$export$95cef81be5ddcfd4 = (customProps)=>{
|
|
359
|
+
for(const key in customProps)customProps[(0, $3ff9dea9e2b78201$export$2eda63d9f5a68c09)(key)] = customProps[key];
|
|
360
|
+
return [
|
|
361
|
+
{
|
|
362
|
+
name: "customPropsInit",
|
|
363
|
+
type: "initialize",
|
|
364
|
+
plugin (ctx) {
|
|
365
|
+
for(const key in customProps)ctx.styleProps[(0, $3ff9dea9e2b78201$export$2eda63d9f5a68c09)(key)] = key;
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
name: "customPropsProcess",
|
|
370
|
+
type: "processStyles",
|
|
371
|
+
before: (0, $5f434cd9a2aebf44$export$7cc8703894decffe),
|
|
372
|
+
plugin (ctx, styles) {
|
|
373
|
+
return (0, $b14b1781b09bbb5d$export$a8d8e56b740dab80)(styles, (key, value, object)=>{
|
|
374
|
+
if (!(0, $3ff9dea9e2b78201$export$4ee529ad08c1c79c)(key) || (0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value)) return;
|
|
375
|
+
const simpleKey = (0, $3ff9dea9e2b78201$export$2eda63d9f5a68c09)(key);
|
|
376
|
+
const propValue = customProps[simpleKey];
|
|
377
|
+
if (!propValue) return;
|
|
378
|
+
const objectClone = {
|
|
379
|
+
...object
|
|
380
|
+
};
|
|
381
|
+
const keys = Object.keys(object);
|
|
382
|
+
const afterKeys = keys.slice(keys.indexOf(key) + 1);
|
|
383
|
+
const newStyles = {};
|
|
384
|
+
if (typeof propValue === "object") {
|
|
385
|
+
if (value) Object.assign(newStyles, propValue);
|
|
386
|
+
} else if (typeof propValue === "string") newStyles[propValue] = value;
|
|
387
|
+
else if (typeof propValue === "function") Object.assign(newStyles, propValue(value));
|
|
388
|
+
delete object[key];
|
|
389
|
+
Object.assign(object, newStyles);
|
|
390
|
+
for (const k of afterKeys){
|
|
391
|
+
const val = objectClone[k];
|
|
392
|
+
delete object[k];
|
|
393
|
+
object[k] = val;
|
|
394
|
+
}
|
|
395
|
+
});
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
];
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
|
|
402
|
+
function $79720bf00c08b491$export$dd20d84ec8823bbf(type, styles, hash, context) {
|
|
403
|
+
const pluginContext = {
|
|
404
|
+
id: context.id,
|
|
405
|
+
devMode: context.devMode,
|
|
406
|
+
theme: context.theme,
|
|
407
|
+
media: context.media,
|
|
408
|
+
stylesheet: context.stylesheet,
|
|
409
|
+
styleElement: context.styleElement,
|
|
410
|
+
styleProps: context.styleProps,
|
|
411
|
+
hash: hash
|
|
412
|
+
};
|
|
413
|
+
let processedStyles = styles;
|
|
414
|
+
for(const i in context.plugins){
|
|
415
|
+
const plugin = context.plugins[i];
|
|
416
|
+
if (plugin.type === type) processedStyles = plugin.plugin(pluginContext, processedStyles);
|
|
417
|
+
}
|
|
418
|
+
return processedStyles;
|
|
419
|
+
}
|
|
420
|
+
const $79720bf00c08b491$export$b5ecb47695d6786e = {
|
|
421
|
+
themeFunctions: $ee5098dc94e032ed$export$d9c204138d106585,
|
|
422
|
+
merge$css: $3eb676b5e9eeeb72$export$3fc9bcb7effc6280,
|
|
423
|
+
mediaArrays: $5f434cd9a2aebf44$export$7cc8703894decffe,
|
|
424
|
+
propCasing: $c4f1751057a2356d$export$d85214c343312efe,
|
|
425
|
+
flattenNestedStyles: $cc50451802495710$export$83990f03bc941cb5,
|
|
426
|
+
replace$$class: $ae7f145112a15dd5$export$a5988781fa300750,
|
|
427
|
+
defaultPixelUnits: $d7a178c62e252f70$export$30fd8e83e8b8d3e8,
|
|
428
|
+
cleanStyles: $0e5c015e7b007f3a$export$d01916932d7c8665
|
|
429
|
+
};
|
|
430
|
+
|
|
431
|
+
|
|
432
|
+
|
|
433
|
+
const $98cf2ff196b5431f$export$9b609b8e22cde6fe = /*#__PURE__*/ (0, $10ngl$createContext)(null);
|
|
434
|
+
function $98cf2ff196b5431f$export$d3207b3764661c07() {
|
|
435
|
+
const styles = [];
|
|
436
|
+
const collector = {
|
|
437
|
+
collect: (element)=>/*#__PURE__*/ (0, $10ngl$react).createElement($98cf2ff196b5431f$export$9b609b8e22cde6fe.Provider, {
|
|
438
|
+
value: styles
|
|
439
|
+
}, element),
|
|
440
|
+
render: (props)=>/*#__PURE__*/ (0, $10ngl$react).createElement("style", {
|
|
441
|
+
type: "text/css",
|
|
442
|
+
key: props.id || "stylix",
|
|
443
|
+
...props,
|
|
444
|
+
dangerouslySetInnerHTML: {
|
|
445
|
+
__html: collector.styles.join(" ")
|
|
446
|
+
}
|
|
447
|
+
}),
|
|
448
|
+
styles: styles
|
|
449
|
+
};
|
|
450
|
+
collector.render.displayName = "StylixStyleCollectorRenderer";
|
|
451
|
+
return collector;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
function $45e5eedfea1753e9$export$4950aa0f605343fb(...items) {
|
|
458
|
+
items = items.filter((item)=>typeof item !== "undefined" && item !== null);
|
|
459
|
+
if (!items?.length) return undefined;
|
|
460
|
+
if (items.length === 1) return items[0];
|
|
461
|
+
// If items are not all objects/arrays, return the last object/array if possible, otherwise last non-undefined value
|
|
462
|
+
if (!items.every((item)=>Array.isArray(item) || (0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(item))) {
|
|
463
|
+
items.reverse();
|
|
464
|
+
return items.find((item)=>Array.isArray(item) || (0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(item)) || items.find((item)=>typeof item !== "undefined");
|
|
465
|
+
}
|
|
466
|
+
const merged = Array.isArray(items[0]) ? [] : {};
|
|
467
|
+
for (const item of items){
|
|
468
|
+
if (!Array.isArray(item) && !(0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(item)) return merged;
|
|
469
|
+
const keys = [
|
|
470
|
+
...Object.keys(item),
|
|
471
|
+
...Object.getOwnPropertySymbols(item)
|
|
472
|
+
];
|
|
473
|
+
for (const key of keys){
|
|
474
|
+
const result = $45e5eedfea1753e9$export$4950aa0f605343fb(merged[key], item[key]);
|
|
475
|
+
if (typeof result !== "undefined") merged[key] = result;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
return merged;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
|
|
482
|
+
|
|
483
|
+
const $bb477ec7853da8e9$var$useIsoLayoutEffect = typeof window !== "undefined" && "document" in window ? (fn, deps, _runOnSsr)=>(0, $10ngl$useLayoutEffect)(fn, deps) : (fn, _deps, runOnSsr)=>runOnSsr ? fn() : null;
|
|
484
|
+
var $bb477ec7853da8e9$export$2e2bcd8739ae039 = $bb477ec7853da8e9$var$useIsoLayoutEffect;
|
|
485
|
+
|
|
486
|
+
|
|
487
|
+
const $ce69b86a5144edcd$var$defaultStyleProps = {};
|
|
488
|
+
for (const value of (0, (/*@__PURE__*/$parcel$interopDefault($a2745028d395a990$exports))))$ce69b86a5144edcd$var$defaultStyleProps[(0, $3ff9dea9e2b78201$export$2eda63d9f5a68c09)(value)] = value;
|
|
489
|
+
function $ce69b86a5144edcd$var$createStylixContext(userValues = {}) {
|
|
490
|
+
const ctx = {
|
|
491
|
+
id: userValues.id || Math.round(Math.random() * 10000).toString(10),
|
|
492
|
+
devMode: userValues.devMode,
|
|
493
|
+
styleProps: $ce69b86a5144edcd$var$defaultStyleProps,
|
|
494
|
+
theme: userValues.theme || null,
|
|
495
|
+
media: userValues.media || null,
|
|
496
|
+
styleElement: userValues.styleElement,
|
|
497
|
+
plugins: (0, $63603460f37659a2$export$bffa455ba8c619a6)(Object.values((0, $79720bf00c08b491$export$b5ecb47695d6786e))),
|
|
498
|
+
rules: {},
|
|
499
|
+
cleanupRequest: undefined
|
|
500
|
+
};
|
|
501
|
+
if (!ctx.styleElement && typeof document !== "undefined") {
|
|
502
|
+
ctx.styleElement = document.createElement("style");
|
|
503
|
+
if (ctx.id) ctx.styleElement.id = "stylix-" + ctx.id;
|
|
504
|
+
ctx.styleElement.className = "stylix";
|
|
505
|
+
document.head.appendChild(ctx.styleElement);
|
|
506
|
+
}
|
|
507
|
+
if (ctx.styleElement) ctx.stylesheet = ctx.styleElement.sheet;
|
|
508
|
+
if (userValues.plugins?.length) {
|
|
509
|
+
const flatPlugins = (0, $63603460f37659a2$export$bffa455ba8c619a6)(userValues.plugins);
|
|
510
|
+
for(const i in flatPlugins){
|
|
511
|
+
const plugin = flatPlugins[i];
|
|
512
|
+
let pluginIndex = -1;
|
|
513
|
+
if (plugin.before && ctx.plugins.includes(plugin.before)) pluginIndex = ctx.plugins.indexOf(plugin.before);
|
|
514
|
+
if (plugin.after && ctx.plugins.includes(plugin.after)) pluginIndex = ctx.plugins.indexOf(plugin.after) + 1;
|
|
515
|
+
if (plugin.atIndex !== undefined) pluginIndex = plugin.atIndex;
|
|
516
|
+
if (pluginIndex === -1) ctx.plugins.push(plugin);
|
|
517
|
+
else ctx.plugins.splice(pluginIndex, 0, plugin);
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
(0, $79720bf00c08b491$export$dd20d84ec8823bbf)("initialize", null, null, ctx);
|
|
521
|
+
return ctx;
|
|
522
|
+
}
|
|
523
|
+
// The React context object
|
|
524
|
+
const $ce69b86a5144edcd$var$stylixContext = /*#__PURE__*/ (0, $10ngl$createContext)($ce69b86a5144edcd$var$createStylixContext());
|
|
525
|
+
function $ce69b86a5144edcd$export$e3c6fdf4e371f028() {
|
|
526
|
+
return (0, $10ngl$useContext)($ce69b86a5144edcd$var$stylixContext);
|
|
527
|
+
}
|
|
528
|
+
function $ce69b86a5144edcd$export$c01a354187f160ee() {
|
|
529
|
+
return (0, $10ngl$useContext)($ce69b86a5144edcd$var$stylixContext).theme;
|
|
530
|
+
}
|
|
531
|
+
function $ce69b86a5144edcd$export$ae2c3ad5c234c4cc({ id: id , devMode: devMode , plugins: plugins , styleElement: styleElement , children: children , ...themeProps }) {
|
|
532
|
+
const ctx = (0, $10ngl$useRef)();
|
|
533
|
+
if (!ctx.current) ctx.current = $ce69b86a5144edcd$var$createStylixContext({
|
|
534
|
+
id: id,
|
|
535
|
+
devMode: devMode,
|
|
536
|
+
plugins: plugins,
|
|
537
|
+
styleElement: styleElement
|
|
538
|
+
});
|
|
539
|
+
ctx.current.styleCollector = (0, $10ngl$useContext)((0, $98cf2ff196b5431f$export$9b609b8e22cde6fe));
|
|
540
|
+
return /*#__PURE__*/ (0, $10ngl$react).createElement($ce69b86a5144edcd$var$stylixContext.Provider, {
|
|
541
|
+
value: ctx.current
|
|
542
|
+
}, /*#__PURE__*/ (0, $10ngl$react).createElement($ce69b86a5144edcd$export$91c80431af53fbc7, themeProps, children));
|
|
543
|
+
}
|
|
544
|
+
function $ce69b86a5144edcd$var$mergeContexts(contextA, contextB) {
|
|
545
|
+
const obj = {
|
|
546
|
+
...contextA
|
|
547
|
+
};
|
|
548
|
+
const themeB = contextB.theme;
|
|
549
|
+
if (contextB) for(const key in contextB){
|
|
550
|
+
const value = contextB[key];
|
|
551
|
+
if (typeof value !== "undefined") obj[key] = value;
|
|
552
|
+
}
|
|
553
|
+
obj.theme = (0, $45e5eedfea1753e9$export$4950aa0f605343fb)(contextA.theme || {}, themeB);
|
|
554
|
+
return obj;
|
|
555
|
+
}
|
|
556
|
+
function $ce69b86a5144edcd$export$91c80431af53fbc7({ children: children , media: media , theme: theme }) {
|
|
557
|
+
const parentCtx = (0, $10ngl$useContext)($ce69b86a5144edcd$var$stylixContext);
|
|
558
|
+
const [contextValue, setContextValue] = (0, $10ngl$useState)(()=>$ce69b86a5144edcd$var$mergeContexts(parentCtx, {
|
|
559
|
+
media: media,
|
|
560
|
+
theme: theme
|
|
561
|
+
}));
|
|
562
|
+
// contextValue should only update (and cause re-renders) when relevant properties change.
|
|
563
|
+
// `media` is treated as special because providing an array of strings is easier to do inline,
|
|
564
|
+
// but we don't want to cause descendent re-renders if the values don't change.
|
|
565
|
+
(0, $bb477ec7853da8e9$export$2e2bcd8739ae039)(()=>{
|
|
566
|
+
setContextValue($ce69b86a5144edcd$var$mergeContexts(parentCtx, {
|
|
567
|
+
media: media,
|
|
568
|
+
theme: theme
|
|
569
|
+
}));
|
|
570
|
+
}, [
|
|
571
|
+
parentCtx,
|
|
572
|
+
media?.join("|") || "",
|
|
573
|
+
theme
|
|
574
|
+
], false);
|
|
575
|
+
return /*#__PURE__*/ (0, $10ngl$react).createElement($ce69b86a5144edcd$var$stylixContext.Provider, {
|
|
576
|
+
value: contextValue
|
|
577
|
+
}, children);
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
|
|
581
|
+
|
|
582
|
+
function $f12bad835e77a044$export$2e2bcd8739ae039(ctx) {
|
|
583
|
+
const flattenedRules = [];
|
|
584
|
+
for(const key in ctx.rules){
|
|
585
|
+
const val = ctx.rules[key];
|
|
586
|
+
flattenedRules.push(...val.rules);
|
|
587
|
+
}
|
|
588
|
+
if (ctx.styleCollector) {
|
|
589
|
+
ctx.styleCollector.length = 0;
|
|
590
|
+
ctx.styleCollector.push(...flattenedRules);
|
|
591
|
+
return;
|
|
592
|
+
}
|
|
593
|
+
if (ctx.devMode) ctx.styleElement.innerHTML = flattenedRules.join("\n");
|
|
594
|
+
else {
|
|
595
|
+
const container = ctx.stylesheet;
|
|
596
|
+
if (container.cssRules) while(container.cssRules.length)container.deleteRule(0);
|
|
597
|
+
for(const i in flattenedRules)container.insertRule(flattenedRules[i], +i);
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
|
|
602
|
+
|
|
603
|
+
|
|
604
|
+
|
|
605
|
+
function $2ae4ecd42d011bb3$export$2e2bcd8739ae039(styles, hash, context) {
|
|
606
|
+
try {
|
|
607
|
+
const processedStyles = (0, $79720bf00c08b491$export$dd20d84ec8823bbf)("processStyles", styles, hash, context);
|
|
608
|
+
// serialize to css rules array
|
|
609
|
+
const serialize = function serialize(selector, styles) {
|
|
610
|
+
const lines = [];
|
|
611
|
+
for(const key in styles){
|
|
612
|
+
const value = styles[key];
|
|
613
|
+
if ((0, $edf5ed4fba86638e$export$53b83ca8eaab0383)(value)) lines.push(serialize(key, value));
|
|
614
|
+
else lines.push(` ${key}: ${value};`);
|
|
615
|
+
}
|
|
616
|
+
return `${selector} {\n${lines.join("\n")} }`;
|
|
617
|
+
};
|
|
618
|
+
const result = [];
|
|
619
|
+
for(const key in processedStyles){
|
|
620
|
+
const value = processedStyles[key];
|
|
621
|
+
result.push(serialize(key, value));
|
|
622
|
+
}
|
|
623
|
+
return result;
|
|
624
|
+
} catch (e) {
|
|
625
|
+
if (e.name && e.reason) console.error(`${e.name}: ${e.reason}\n`, e.source.replace("\n", " ").substr(Math.max(0, e.column - 20), 100) + "\n", " ".repeat(20) + "^");
|
|
626
|
+
else console.error(e);
|
|
627
|
+
return [];
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
|
|
632
|
+
|
|
633
|
+
/**
|
|
634
|
+
* Cheap string hashing, suitable for generating css class names
|
|
635
|
+
*/ function $7173dd470a409f87$export$9169be2e06c9c165(str) {
|
|
636
|
+
let hash = 5381;
|
|
637
|
+
let i = str.length;
|
|
638
|
+
while(i)hash = hash * 33 ^ str.charCodeAt(--i);
|
|
639
|
+
return "stylix-" + (hash >>> 0).toString(36);
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
|
|
643
|
+
|
|
644
|
+
function $785bd247a0dbd828$var$cleanup(ctx) {
|
|
645
|
+
if (typeof ctx.cleanupRequest !== "undefined") return;
|
|
646
|
+
ctx.cleanupRequest = setTimeout(()=>{
|
|
647
|
+
let deleted = false;
|
|
648
|
+
for(const i in ctx.rules){
|
|
649
|
+
const rule = ctx.rules[i];
|
|
650
|
+
if (!rule.refs) {
|
|
651
|
+
delete ctx.rules[rule.hash];
|
|
652
|
+
deleted = true;
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
deleted && (0, $f12bad835e77a044$export$2e2bcd8739ae039)(ctx);
|
|
656
|
+
delete ctx.cleanupRequest;
|
|
657
|
+
}, 100);
|
|
658
|
+
}
|
|
659
|
+
function $785bd247a0dbd828$var$compare(a, b) {
|
|
660
|
+
if (a === b) return true;
|
|
661
|
+
if (typeof a !== typeof b) return false;
|
|
662
|
+
if (typeof a === "object") {
|
|
663
|
+
if (Array.isArray(a) && Array.isArray(b) && a.length !== b.length) return false;
|
|
664
|
+
else if (Object.keys(a).length !== Object.keys(b).length) return false;
|
|
665
|
+
for(const key in b){
|
|
666
|
+
if (!$785bd247a0dbd828$var$compare(a[key], b[key])) return false;
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
return a === b;
|
|
670
|
+
}
|
|
671
|
+
function $785bd247a0dbd828$export$28e6b9b82ee883c(styles, options = {
|
|
672
|
+
global: false,
|
|
673
|
+
disabled: false
|
|
674
|
+
}) {
|
|
675
|
+
const stylixCtx = (0, $ce69b86a5144edcd$export$e3c6fdf4e371f028)();
|
|
676
|
+
const prevRef = (0, $10ngl$useRef)({
|
|
677
|
+
styles: {},
|
|
678
|
+
hash: ""
|
|
679
|
+
});
|
|
680
|
+
const changed = !$785bd247a0dbd828$var$compare(styles, prevRef.current.styles);
|
|
681
|
+
prevRef.current.styles = styles;
|
|
682
|
+
if (changed) {
|
|
683
|
+
// Preprocess styles with plugins
|
|
684
|
+
if (!options.disabled && styles) styles = (0, $79720bf00c08b491$export$dd20d84ec8823bbf)("preprocessStyles", styles, null, stylixCtx);
|
|
685
|
+
// Serialize value and generate hash
|
|
686
|
+
const json = !options.disabled && styles && JSON.stringify(styles);
|
|
687
|
+
prevRef.current.hash = json && json !== "{}" && json !== "[]" ? (0, $7173dd470a409f87$export$9169be2e06c9c165)(JSON.stringify(stylixCtx.media || []) + json) : "";
|
|
688
|
+
}
|
|
689
|
+
const { hash: hash } = prevRef.current;
|
|
690
|
+
if (hash && changed && !stylixCtx.rules[hash]) {
|
|
691
|
+
// If not global styles, wrap original styles with classname
|
|
692
|
+
if (!options.global) styles = {
|
|
693
|
+
["." + hash]: styles
|
|
694
|
+
};
|
|
695
|
+
stylixCtx.rules[hash] = {
|
|
696
|
+
hash: hash,
|
|
697
|
+
rules: (0, $2ae4ecd42d011bb3$export$2e2bcd8739ae039)(styles, hash, stylixCtx),
|
|
698
|
+
refs: 1
|
|
699
|
+
};
|
|
700
|
+
stylixCtx.requestApply = true;
|
|
701
|
+
}
|
|
702
|
+
// Apply styles if requested.
|
|
703
|
+
// This runs on every render. We utilize useLayoutEffect so that it runs *after* all the other
|
|
704
|
+
// renders have completed. stylixCtx.requestApply guards against multiple runs. This reduces the number of calls
|
|
705
|
+
// to applyRules(), but prevents styles potentially being added to the DOM after other components force the
|
|
706
|
+
// browser to compute styles.
|
|
707
|
+
(0, $bb477ec7853da8e9$export$2e2bcd8739ae039)(()=>{
|
|
708
|
+
if (!stylixCtx.requestApply) return;
|
|
709
|
+
stylixCtx.requestApply = false;
|
|
710
|
+
(0, $f12bad835e77a044$export$2e2bcd8739ae039)(stylixCtx);
|
|
711
|
+
}, undefined, true);
|
|
712
|
+
// When hash changes, add/remove ref count
|
|
713
|
+
(0, $bb477ec7853da8e9$export$2e2bcd8739ae039)(()=>{
|
|
714
|
+
if (!hash || !changed) return;
|
|
715
|
+
if (stylixCtx.rules[hash]) stylixCtx.rules[hash].refs++;
|
|
716
|
+
return ()=>{
|
|
717
|
+
stylixCtx.rules[hash].refs--;
|
|
718
|
+
$785bd247a0dbd828$var$cleanup(stylixCtx);
|
|
719
|
+
};
|
|
720
|
+
}, [
|
|
721
|
+
hash
|
|
722
|
+
], false);
|
|
723
|
+
return hash;
|
|
724
|
+
}
|
|
725
|
+
function $785bd247a0dbd828$export$f3922bb611b91373(keyframes, options = {
|
|
726
|
+
disabled: false
|
|
727
|
+
}) {
|
|
728
|
+
return $785bd247a0dbd828$export$28e6b9b82ee883c({
|
|
729
|
+
"@keyframes $$class": keyframes
|
|
730
|
+
}, {
|
|
731
|
+
global: true,
|
|
732
|
+
...options
|
|
733
|
+
});
|
|
734
|
+
}
|
|
735
|
+
function $785bd247a0dbd828$export$abac79b9db5ae47b(styles, options = {
|
|
736
|
+
disabled: false
|
|
737
|
+
}) {
|
|
738
|
+
return $785bd247a0dbd828$export$28e6b9b82ee883c(styles, {
|
|
739
|
+
...options,
|
|
740
|
+
global: true
|
|
741
|
+
});
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
|
|
745
|
+
|
|
746
|
+
|
|
747
|
+
|
|
748
|
+
|
|
749
|
+
|
|
750
|
+
|
|
751
|
+
|
|
752
|
+
|
|
753
|
+
|
|
754
|
+
|
|
755
|
+
function $f0f9a06cd0a8737d$export$7204462c24cfcb17(props, ref) {
|
|
756
|
+
const { $el: $el , $css: $css , $disabled: $disabled , className: className , children: children , ...rest } = props;
|
|
757
|
+
const ctx = (0, $ce69b86a5144edcd$export$e3c6fdf4e371f028)();
|
|
758
|
+
const [styleProps, otherProps] = (0, $3ff9dea9e2b78201$export$54b296e95917282f)(rest, ctx.styleProps);
|
|
759
|
+
if ($css) styleProps.$css = $css;
|
|
760
|
+
const hash = (0, $785bd247a0dbd828$export$28e6b9b82ee883c)(styleProps, {
|
|
761
|
+
disabled: $disabled
|
|
762
|
+
});
|
|
763
|
+
const allProps = {
|
|
764
|
+
className: `${hash} ${className || ""}`.trim(),
|
|
765
|
+
ref: ref,
|
|
766
|
+
...otherProps
|
|
767
|
+
};
|
|
768
|
+
if (/*#__PURE__*/ (0, $10ngl$react).isValidElement($el)) {
|
|
769
|
+
const $elProps = {
|
|
770
|
+
...$el.props
|
|
771
|
+
};
|
|
772
|
+
allProps.className += " " + ($elProps.className || "");
|
|
773
|
+
delete $elProps.className;
|
|
774
|
+
return /*#__PURE__*/ (0, $10ngl$react).cloneElement($el, {
|
|
775
|
+
...allProps,
|
|
776
|
+
...$elProps
|
|
777
|
+
}, ...(0, $10ngl$react).Children.toArray(children) || []);
|
|
778
|
+
}
|
|
779
|
+
return /*#__PURE__*/ (0, $10ngl$react).createElement($el, allProps, children);
|
|
780
|
+
}
|
|
781
|
+
const $f0f9a06cd0a8737d$var$Stylix = /*#__PURE__*/ (0, $10ngl$react).forwardRef($f0f9a06cd0a8737d$export$7204462c24cfcb17);
|
|
782
|
+
$f0f9a06cd0a8737d$var$Stylix.displayName = "Stylix";
|
|
783
|
+
$f0f9a06cd0a8737d$var$Stylix.__isStylix = true;
|
|
784
|
+
var $f0f9a06cd0a8737d$export$2e2bcd8739ae039 = $f0f9a06cd0a8737d$var$Stylix;
|
|
785
|
+
|
|
786
|
+
|
|
787
|
+
function $16478fb0e7f34cc6$export$3817b7a54a07cec7($el, addProps, conflictingPropMapping) {
|
|
788
|
+
const Element = typeof $el === "string" ? $el : /*#__PURE__*/ (0, $10ngl$react).forwardRef($el);
|
|
789
|
+
const r = /*#__PURE__*/ (0, $10ngl$react).forwardRef((props, ref)=>{
|
|
790
|
+
if (conflictingPropMapping) for(const k in conflictingPropMapping){
|
|
791
|
+
props[conflictingPropMapping[k]] = props[k];
|
|
792
|
+
delete props[k];
|
|
793
|
+
}
|
|
794
|
+
return (0, $f0f9a06cd0a8737d$export$7204462c24cfcb17)({
|
|
795
|
+
$el: Element,
|
|
796
|
+
...addProps,
|
|
797
|
+
...props,
|
|
798
|
+
$css: [
|
|
799
|
+
addProps?.$css,
|
|
800
|
+
props?.$css
|
|
801
|
+
]
|
|
802
|
+
}, ref);
|
|
803
|
+
});
|
|
804
|
+
r.displayName = `$.${$el.displayName || $el.name || $el.toString?.() || "Unnamed"}`;
|
|
805
|
+
r.__isStylix = true;
|
|
806
|
+
return r;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
|
|
810
|
+
var $eb2e36190d5b65c2$exports = {};
|
|
811
|
+
$eb2e36190d5b65c2$exports = JSON.parse('["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","math","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rb","rp","rt","rtc","ruby","s","samp","script","section","select","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"]');
|
|
812
|
+
|
|
813
|
+
|
|
814
|
+
|
|
815
|
+
|
|
816
|
+
for(const i in 0, (/*@__PURE__*/$parcel$interopDefault($eb2e36190d5b65c2$exports))){
|
|
817
|
+
// Types are specified in ./types.ts, so we don't care what they type of htmlTags[i] is.
|
|
818
|
+
// JSX.IntrinsicElements is a union of all HTML tags, so it is too complex for TypeScript to infer.
|
|
819
|
+
const tag = (0, (/*@__PURE__*/$parcel$interopDefault($eb2e36190d5b65c2$exports)))[i];
|
|
820
|
+
(0, $f0f9a06cd0a8737d$export$2e2bcd8739ae039)[tag] = (0, $16478fb0e7f34cc6$export$3817b7a54a07cec7)(tag);
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
|
|
824
|
+
|
|
825
|
+
|
|
826
|
+
|
|
827
|
+
export {$ce69b86a5144edcd$export$e3c6fdf4e371f028 as useStylixContext, $ce69b86a5144edcd$export$c01a354187f160ee as useStylixTheme, $ce69b86a5144edcd$export$ae2c3ad5c234c4cc as StylixProvider, $ce69b86a5144edcd$export$91c80431af53fbc7 as StylixTheme, $785bd247a0dbd828$export$28e6b9b82ee883c as useStyles, $785bd247a0dbd828$export$f3922bb611b91373 as useKeyframes, $785bd247a0dbd828$export$abac79b9db5ae47b as useGlobalStyles, $79720bf00c08b491$export$b5ecb47695d6786e as defaultPlugins, $61d992b103afb529$export$95cef81be5ddcfd4 as customProps, $aaadd42d89c94302$export$72ae87c5302f282e as mapObjectRecursive, $b14b1781b09bbb5d$export$a8d8e56b740dab80 as walkRecursive, $98cf2ff196b5431f$export$d3207b3764661c07 as createStyleCollector, $98cf2ff196b5431f$export$9b609b8e22cde6fe as styleCollectorContext, $3ff9dea9e2b78201$export$54b296e95917282f as classifyProps, $3ff9dea9e2b78201$export$34c29a98f3a9910 as useClassifyProps, $16478fb0e7f34cc6$export$3817b7a54a07cec7 as styled, $f0f9a06cd0a8737d$export$2e2bcd8739ae039 as default};
|
|
828
|
+
//# sourceMappingURL=module.mjs.map
|