@react-spectrum/s2 0.10.1 → 0.11.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/ComboBox.cjs +19 -4
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +19 -4
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/DatePicker.cjs +2 -5
- package/dist/DatePicker.cjs.map +1 -1
- package/dist/DatePicker.css.map +1 -1
- package/dist/DatePicker.mjs +2 -5
- package/dist/DatePicker.mjs.map +1 -1
- package/dist/DateRangePicker.cjs +2 -5
- package/dist/DateRangePicker.cjs.map +1 -1
- package/dist/DateRangePicker.css.map +1 -1
- package/dist/DateRangePicker.mjs +2 -5
- package/dist/DateRangePicker.mjs.map +1 -1
- package/dist/SelectBoxGroup.cjs +342 -0
- package/dist/SelectBoxGroup.cjs.map +1 -0
- package/dist/SelectBoxGroup.css +503 -0
- package/dist/SelectBoxGroup.css.map +1 -0
- package/dist/SelectBoxGroup.mjs +335 -0
- package/dist/SelectBoxGroup.mjs.map +1 -0
- package/dist/SkeletonCollection.cjs +6 -1
- package/dist/SkeletonCollection.cjs.map +1 -1
- package/dist/SkeletonCollection.mjs +7 -2
- package/dist/SkeletonCollection.mjs.map +1 -1
- package/dist/Tabs.cjs +102 -77
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +8 -4
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +102 -77
- package/dist/Tabs.mjs.map +1 -1
- package/dist/main.cjs +5 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +43 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +21 -21
- package/src/ComboBox.tsx +20 -5
- package/src/DatePicker.tsx +1 -7
- package/src/DateRangePicker.tsx +1 -7
- package/src/SelectBoxGroup.tsx +408 -0
- package/src/SkeletonCollection.tsx +6 -2
- package/src/Tabs.tsx +49 -24
- package/src/index.ts +2 -0
- package/style/dist/main.cjs +24 -24
- package/style/dist/module.mjs +13 -13
- package/style/dist/properties.mjs +3 -3
- package/style/dist/spectrum-theme.cjs +219 -219
- package/style/dist/spectrum-theme.mjs +210 -210
- package/style/dist/style-macro.cjs +80 -80
- package/style/dist/style-macro.mjs +75 -75
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
1
|
+
var $438b0917ac1d1d15$exports = require("./properties.cjs");
|
|
2
|
+
var $3vv3L$path = require("path");
|
|
3
|
+
var $3vv3L$fs = require("fs");
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
function $parcel$interopDefault(a) {
|
|
@@ -11,13 +11,13 @@ function $parcel$export(e, n, v, s) {
|
|
|
11
11
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
$parcel$export(module.exports, "ArbitraryProperty", () => $
|
|
15
|
-
$parcel$export(module.exports, "MappedProperty", () => $
|
|
16
|
-
$parcel$export(module.exports, "PercentageProperty", () => $
|
|
17
|
-
$parcel$export(module.exports, "SizingProperty", () => $
|
|
18
|
-
$parcel$export(module.exports, "ExpandedProperty", () => $
|
|
19
|
-
$parcel$export(module.exports, "parseArbitraryValue", () => $
|
|
20
|
-
$parcel$export(module.exports, "createTheme", () => $
|
|
14
|
+
$parcel$export(module.exports, "ArbitraryProperty", () => $39b83c690be83e1d$export$d03475ad9df06cd2);
|
|
15
|
+
$parcel$export(module.exports, "MappedProperty", () => $39b83c690be83e1d$export$965169194d2485f7);
|
|
16
|
+
$parcel$export(module.exports, "PercentageProperty", () => $39b83c690be83e1d$export$6bff0717a72a8669);
|
|
17
|
+
$parcel$export(module.exports, "SizingProperty", () => $39b83c690be83e1d$export$8c6b4dc3755476bb);
|
|
18
|
+
$parcel$export(module.exports, "ExpandedProperty", () => $39b83c690be83e1d$export$1b6028cfca42adca);
|
|
19
|
+
$parcel$export(module.exports, "parseArbitraryValue", () => $39b83c690be83e1d$export$22a8270399010c94);
|
|
20
|
+
$parcel$export(module.exports, "createTheme", () => $39b83c690be83e1d$export$25d302a5b900a763);
|
|
21
21
|
/*
|
|
22
22
|
* Copyright 2024 Adobe. All rights reserved.
|
|
23
23
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -31,11 +31,11 @@ $parcel$export(module.exports, "createTheme", () => $1382b9520f7f9773$export$25d
|
|
|
31
31
|
*/
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
var $
|
|
34
|
+
var $39b83c690be83e1d$var$$parcel$__dirname = $3vv3L$path.resolve(__dirname, "..");
|
|
35
35
|
// Postfix all class names with version for now.
|
|
36
|
-
const $
|
|
37
|
-
const $
|
|
38
|
-
class $
|
|
36
|
+
const $39b83c690be83e1d$var$json = JSON.parse((0, ($parcel$interopDefault($3vv3L$fs))).readFileSync($39b83c690be83e1d$var$$parcel$__dirname + '/../package.json', 'utf8'));
|
|
37
|
+
const $39b83c690be83e1d$var$POSTFIX = $39b83c690be83e1d$var$json.version.includes('nightly') ? $39b83c690be83e1d$var$json.version.match(/-nightly-(.*)/)[1] : $39b83c690be83e1d$var$json.version.replace(/[0.]/g, '');
|
|
38
|
+
class $39b83c690be83e1d$export$d03475ad9df06cd2 {
|
|
39
39
|
constructor(property, toCSS){
|
|
40
40
|
this.property = property;
|
|
41
41
|
this.toCSS = toCSS || ((value)=>String(value));
|
|
@@ -49,14 +49,14 @@ class $1382b9520f7f9773$export$d03475ad9df06cd2 {
|
|
|
49
49
|
return this.toCSS(value);
|
|
50
50
|
}
|
|
51
51
|
toCSSProperties(customProperty, value) {
|
|
52
|
-
return $
|
|
52
|
+
return $39b83c690be83e1d$var$mapConditionalValue(value, (value)=>[
|
|
53
53
|
{
|
|
54
54
|
[customProperty || this.property]: String(value)
|
|
55
55
|
}
|
|
56
56
|
]);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
class $
|
|
59
|
+
class $39b83c690be83e1d$export$965169194d2485f7 extends $39b83c690be83e1d$export$d03475ad9df06cd2 {
|
|
60
60
|
constructor(property, mapping){
|
|
61
61
|
super(property);
|
|
62
62
|
this.mapping = mapping;
|
|
@@ -72,15 +72,15 @@ class $1382b9520f7f9773$export$965169194d2485f7 extends $1382b9520f7f9773$export
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
class $
|
|
75
|
+
class $39b83c690be83e1d$export$40ae678e65d951f2 extends $39b83c690be83e1d$export$965169194d2485f7 {
|
|
76
76
|
toCSSValue(value) {
|
|
77
77
|
let [color, opacity] = value.split('/');
|
|
78
|
-
return $
|
|
78
|
+
return $39b83c690be83e1d$var$mapConditionalValue(this.mapping[color], (value)=>{
|
|
79
79
|
return opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
class $
|
|
83
|
+
class $39b83c690be83e1d$export$6bff0717a72a8669 extends $39b83c690be83e1d$export$965169194d2485f7 {
|
|
84
84
|
constructor(property, mapping){
|
|
85
85
|
super(property, mapping);
|
|
86
86
|
}
|
|
@@ -89,7 +89,7 @@ class $1382b9520f7f9773$export$6bff0717a72a8669 extends $1382b9520f7f9773$export
|
|
|
89
89
|
return super.toCSSValue(value);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
class $
|
|
92
|
+
class $39b83c690be83e1d$export$8c6b4dc3755476bb extends $39b83c690be83e1d$export$6bff0717a72a8669 {
|
|
93
93
|
constructor(property, mapping, numberToCSS){
|
|
94
94
|
super(property, mapping);
|
|
95
95
|
this.numberToCSS = numberToCSS;
|
|
@@ -99,12 +99,12 @@ class $1382b9520f7f9773$export$8c6b4dc3755476bb extends $1382b9520f7f9773$export
|
|
|
99
99
|
return super.toCSSValue(value);
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
class $
|
|
102
|
+
class $39b83c690be83e1d$export$1b6028cfca42adca {
|
|
103
103
|
constructor(properties, expand, mapping){
|
|
104
104
|
this.cssProperties = properties;
|
|
105
105
|
this.expand = expand;
|
|
106
|
-
if (mapping instanceof $
|
|
107
|
-
else if (mapping) this.mapping = new $
|
|
106
|
+
if (mapping instanceof $39b83c690be83e1d$export$965169194d2485f7) this.mapping = mapping;
|
|
107
|
+
else if (mapping) this.mapping = new $39b83c690be83e1d$export$965169194d2485f7(properties[0], mapping);
|
|
108
108
|
else this.mapping = null;
|
|
109
109
|
}
|
|
110
110
|
toCSSValue(value) {
|
|
@@ -113,23 +113,23 @@ class $1382b9520f7f9773$export$1b6028cfca42adca {
|
|
|
113
113
|
}
|
|
114
114
|
toCSSProperties(customProperty, value) {
|
|
115
115
|
if (customProperty) throw new Error('Style properties that expand into multiple CSS properties cannot be set as CSS variables.');
|
|
116
|
-
return $
|
|
116
|
+
return $39b83c690be83e1d$var$mapConditionalValue(value, (value)=>[
|
|
117
117
|
this.expand(value)
|
|
118
118
|
]);
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
|
-
function $
|
|
121
|
+
function $39b83c690be83e1d$var$mapConditionalValue(value, fn) {
|
|
122
122
|
if (typeof value === 'object' && !Array.isArray(value)) {
|
|
123
123
|
let res = {};
|
|
124
|
-
for(let condition in value)res[condition] = $
|
|
124
|
+
for(let condition in value)res[condition] = $39b83c690be83e1d$var$mapConditionalValue(value[condition], fn);
|
|
125
125
|
return res;
|
|
126
126
|
} else return fn(value);
|
|
127
127
|
}
|
|
128
|
-
function $
|
|
128
|
+
function $39b83c690be83e1d$var$mapConditionalShorthand(value, fn) {
|
|
129
129
|
if (typeof value === 'object') {
|
|
130
130
|
let res = {};
|
|
131
131
|
for(let condition in value){
|
|
132
|
-
let properties = $
|
|
132
|
+
let properties = $39b83c690be83e1d$var$mapConditionalShorthand(value[condition], fn);
|
|
133
133
|
for(let property in properties){
|
|
134
134
|
res[property] ??= {};
|
|
135
135
|
res[property][condition] = properties[property];
|
|
@@ -138,21 +138,21 @@ function $1382b9520f7f9773$var$mapConditionalShorthand(value, fn) {
|
|
|
138
138
|
return res;
|
|
139
139
|
} else return fn(value);
|
|
140
140
|
}
|
|
141
|
-
function $
|
|
141
|
+
function $39b83c690be83e1d$export$22a8270399010c94(value) {
|
|
142
142
|
if (typeof value === 'string' && value.startsWith('--')) return `var(${value})`;
|
|
143
143
|
else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') return value.slice(1, -1);
|
|
144
144
|
else if (typeof value === 'string' && (/^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) || /^(inherit|initial|unset)$/.test(value))) return value;
|
|
145
145
|
}
|
|
146
|
-
function $
|
|
147
|
-
return $
|
|
146
|
+
function $39b83c690be83e1d$var$shortCSSPropertyName(property) {
|
|
147
|
+
return $438b0917ac1d1d15$exports.properties[property] ?? $39b83c690be83e1d$var$generateArbitraryValueSelector(property, true);
|
|
148
148
|
}
|
|
149
|
-
function $
|
|
150
|
-
let className = $
|
|
149
|
+
function $39b83c690be83e1d$var$classNamePrefix(property, cssProperty) {
|
|
150
|
+
let className = $438b0917ac1d1d15$exports.properties[cssProperty];
|
|
151
151
|
if (className && property === '--' + className) return '-' + className + '_-';
|
|
152
152
|
if (className && !property.startsWith('--')) return className;
|
|
153
|
-
return '-' + $
|
|
153
|
+
return '-' + $39b83c690be83e1d$var$generateArbitraryValueSelector(property, true) + '-';
|
|
154
154
|
}
|
|
155
|
-
function $
|
|
155
|
+
function $39b83c690be83e1d$export$25d302a5b900a763(theme) {
|
|
156
156
|
let properties = new Map(Object.entries(theme.properties).map(([k, v])=>{
|
|
157
157
|
if (!Array.isArray(v) && v.cssProperties) return [
|
|
158
158
|
k,
|
|
@@ -160,7 +160,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
160
160
|
];
|
|
161
161
|
return [
|
|
162
162
|
k,
|
|
163
|
-
new $
|
|
163
|
+
new $39b83c690be83e1d$export$965169194d2485f7(k, v)
|
|
164
164
|
];
|
|
165
165
|
}));
|
|
166
166
|
let dependencies = new Set();
|
|
@@ -179,7 +179,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
179
179
|
let usedPriorities = 0;
|
|
180
180
|
let setRules = (key, value)=>{
|
|
181
181
|
usedPriorities = Math.max(usedPriorities, value[0]);
|
|
182
|
-
rules.set(key, new $
|
|
182
|
+
rules.set(key, new $39b83c690be83e1d$var$GroupRule(value[1]));
|
|
183
183
|
};
|
|
184
184
|
hasConditions = false;
|
|
185
185
|
for(let key in style){
|
|
@@ -195,7 +195,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
195
195
|
if (theme.shorthands[key]) {
|
|
196
196
|
let shorthand = theme.shorthands[key];
|
|
197
197
|
if (typeof shorthand === 'function') {
|
|
198
|
-
let expanded = $
|
|
198
|
+
let expanded = $39b83c690be83e1d$var$mapConditionalShorthand(value, shorthand);
|
|
199
199
|
for(let k in expanded){
|
|
200
200
|
let v = expanded[k];
|
|
201
201
|
values.set(k, v);
|
|
@@ -214,7 +214,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
214
214
|
if (value != null) {
|
|
215
215
|
if (!(dep in theme.properties)) throw new Error(`Unknown dependency ${dep}`);
|
|
216
216
|
let prop = properties.get(dep);
|
|
217
|
-
let name = `--${$
|
|
217
|
+
let name = `--${$39b83c690be83e1d$var$shortCSSPropertyName(prop.cssProperties[0])}`;
|
|
218
218
|
// Could potentially use @property to prevent the var from inheriting in children.
|
|
219
219
|
setRules(name, compileValue(name, dep, value));
|
|
220
220
|
setRules(dep, compileValue(dep, dep, name));
|
|
@@ -228,7 +228,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
228
228
|
for(let i = 0; i <= usedPriorities; i++){
|
|
229
229
|
if (first) first = false;
|
|
230
230
|
else css += ', ';
|
|
231
|
-
css += $
|
|
231
|
+
css += $39b83c690be83e1d$var$layerName($39b83c690be83e1d$var$generateName(i, true));
|
|
232
232
|
}
|
|
233
233
|
css += ';\n\n';
|
|
234
234
|
// If allowed overrides are provided, generate code to match the input override string and include only allowed classes.
|
|
@@ -257,13 +257,13 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
257
257
|
let prop = properties.get(property);
|
|
258
258
|
if (prop) {
|
|
259
259
|
for (let property of prop.cssProperties)if (property && allowedOverridesSet.has(property)) {
|
|
260
|
-
let selector = $
|
|
260
|
+
let selector = $39b83c690be83e1d$var$classNamePrefix(property, property);
|
|
261
261
|
let p = property.replace('--', '__');
|
|
262
262
|
js += `let ${p} = false;\n`;
|
|
263
263
|
loop += ` if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
|
|
264
264
|
}
|
|
265
265
|
} else if (property.startsWith('--') && allowedOverridesSet.has(property)) {
|
|
266
|
-
let selector = $
|
|
266
|
+
let selector = $39b83c690be83e1d$var$classNamePrefix(property, property);
|
|
267
267
|
let p = property.replace('--', '__');
|
|
268
268
|
js += `let ${p} = false;\n`;
|
|
269
269
|
loop += ` if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
|
|
@@ -271,7 +271,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
271
271
|
}
|
|
272
272
|
let regex = `/(?:^|\\s)(${[
|
|
273
273
|
...allowedOverridesSet
|
|
274
|
-
].map((p)=>$
|
|
274
|
+
].map((p)=>$39b83c690be83e1d$var$classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
|
|
275
275
|
if (loop) {
|
|
276
276
|
js += `let matches = (overrides || '').matchAll(${regex});\n`;
|
|
277
277
|
js += 'for (let p of matches) {\n';
|
|
@@ -284,14 +284,14 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
284
284
|
let isStatic = !(hasConditions || allowedOverrides);
|
|
285
285
|
let className = '';
|
|
286
286
|
let rulesByLayer = new Map();
|
|
287
|
-
let rootRule = new $
|
|
287
|
+
let rootRule = new $39b83c690be83e1d$var$GroupRule([
|
|
288
288
|
...rules.values()
|
|
289
289
|
]);
|
|
290
290
|
if (isStatic) className += rootRule.getStaticClassName();
|
|
291
291
|
else js += rootRule.toJS(allowedOverridesSet) + '\n';
|
|
292
292
|
rootRule.toCSS(rulesByLayer);
|
|
293
293
|
for (let [layer, rules] of rulesByLayer){
|
|
294
|
-
css += `@layer ${$
|
|
294
|
+
css += `@layer ${$39b83c690be83e1d$var$layerName(layer)} {\n`;
|
|
295
295
|
css += rules.join('\n\n');
|
|
296
296
|
css += '}\n\n';
|
|
297
297
|
}
|
|
@@ -331,7 +331,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
331
331
|
// The @layer order in the generated CSS will ensure that it overrides classes applied by runtime conditions.
|
|
332
332
|
let isCSSCondition = condition in theme.conditions || /^[@:]/.test(condition);
|
|
333
333
|
if (!wasCSSCondition && isCSSCondition && rules.length) rules = [
|
|
334
|
-
new $
|
|
334
|
+
new $39b83c690be83e1d$var$GroupRule(rules)
|
|
335
335
|
];
|
|
336
336
|
wasCSSCondition = isCSSCondition;
|
|
337
337
|
// Increment the current priority whenever we see a new CSS condition.
|
|
@@ -363,7 +363,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
363
363
|
}
|
|
364
364
|
function compileCondition(conditions, condition, priority, rules) {
|
|
365
365
|
if (condition === 'default' || conditions.has(condition)) return [
|
|
366
|
-
new $
|
|
366
|
+
new $39b83c690be83e1d$var$GroupRule(rules)
|
|
367
367
|
];
|
|
368
368
|
if (condition in theme.conditions || /^[@:]/.test(condition)) {
|
|
369
369
|
// Conditions starting with : are CSS pseudo classes. Nest them inside the parent rule.
|
|
@@ -371,27 +371,27 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
371
371
|
if (prelude.startsWith(':')) {
|
|
372
372
|
for (let rule of rules)rule.addPseudo(prelude);
|
|
373
373
|
return [
|
|
374
|
-
new $
|
|
374
|
+
new $39b83c690be83e1d$var$GroupRule(rules, $39b83c690be83e1d$var$generateName(priority, true))
|
|
375
375
|
];
|
|
376
376
|
}
|
|
377
377
|
// Otherwise, wrap the rule in the condition (e.g. @media).
|
|
378
378
|
// Top level layer is based on the priority of the rule, not the condition.
|
|
379
379
|
// Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
|
|
380
|
-
let layer = `${$
|
|
380
|
+
let layer = `${$39b83c690be83e1d$var$generateName(priority, true)}.${$438b0917ac1d1d15$exports.conditions[theme.conditions[condition] || condition] || $39b83c690be83e1d$var$generateArbitraryValueSelector(condition, true)}`;
|
|
381
381
|
return [
|
|
382
|
-
new $
|
|
382
|
+
new $39b83c690be83e1d$var$AtRule(rules, prelude, layer)
|
|
383
383
|
];
|
|
384
384
|
}
|
|
385
385
|
hasConditions = true;
|
|
386
386
|
return [
|
|
387
|
-
new $
|
|
387
|
+
new $39b83c690be83e1d$var$ConditionalRule(rules, condition)
|
|
388
388
|
];
|
|
389
389
|
}
|
|
390
390
|
function compileRule(property, themeProperty, value, priority, conditions, skipConditions) {
|
|
391
391
|
let propertyFunction = properties.get(themeProperty);
|
|
392
392
|
if (propertyFunction) {
|
|
393
393
|
// Expand value to conditional CSS values, and then to rules.
|
|
394
|
-
let arbitrary = $
|
|
394
|
+
let arbitrary = $39b83c690be83e1d$export$22a8270399010c94(value);
|
|
395
395
|
let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
|
|
396
396
|
let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
|
|
397
397
|
return conditionalToRules(cssProperties, priority, conditions, skipConditions, (value, priority, conditions)=>{
|
|
@@ -408,17 +408,17 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
408
408
|
let cssProperties = prop.cssProperties;
|
|
409
409
|
if (cssProperties.length !== 1) throw new Error(`self(${v}) is not supported. ${v} expands to multiple CSS properties.`);
|
|
410
410
|
dependencies.add(v);
|
|
411
|
-
return `var(--${$
|
|
411
|
+
return `var(--${$39b83c690be83e1d$var$shortCSSPropertyName(cssProperties[0])}`;
|
|
412
412
|
});
|
|
413
413
|
// Generate selector. This consists of three parts: property, conditions, value.
|
|
414
414
|
let cssProperty = key;
|
|
415
415
|
if (property.startsWith('--')) cssProperty = propertyFunction.cssProperties[0];
|
|
416
|
-
let className = $
|
|
417
|
-
if (conditions.size > 0) for (let condition of conditions)className += $
|
|
418
|
-
if (cssProperty !== key) className += $
|
|
419
|
-
className += $
|
|
420
|
-
className += $
|
|
421
|
-
rules.push(new $
|
|
416
|
+
let className = $39b83c690be83e1d$var$classNamePrefix(key, cssProperty);
|
|
417
|
+
if (conditions.size > 0) for (let condition of conditions)className += $438b0917ac1d1d15$exports.conditions[theme.conditions[condition] || condition] || $39b83c690be83e1d$var$generateArbitraryValueSelector(condition);
|
|
418
|
+
if (cssProperty !== key) className += $39b83c690be83e1d$var$shortCSSPropertyName(cssProperty);
|
|
419
|
+
className += $438b0917ac1d1d15$exports.values[cssProperty]?.[String(value)] ?? $39b83c690be83e1d$var$generateArbitraryValueSelector(String(value));
|
|
420
|
+
className += $39b83c690be83e1d$var$POSTFIX;
|
|
421
|
+
rules.push(new $39b83c690be83e1d$var$StyleRule(className, key, String(value)));
|
|
422
422
|
}
|
|
423
423
|
return [
|
|
424
424
|
0,
|
|
@@ -428,7 +428,7 @@ function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
|
|
|
428
428
|
} else throw new Error('Unknown property ' + themeProperty);
|
|
429
429
|
}
|
|
430
430
|
}
|
|
431
|
-
function $
|
|
431
|
+
function $39b83c690be83e1d$var$kebab(property) {
|
|
432
432
|
if (property.startsWith('--')) return property;
|
|
433
433
|
return property.replace(/([a-z])([A-Z])/g, (_, a, b)=>`${a}-${b.toLowerCase()}`);
|
|
434
434
|
}
|
|
@@ -436,44 +436,44 @@ function $1382b9520f7f9773$var$kebab(property) {
|
|
|
436
436
|
// This maps to an alphabet containing lower case letters, upper case letters, and numbers.
|
|
437
437
|
// For numbers larger than 62, an underscore is prepended.
|
|
438
438
|
// This encoding allows easy parsing to enable runtime merging by property.
|
|
439
|
-
function $
|
|
439
|
+
function $39b83c690be83e1d$var$generateName(index, atStart = false) {
|
|
440
440
|
if (index < 26) // lower case letters
|
|
441
441
|
return String.fromCharCode(index + 97);
|
|
442
442
|
if (index < 52) // upper case letters
|
|
443
443
|
return String.fromCharCode(index - 26 + 65);
|
|
444
444
|
if (index < 62 && !atStart) // numbers
|
|
445
445
|
return String.fromCharCode(index - 52 + 48);
|
|
446
|
-
return '_' + $
|
|
446
|
+
return '_' + $39b83c690be83e1d$var$generateName(index - (atStart ? 52 : 62));
|
|
447
447
|
}
|
|
448
448
|
// For arbitrary values, we use a hash of the string to generate the class name.
|
|
449
|
-
function $
|
|
450
|
-
let c = $
|
|
449
|
+
function $39b83c690be83e1d$var$generateArbitraryValueSelector(v, atStart = false) {
|
|
450
|
+
let c = $39b83c690be83e1d$var$toBase62($39b83c690be83e1d$var$hash(v));
|
|
451
451
|
if (atStart && /^[0-9]/.test(c)) c = `_${c}`;
|
|
452
452
|
return c;
|
|
453
453
|
}
|
|
454
|
-
function $
|
|
455
|
-
if (value === 0) return $
|
|
454
|
+
function $39b83c690be83e1d$var$toBase62(value) {
|
|
455
|
+
if (value === 0) return $39b83c690be83e1d$var$generateName(value);
|
|
456
456
|
let res = '';
|
|
457
457
|
while(value){
|
|
458
458
|
let remainder = value % 62;
|
|
459
|
-
res += $
|
|
459
|
+
res += $39b83c690be83e1d$var$generateName(remainder);
|
|
460
460
|
value = Math.floor((value - remainder) / 62);
|
|
461
461
|
}
|
|
462
462
|
return res;
|
|
463
463
|
}
|
|
464
464
|
// djb2 hash function.
|
|
465
465
|
// http://www.cse.yorku.ca/~oz/hash.html
|
|
466
|
-
function $
|
|
466
|
+
function $39b83c690be83e1d$var$hash(v) {
|
|
467
467
|
let hash = 5381;
|
|
468
468
|
for(let i = 0; i < v.length; i++)hash = (hash << 5) + hash + v.charCodeAt(i) >>> 0;
|
|
469
469
|
return hash;
|
|
470
470
|
}
|
|
471
|
-
function $
|
|
471
|
+
function $39b83c690be83e1d$var$layerName(name) {
|
|
472
472
|
// All of our layers should be sub-layers of a single parent layer, so that
|
|
473
473
|
// the unsafe overrides layer always comes after.
|
|
474
474
|
return `_.${name}`;
|
|
475
475
|
}
|
|
476
|
-
/** A CSS style rule. */ class $
|
|
476
|
+
/** A CSS style rule. */ class $39b83c690be83e1d$var$StyleRule {
|
|
477
477
|
constructor(className, property, value){
|
|
478
478
|
this.className = className;
|
|
479
479
|
this.pseudos = '';
|
|
@@ -494,7 +494,7 @@ function $1382b9520f7f9773$var$layerName(name) {
|
|
|
494
494
|
preludes.forEach((p, i)=>{
|
|
495
495
|
content += `${p} {\n${' '.repeat((i + 2) * 2)}`;
|
|
496
496
|
});
|
|
497
|
-
content += `${$
|
|
497
|
+
content += `${$39b83c690be83e1d$var$kebab(this.property)}: ${this.value};\n`;
|
|
498
498
|
preludes.map((_, i)=>{
|
|
499
499
|
content += `${' '.repeat((preludes.length - i) * 2)}}\n`;
|
|
500
500
|
});
|
|
@@ -514,7 +514,7 @@ function $1382b9520f7f9773$var$layerName(name) {
|
|
|
514
514
|
return res;
|
|
515
515
|
}
|
|
516
516
|
}
|
|
517
|
-
/** Base class for rules that contain other rules. */ class $
|
|
517
|
+
/** Base class for rules that contain other rules. */ class $39b83c690be83e1d$var$GroupRule {
|
|
518
518
|
constructor(rules, layer){
|
|
519
519
|
this.rules = rules;
|
|
520
520
|
this.layer = layer ?? null;
|
|
@@ -530,16 +530,16 @@ function $1382b9520f7f9773$var$layerName(name) {
|
|
|
530
530
|
}
|
|
531
531
|
toJS(allowedOverridesSet, indent = '') {
|
|
532
532
|
let rules = this.rules.slice();
|
|
533
|
-
let conditional = rules.filter((rule)=>rule instanceof $
|
|
533
|
+
let conditional = rules.filter((rule)=>rule instanceof $39b83c690be83e1d$var$ConditionalRule).reverse().map((rule, i)=>{
|
|
534
534
|
return `${i > 0 ? ' else ' : ''}${rule.toJS(allowedOverridesSet, indent)}`;
|
|
535
535
|
});
|
|
536
|
-
let elseCases = rules.filter((rule)=>!(rule instanceof $
|
|
536
|
+
let elseCases = rules.filter((rule)=>!(rule instanceof $39b83c690be83e1d$var$ConditionalRule)).map((rule)=>rule.toJS(allowedOverridesSet, indent));
|
|
537
537
|
if (conditional.length && elseCases.length) return `${conditional.join('')} else {\n${indent} ${elseCases.join('\n' + indent + ' ')}\n${indent}}`;
|
|
538
538
|
if (conditional.length) return conditional.join('');
|
|
539
539
|
return elseCases.join('\n' + indent);
|
|
540
540
|
}
|
|
541
541
|
}
|
|
542
|
-
/** A rule that applies conditionally in CSS (e.g. @media). */ class $
|
|
542
|
+
/** A rule that applies conditionally in CSS (e.g. @media). */ class $39b83c690be83e1d$var$AtRule extends $39b83c690be83e1d$var$GroupRule {
|
|
543
543
|
constructor(rules, prelude, layer){
|
|
544
544
|
super(rules, layer);
|
|
545
545
|
this.prelude = prelude;
|
|
@@ -550,7 +550,7 @@ function $1382b9520f7f9773$var$layerName(name) {
|
|
|
550
550
|
preludes?.pop();
|
|
551
551
|
}
|
|
552
552
|
}
|
|
553
|
-
/** A rule that applies conditionally at runtime. */ class $
|
|
553
|
+
/** A rule that applies conditionally at runtime. */ class $39b83c690be83e1d$var$ConditionalRule extends $39b83c690be83e1d$var$GroupRule {
|
|
554
554
|
constructor(rules, condition){
|
|
555
555
|
super(rules);
|
|
556
556
|
this.condition = condition;
|
|
@@ -562,14 +562,14 @@ function $1382b9520f7f9773$var$layerName(name) {
|
|
|
562
562
|
return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + ' ')}\n${indent}}`;
|
|
563
563
|
}
|
|
564
564
|
}
|
|
565
|
-
function $
|
|
565
|
+
function $39b83c690be83e1d$export$1776c186c69df29e(css, layer = '_.a') {
|
|
566
566
|
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
|
|
567
567
|
// We also check if this is globalThis, which happens in non-strict mode bundles.
|
|
568
568
|
// Also allow style to be called as a normal function in tests.
|
|
569
569
|
// @ts-ignore
|
|
570
570
|
// eslint-disable-next-line
|
|
571
571
|
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The raw macro must be imported with {type: "macro"}.');
|
|
572
|
-
let className = $
|
|
572
|
+
let className = $39b83c690be83e1d$var$generateArbitraryValueSelector(css, true);
|
|
573
573
|
css = `@layer ${layer} {
|
|
574
574
|
.${className} {
|
|
575
575
|
${css}
|
|
@@ -583,14 +583,14 @@ function $1382b9520f7f9773$export$1776c186c69df29e(css, layer = '_.a') {
|
|
|
583
583
|
});
|
|
584
584
|
return className;
|
|
585
585
|
}
|
|
586
|
-
function $
|
|
586
|
+
function $39b83c690be83e1d$export$d25ddfdf17c3ad3e(css) {
|
|
587
587
|
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
|
|
588
588
|
// We also check if this is globalThis, which happens in non-strict mode bundles.
|
|
589
589
|
// Also allow style to be called as a normal function in tests.
|
|
590
590
|
// @ts-ignore
|
|
591
591
|
// eslint-disable-next-line
|
|
592
592
|
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The keyframes macro must be imported with {type: "macro"}.');
|
|
593
|
-
let name = $
|
|
593
|
+
let name = $39b83c690be83e1d$var$generateArbitraryValueSelector(css, true);
|
|
594
594
|
css = `@keyframes ${name} {
|
|
595
595
|
${css}
|
|
596
596
|
}`;
|