@unocss/preset-mini 0.17.2 → 0.19.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/chunks/default2.cjs +128 -142
- package/dist/chunks/default2.mjs +130 -141
- package/dist/chunks/default3.cjs +40 -22
- package/dist/chunks/default3.mjs +41 -22
- package/dist/chunks/pseudo.cjs +54 -32
- package/dist/chunks/pseudo.mjs +54 -33
- package/dist/{colors-d6b5a5b4.d.ts → colors-6d634692.d.ts} +1 -1
- package/dist/colors.d.ts +2 -2
- package/dist/{default-c7c67d23.d.ts → default-958434b6.d.ts} +1 -1
- package/dist/index.cjs +12 -10
- package/dist/index.d.ts +14 -6
- package/dist/index.mjs +13 -11
- package/dist/rules.cjs +1 -4
- package/dist/rules.d.ts +3 -6
- package/dist/rules.mjs +1 -1
- package/dist/theme.d.ts +4 -4
- package/dist/{types-7963d0b3.d.ts → types-a2d2b52f.d.ts} +8 -1
- package/dist/utils.d.ts +1 -1
- package/dist/variants.cjs +3 -3
- package/dist/variants.d.ts +5 -5
- package/dist/variants.mjs +2 -2
- package/package.json +2 -2
package/dist/chunks/default2.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { toArray } from '@unocss/core';
|
|
1
|
+
import { h as handler, c as colorResolver$1, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
|
|
2
|
+
import { toArray, cacheFunction } from '@unocss/core';
|
|
3
3
|
import { C as CONTROL_BYPASS_PSEUDO_CLASS } from './pseudo.mjs';
|
|
4
4
|
|
|
5
5
|
const verticalAlignAlias = {
|
|
@@ -17,38 +17,12 @@ const textAligns = [
|
|
|
17
17
|
["text-justify", { "text-align": "justify" }]
|
|
18
18
|
];
|
|
19
19
|
|
|
20
|
-
const outlineStyle = ["auto", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "inherit", "initial", "revert", "unset"];
|
|
21
|
-
const parseOutlineSize = (s) => {
|
|
22
|
-
const propName = ["width", "offset"].find((item) => s.startsWith(item)) || "width";
|
|
23
|
-
const size = handler.bracket.fraction.auto.rem(s.replace(/^(offset\-|width\-|size\-)/, ""));
|
|
24
|
-
if (size) {
|
|
25
|
-
return {
|
|
26
|
-
[`outline-${propName}`]: size
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
20
|
const outline = [
|
|
21
|
+
[/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.fraction.auto.rem(d) })],
|
|
22
|
+
[/^outline-(?:color-)?(.+)$/, colorResolver$1("outline-color", "outline-color")],
|
|
23
|
+
[/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.fraction.auto.rem(d) })],
|
|
31
24
|
["outline", { "outline-style": "solid" }],
|
|
32
|
-
[
|
|
33
|
-
/^outline-(.+)$/,
|
|
34
|
-
(match, config) => {
|
|
35
|
-
const [, d] = match;
|
|
36
|
-
if (outlineStyle.includes(d)) {
|
|
37
|
-
return {
|
|
38
|
-
"outline-style": d
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
const colorSheet = colorResolver$1("outline-color", "outline-color")([
|
|
42
|
-
match[0],
|
|
43
|
-
match[1].replace(/^color-/, "")
|
|
44
|
-
], config);
|
|
45
|
-
if (colorSheet)
|
|
46
|
-
return colorSheet;
|
|
47
|
-
const sizeSheet = parseOutlineSize(d);
|
|
48
|
-
if (sizeSheet)
|
|
49
|
-
return sizeSheet;
|
|
50
|
-
}
|
|
51
|
-
],
|
|
25
|
+
[/^outline-(auto|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
|
|
52
26
|
["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
|
|
53
27
|
];
|
|
54
28
|
const appearance = [
|
|
@@ -57,21 +31,6 @@ const appearance = [
|
|
|
57
31
|
"-webkit-appearance": "none"
|
|
58
32
|
}]
|
|
59
33
|
];
|
|
60
|
-
const placeholder = [
|
|
61
|
-
[
|
|
62
|
-
/^placeholder-opacity-(\d+)$/,
|
|
63
|
-
([, d]) => ({
|
|
64
|
-
"placeholder-opacity": handler.bracket.percent(d)
|
|
65
|
-
})
|
|
66
|
-
],
|
|
67
|
-
[
|
|
68
|
-
/^placeholder-(?!opacity)(.+)$/,
|
|
69
|
-
(match, config) => {
|
|
70
|
-
match[1] = match[1].replace(/^color-/, "");
|
|
71
|
-
return colorResolver$1("placeholder-color", "placeholder-color")(match, config);
|
|
72
|
-
}
|
|
73
|
-
]
|
|
74
|
-
];
|
|
75
34
|
const willChange = [
|
|
76
35
|
[/^will-change-(.+)/, ([, p]) => ({ "will-change": handler.properties.global(p) })]
|
|
77
36
|
];
|
|
@@ -84,16 +43,59 @@ const borders = [
|
|
|
84
43
|
[/^(?:border|b)-([^-]+)-size-(.+)$/, handlerBorderSize],
|
|
85
44
|
[/^(?:border|b)()-(.+)$/, handlerBorderColor],
|
|
86
45
|
[/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
|
|
87
|
-
[/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({
|
|
46
|
+
[/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity], { options: { variablePrefix: p } }) => ({ [`--${p}border-opacity`]: handler.bracket.percent(opacity) })],
|
|
47
|
+
[/^(?:border|b)-([^-]+)-op(?:acity)?-?(.+)$/, ([, a, opacity], { options: { variablePrefix: p } }) => {
|
|
48
|
+
const v = handler.bracket.percent(opacity);
|
|
49
|
+
const d = directionMap[a];
|
|
50
|
+
if (v !== void 0 && d)
|
|
51
|
+
return d.map((i) => [`--${p}border${i}-opacity`, v]);
|
|
52
|
+
}],
|
|
53
|
+
[/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
|
|
54
|
+
[/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
|
|
55
|
+
[/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded],
|
|
88
56
|
["border-solid", { "border-style": "solid" }],
|
|
89
57
|
["border-dashed", { "border-style": "dashed" }],
|
|
90
58
|
["border-dotted", { "border-style": "dotted" }],
|
|
91
59
|
["border-double", { "border-style": "double" }],
|
|
92
|
-
["border-none", { "border-style": "none" }]
|
|
93
|
-
[/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
|
|
94
|
-
[/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
|
|
95
|
-
[/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded]
|
|
60
|
+
["border-none", { "border-style": "none" }]
|
|
96
61
|
];
|
|
62
|
+
const borderHasColor = (color, { theme }) => {
|
|
63
|
+
return color !== void 0 && !!parseColor(color, theme)?.color;
|
|
64
|
+
};
|
|
65
|
+
const borderColorResolver = (direction) => ([, body], { theme, options: { variablePrefix: p } }) => {
|
|
66
|
+
const data = parseColor(body, theme);
|
|
67
|
+
if (!data)
|
|
68
|
+
return;
|
|
69
|
+
const { opacity, color, rgba } = data;
|
|
70
|
+
if (!color)
|
|
71
|
+
return;
|
|
72
|
+
const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
|
|
73
|
+
if (rgba) {
|
|
74
|
+
if (a != null && !Number.isNaN(a)) {
|
|
75
|
+
rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
|
|
76
|
+
return {
|
|
77
|
+
[`border${direction}-color`]: `rgba(${rgba.join(",")})`
|
|
78
|
+
};
|
|
79
|
+
} else {
|
|
80
|
+
if (direction === "") {
|
|
81
|
+
return {
|
|
82
|
+
[`--${p}border-opacity`]: 1,
|
|
83
|
+
[`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--${p}border${direction}-opacity))`
|
|
84
|
+
};
|
|
85
|
+
} else {
|
|
86
|
+
return {
|
|
87
|
+
[`--${p}border-opacity`]: 1,
|
|
88
|
+
[`--${p}border${direction}-opacity`]: `var(--${p}border-opacity)`,
|
|
89
|
+
[`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--${p}border${direction}-opacity))`
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
} else {
|
|
94
|
+
return {
|
|
95
|
+
[`border${direction}-color`]: color.replace("%alpha", `${a || 1}`)
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
};
|
|
97
99
|
function handlerBorder(m) {
|
|
98
100
|
const borderSizes = handlerBorderSize(m);
|
|
99
101
|
if (borderSizes) {
|
|
@@ -110,8 +112,8 @@ function handlerBorderSize([, a, b]) {
|
|
|
110
112
|
return directionMap[d].map((i) => [`border${i}-width`, v]);
|
|
111
113
|
}
|
|
112
114
|
function handlerBorderColor([, a, c], ctx) {
|
|
113
|
-
if (
|
|
114
|
-
return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) =>
|
|
115
|
+
if (borderHasColor(c, ctx)) {
|
|
116
|
+
return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) => borderColorResolver(i)(["", c], ctx)));
|
|
115
117
|
}
|
|
116
118
|
}
|
|
117
119
|
function handlerRounded([, a, b], { theme }) {
|
|
@@ -132,18 +134,6 @@ const bgColors = [
|
|
|
132
134
|
[/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
|
|
133
135
|
[/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) })]
|
|
134
136
|
];
|
|
135
|
-
const borderColors = [
|
|
136
|
-
[/^(?:border|b)-(.+)$/, colorResolver$1("border-color", "border")],
|
|
137
|
-
[/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-border-opacity": handler.bracket.percent(opacity2) })]
|
|
138
|
-
];
|
|
139
|
-
const ringColors = [
|
|
140
|
-
[/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
|
|
141
|
-
[/^ring-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity2) })]
|
|
142
|
-
];
|
|
143
|
-
const ringOffsetColors = [
|
|
144
|
-
[/^ring-offset-(.+)$/, colorResolver$1("--un-ring-offset-color", "ring-offset")],
|
|
145
|
-
[/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-ring-offset-opacity": handler.bracket.percent(opacity2) })]
|
|
146
|
-
];
|
|
147
137
|
|
|
148
138
|
const transitionProperty = (prop) => {
|
|
149
139
|
return handler.properties(prop) || (prop === "all" ? prop : void 0);
|
|
@@ -181,7 +171,7 @@ const flex = [
|
|
|
181
171
|
["flex-auto", { flex: "1 1 auto" }],
|
|
182
172
|
["flex-initial", { flex: "0 1 auto" }],
|
|
183
173
|
["flex-none", { flex: "none" }],
|
|
184
|
-
[/^flex
|
|
174
|
+
[/^flex-(\[.+\])$/, ([, d]) => ({ flex: handler.bracket(d).replace(/\d+\/\d+/, ($1) => handler.fraction($1)) })],
|
|
185
175
|
["flex-shrink", { "flex-shrink": 1 }],
|
|
186
176
|
["flex-shrink-0", { "flex-shrink": 0 }],
|
|
187
177
|
["flex-grow", { "flex-grow": 1 }],
|
|
@@ -292,30 +282,17 @@ const textShadows = [
|
|
|
292
282
|
];
|
|
293
283
|
|
|
294
284
|
const gaps = [
|
|
295
|
-
[/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
|
|
296
|
-
const v = handler.bracket.auto.rem(s);
|
|
297
|
-
if (v != null) {
|
|
298
|
-
return {
|
|
299
|
-
"grid-gap": v,
|
|
300
|
-
"gap": v
|
|
301
|
-
};
|
|
302
|
-
}
|
|
303
|
-
}],
|
|
304
|
-
[/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
|
|
285
|
+
[/^(?:flex-|grid-)?gap-(x-|y-)?([^-]+)$/, ([, d = "", s]) => {
|
|
305
286
|
const v = handler.bracket.auto.rem(s);
|
|
306
287
|
if (v != null) {
|
|
288
|
+
const direction = {
|
|
289
|
+
"": "",
|
|
290
|
+
"x-": "column-",
|
|
291
|
+
"y-": "row-"
|
|
292
|
+
}[d];
|
|
307
293
|
return {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
};
|
|
311
|
-
}
|
|
312
|
-
}],
|
|
313
|
-
[/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
|
|
314
|
-
const v = handler.bracket.auto.rem(s);
|
|
315
|
-
if (v != null) {
|
|
316
|
-
return {
|
|
317
|
-
"grid-row-gap": v,
|
|
318
|
-
"row-gap": v
|
|
294
|
+
[`grid-${direction}gap`]: v,
|
|
295
|
+
[`${direction}gap`]: v
|
|
319
296
|
};
|
|
320
297
|
}
|
|
321
298
|
}]
|
|
@@ -349,7 +326,7 @@ const grids = [
|
|
|
349
326
|
if (parts[0] === "span") {
|
|
350
327
|
if (parts[1] === "full")
|
|
351
328
|
return { [key]: "1/-1" };
|
|
352
|
-
raw = handler.number.bracket(parts[1])
|
|
329
|
+
raw = handler.number.bracket(parts[1]);
|
|
353
330
|
if (raw)
|
|
354
331
|
return { [key]: `span ${raw}/span ${raw}` };
|
|
355
332
|
}
|
|
@@ -357,12 +334,12 @@ const grids = [
|
|
|
357
334
|
[/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": autoDirection(v, theme) })],
|
|
358
335
|
[/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": v.replace("col", "column").split("-").join(" ") })],
|
|
359
336
|
[/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": autoDirection(v, theme) })],
|
|
337
|
+
[/^grid-cols-(.+)$/, ([, v]) => ({ "grid-template-columns": handler.bracket(v) })],
|
|
338
|
+
[/^grid-rows-(.+)$/, ([, v]) => ({ "grid-template-rows": handler.bracket(v) })],
|
|
360
339
|
[/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill,minmax(${d},1fr))` })],
|
|
361
340
|
[/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill,minmax(${d},1fr))` })],
|
|
362
341
|
[/^grid-cols-(\d+)$/, ([, d]) => ({ "grid-template-columns": `repeat(${d},minmax(0,1fr))` })],
|
|
363
|
-
[/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })]
|
|
364
|
-
[/^grid-cols-\[(.+)\]$/, ([, v]) => ({ "grid-template-columns": v.replace(/,/g, " ") })],
|
|
365
|
-
[/^grid-rows-\[(.+)\]$/, ([, v]) => ({ "grid-template-rows": v.replace(/,/g, " ") })]
|
|
342
|
+
[/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })]
|
|
366
343
|
];
|
|
367
344
|
|
|
368
345
|
const overflowValues = [
|
|
@@ -378,11 +355,8 @@ const overflows = [
|
|
|
378
355
|
|
|
379
356
|
const basicSet = ["auto", "start", "end", "center", "stretch"];
|
|
380
357
|
const positions = [
|
|
381
|
-
[
|
|
382
|
-
[
|
|
383
|
-
["fixed", { position: "fixed" }],
|
|
384
|
-
["sticky", { position: "sticky" }],
|
|
385
|
-
["static", { position: "static" }]
|
|
358
|
+
[/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
|
|
359
|
+
[/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })]
|
|
386
360
|
];
|
|
387
361
|
const justifies = [
|
|
388
362
|
["justify-start", { "justify-content": "flex-start" }],
|
|
@@ -395,7 +369,9 @@ const justifies = [
|
|
|
395
369
|
...basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }])
|
|
396
370
|
];
|
|
397
371
|
const orders = [
|
|
398
|
-
[/^order-(.+)$/, ([, v]) => ({ order:
|
|
372
|
+
[/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.number(v) })],
|
|
373
|
+
["order-first", { order: "-9999" }],
|
|
374
|
+
["order-last", { order: "9999" }],
|
|
399
375
|
["order-none", { order: "0" }]
|
|
400
376
|
];
|
|
401
377
|
const alignments = [
|
|
@@ -431,17 +407,20 @@ function handleInsetValue(v) {
|
|
|
431
407
|
return { auto: "auto", full: "100%" }[v] ?? handler.bracket.fraction.cssvar.auto.rem(v);
|
|
432
408
|
}
|
|
433
409
|
const insets = [
|
|
434
|
-
[/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
|
|
435
|
-
[/^inset-([xy])-(.+)$/, ([, d, v]) => {
|
|
410
|
+
[/^(?:position-|pos-)?(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
|
|
411
|
+
[/^(?:position-|pos-)?inset-([xy])-(.+)$/, ([, d, v]) => {
|
|
436
412
|
const r = handleInsetValue(v);
|
|
437
413
|
if (r != null && d in directionMap)
|
|
438
414
|
return directionMap[d].map((i) => [i.slice(1), r]);
|
|
439
415
|
}]
|
|
440
416
|
];
|
|
441
417
|
const floats = [
|
|
442
|
-
[
|
|
418
|
+
["float-left", { float: "left" }],
|
|
419
|
+
["float-right", { float: "right" }],
|
|
443
420
|
["float-none", { float: "none" }],
|
|
444
|
-
[
|
|
421
|
+
["clear-left", { clear: "left" }],
|
|
422
|
+
["clear-right", { clear: "right" }],
|
|
423
|
+
["clear-both", { clear: "both" }],
|
|
445
424
|
["clear-none", { clear: "none" }]
|
|
446
425
|
];
|
|
447
426
|
const zIndexes = [
|
|
@@ -449,14 +428,11 @@ const zIndexes = [
|
|
|
449
428
|
[/^z-([^-]+)$/, ([, v]) => ({ "z-index": handler.number(v) })]
|
|
450
429
|
];
|
|
451
430
|
const boxSizing = [
|
|
452
|
-
[
|
|
453
|
-
|
|
454
|
-
([, value]) => ({
|
|
455
|
-
"box-sizing": `${value}-box`
|
|
456
|
-
})
|
|
457
|
-
]
|
|
431
|
+
["box-border", { "box-sizing": "border-box" }],
|
|
432
|
+
["box-content", { "box-sizing": "content-box" }]
|
|
458
433
|
];
|
|
459
434
|
|
|
435
|
+
const varEmptyFn = cacheFunction((prefix) => `var(--${prefix}empty,/*!*/ /*!*/)`);
|
|
460
436
|
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
461
437
|
const displays = [
|
|
462
438
|
["inline", { display: "inline" }],
|
|
@@ -487,7 +463,9 @@ const resizes = [
|
|
|
487
463
|
["resize-none", { resize: "none" }]
|
|
488
464
|
];
|
|
489
465
|
const userSelects = [
|
|
490
|
-
[
|
|
466
|
+
["select-auto", { "user-select": "auto" }],
|
|
467
|
+
["select-all", { "user-select": "all" }],
|
|
468
|
+
["select-text", { "user-select": "text" }],
|
|
491
469
|
["select-none", { "user-select": "none" }]
|
|
492
470
|
];
|
|
493
471
|
const whitespaces = [
|
|
@@ -530,30 +508,28 @@ const fontSmoothings = [
|
|
|
530
508
|
];
|
|
531
509
|
|
|
532
510
|
const rings = [
|
|
533
|
-
[/^ring-?(.*)$/, ([, d]) => {
|
|
511
|
+
[/^ring-?(.*)$/, ([, d], { options: { variablePrefix: p } }) => {
|
|
534
512
|
const value = handler.px(d || "1");
|
|
535
513
|
if (value) {
|
|
536
514
|
return {
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
"-webkit-box-shadow":
|
|
544
|
-
"box-shadow":
|
|
515
|
+
[`--${p}ring-inset`]: varEmptyFn(p),
|
|
516
|
+
[`--${p}ring-offset-width`]: "0px",
|
|
517
|
+
[`--${p}ring-offset-color`]: "#fff",
|
|
518
|
+
[`--${p}ring-color`]: "rgba(59, 130, 246, .5)",
|
|
519
|
+
[`--${p}ring-offset-shadow`]: `var(--${p}ring-inset) 0 0 0 var(--${p}ring-offset-width) var(--${p}ring-offset-color)`,
|
|
520
|
+
[`--${p}ring-shadow`]: `var(--${p}ring-inset) 0 0 0 calc(${value} + var(--${p}ring-offset-width)) var(--${p}ring-color)`,
|
|
521
|
+
"-webkit-box-shadow": `var(--${p}ring-offset-shadow), var(--${p}ring-shadow), var(--${p}shadow, 0 0 #0000)`,
|
|
522
|
+
"box-shadow": `var(--${p}ring-offset-shadow), var(--${p}ring-shadow), var(--${p}shadow, 0 0 #0000)`
|
|
545
523
|
};
|
|
546
524
|
}
|
|
547
525
|
}],
|
|
548
|
-
[
|
|
549
|
-
[/^ring-offset-(.+)$/, ([, d]) => {
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
}],
|
|
554
|
-
[
|
|
555
|
-
...ringColors,
|
|
556
|
-
...ringOffsetColors
|
|
526
|
+
[/^ring-offset$/, (_, { options: { variablePrefix: p } }) => ({ [`--${p}ring-offset-width`]: "1px" })],
|
|
527
|
+
[/^ring-offset-(.+)$/, ([, d], { options: { variablePrefix: p } }) => ({ [`--${p}ring-offset-width`]: handler.px(d || "1") })],
|
|
528
|
+
[/^ring-(.+)$/, (m, ctx) => colorResolver$1(`--${ctx.options.variablePrefix}ring-color`, "ring")(m, ctx)],
|
|
529
|
+
[/^ring-op(?:acity)?-?(.+)$/, ([, opacity], { options: { variablePrefix: p } }) => ({ [`--${p}ring-opacity`]: handler.bracket.percent(opacity) })],
|
|
530
|
+
[/^ring-offset-(.+)$/, (m, ctx) => colorResolver$1(`--${ctx.options.variablePrefix}ring-offset-color`, "ring-offset")(m, ctx)],
|
|
531
|
+
[/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity], { options: { variablePrefix: p } }) => ({ [`--${p}ring-offset-opacity`]: handler.bracket.percent(opacity) })],
|
|
532
|
+
[/^ring-inset$/, (_, { options: { variablePrefix: p } }) => ({ [`--${p}ring-inset`]: "inset" })]
|
|
557
533
|
];
|
|
558
534
|
|
|
559
535
|
const colorResolver = (body, theme) => {
|
|
@@ -583,10 +559,8 @@ const boxShadows = [
|
|
|
583
559
|
"box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
|
|
584
560
|
};
|
|
585
561
|
}
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
return color;
|
|
589
|
-
}]
|
|
562
|
+
}],
|
|
563
|
+
[/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
|
|
590
564
|
];
|
|
591
565
|
|
|
592
566
|
function getPropName(minmax, hw) {
|
|
@@ -659,6 +633,8 @@ const transforms = [
|
|
|
659
633
|
[/^scale-([xyz])-(.+)$/, handleScale],
|
|
660
634
|
[/^rotate-(.+)$/, handleRotate],
|
|
661
635
|
[/^rotate-((?!\[)[^-]+?)(?:deg)?$/, handleRotateWithUnit],
|
|
636
|
+
[/^skew-([xy])-(.+)$/, handleSkew],
|
|
637
|
+
[/^skew-([xy])-((?!\[)[^-]+?)(?:deg)?$/, handleSkewWithUnit],
|
|
662
638
|
["transform-gpu", transformGpu],
|
|
663
639
|
["transform-cpu", transformCpu],
|
|
664
640
|
["transform-none", { transform: "none" }],
|
|
@@ -712,6 +688,24 @@ function handleRotate([, b]) {
|
|
|
712
688
|
];
|
|
713
689
|
}
|
|
714
690
|
}
|
|
691
|
+
function handleSkewWithUnit([, d, b]) {
|
|
692
|
+
const v = handler.bracket.number(b);
|
|
693
|
+
if (v != null) {
|
|
694
|
+
return [
|
|
695
|
+
transformBase,
|
|
696
|
+
{ [`--un-skew-${d}`]: `${v}deg` }
|
|
697
|
+
];
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
function handleSkew([, d, b]) {
|
|
701
|
+
const v = handler.bracket(b);
|
|
702
|
+
if (v != null) {
|
|
703
|
+
return [
|
|
704
|
+
transformBase,
|
|
705
|
+
{ [`--un-skew-${d}`]: v }
|
|
706
|
+
];
|
|
707
|
+
}
|
|
708
|
+
}
|
|
715
709
|
|
|
716
710
|
const variablesAbbrMap = {
|
|
717
711
|
"visible": "visibility",
|
|
@@ -773,14 +767,8 @@ const textDecorations = [
|
|
|
773
767
|
["line-through", { "text-decoration": "line-through" }],
|
|
774
768
|
["decoration-underline", { "text-decoration": "underline" }],
|
|
775
769
|
["decoration-line-through", { "text-decoration": "line-through" }],
|
|
776
|
-
[/^(?:underline|decoration)-(
|
|
777
|
-
[/^(?:underline|decoration)-(
|
|
778
|
-
[/^decoration-(.+)$/, ([, d]) => ({ "text-decoration-thickness": handler.bracket.px(d) })],
|
|
779
|
-
[/^underline-offset-([^-]+)$/, ([, s]) => {
|
|
780
|
-
const v = s === "auto" ? s : handler.bracket.px(s);
|
|
781
|
-
if (v != null)
|
|
782
|
-
return { "text-underline-offset": v };
|
|
783
|
-
}],
|
|
770
|
+
[/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.px(s) })],
|
|
771
|
+
[/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
|
|
784
772
|
[/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
|
|
785
773
|
const result = colorResolver$1("text-decoration-color", "line")(match, ctx);
|
|
786
774
|
if (result) {
|
|
@@ -791,6 +779,8 @@ const textDecorations = [
|
|
|
791
779
|
}
|
|
792
780
|
}],
|
|
793
781
|
[/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) })],
|
|
782
|
+
[/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.px(s) })],
|
|
783
|
+
[/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
|
|
794
784
|
["no-underline", { "text-decoration": "none" }],
|
|
795
785
|
["decoration-none", { "text-decoration": "none" }]
|
|
796
786
|
];
|
|
@@ -850,7 +840,6 @@ const rules = [
|
|
|
850
840
|
overflows,
|
|
851
841
|
outline,
|
|
852
842
|
appearance,
|
|
853
|
-
placeholder,
|
|
854
843
|
positions,
|
|
855
844
|
orders,
|
|
856
845
|
justifies,
|
|
@@ -866,4 +855,4 @@ const rules = [
|
|
|
866
855
|
questionMark
|
|
867
856
|
].flat(1);
|
|
868
857
|
|
|
869
|
-
export {
|
|
858
|
+
export { cssVariables as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmptyFn as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, textDecorations as a0, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, boxShadows as y, zIndexes as z };
|
package/dist/chunks/default3.cjs
CHANGED
|
@@ -4,7 +4,7 @@ const variants$1 = require('./variants.cjs');
|
|
|
4
4
|
const pseudo = require('./pseudo.cjs');
|
|
5
5
|
|
|
6
6
|
const regexCache = {};
|
|
7
|
-
const variantBreakpoints = (matcher,
|
|
7
|
+
const variantBreakpoints = (matcher, { theme }) => {
|
|
8
8
|
const variantEntries = Object.entries(theme.breakpoints || {}).map(([point, size], idx) => [point, size, idx]);
|
|
9
9
|
for (const [point, size, idx] of variantEntries) {
|
|
10
10
|
if (!regexCache[point])
|
|
@@ -46,25 +46,41 @@ const variantCombinators = [
|
|
|
46
46
|
variants$1.variantMatcher("svg", (input) => `${input} svg *`)
|
|
47
47
|
];
|
|
48
48
|
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const dark = variants$1.variantMatcher("dark")(v);
|
|
56
|
-
if (dark) {
|
|
57
|
-
return {
|
|
58
|
-
...dark,
|
|
59
|
-
parent: "@media (prefers-color-scheme: dark)"
|
|
60
|
-
};
|
|
49
|
+
const variantColorsMediaOrClass = [
|
|
50
|
+
(v, { options: { dark } }) => {
|
|
51
|
+
if (dark === "class") {
|
|
52
|
+
const match = variants$1.variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
|
|
53
|
+
if (match)
|
|
54
|
+
return match;
|
|
61
55
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
56
|
+
},
|
|
57
|
+
(v, { options: { dark } }) => {
|
|
58
|
+
if (dark === "class") {
|
|
59
|
+
const match = variants$1.variantMatcher("light", (input) => `.light $$ ${input}`)(v);
|
|
60
|
+
if (match)
|
|
61
|
+
return match;
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
(v, { options: { dark } }) => {
|
|
65
|
+
if (dark === "media") {
|
|
66
|
+
const match = variants$1.variantMatcher("dark")(v);
|
|
67
|
+
if (match) {
|
|
68
|
+
return {
|
|
69
|
+
...match,
|
|
70
|
+
parent: "@media (prefers-color-scheme: dark)"
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
(v, { options: { dark } }) => {
|
|
76
|
+
if (dark === "media") {
|
|
77
|
+
const match = variants$1.variantMatcher("light")(v);
|
|
78
|
+
if (match) {
|
|
79
|
+
return {
|
|
80
|
+
...match,
|
|
81
|
+
parent: "@media (prefers-color-scheme: light)"
|
|
82
|
+
};
|
|
83
|
+
}
|
|
68
84
|
}
|
|
69
85
|
}
|
|
70
86
|
];
|
|
@@ -120,13 +136,15 @@ const variants = [
|
|
|
120
136
|
variantBreakpoints,
|
|
121
137
|
...variantCombinators,
|
|
122
138
|
pseudo.variantPseudoClasses,
|
|
139
|
+
pseudo.variantPseudoClassFunctions,
|
|
140
|
+
pseudo.variantTaggedPseudoClasses,
|
|
123
141
|
pseudo.variantPseudoElements,
|
|
124
|
-
pseudo.partClasses
|
|
142
|
+
pseudo.partClasses,
|
|
143
|
+
...variantColorsMediaOrClass
|
|
125
144
|
];
|
|
126
145
|
|
|
127
146
|
exports.variantBreakpoints = variantBreakpoints;
|
|
128
|
-
exports.
|
|
129
|
-
exports.variantColorsMedia = variantColorsMedia;
|
|
147
|
+
exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
|
|
130
148
|
exports.variantCombinators = variantCombinators;
|
|
131
149
|
exports.variantImportant = variantImportant;
|
|
132
150
|
exports.variantNegative = variantNegative;
|
package/dist/chunks/default3.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { v as variantMatcher } from './variants.mjs';
|
|
2
|
-
import { v as variantPseudoClasses, a as variantPseudoElements, p as partClasses } from './pseudo.mjs';
|
|
2
|
+
import { v as variantPseudoClasses, a as variantPseudoClassFunctions, b as variantTaggedPseudoClasses, c as variantPseudoElements, p as partClasses } from './pseudo.mjs';
|
|
3
3
|
|
|
4
4
|
const regexCache = {};
|
|
5
|
-
const variantBreakpoints = (matcher,
|
|
5
|
+
const variantBreakpoints = (matcher, { theme }) => {
|
|
6
6
|
const variantEntries = Object.entries(theme.breakpoints || {}).map(([point, size], idx) => [point, size, idx]);
|
|
7
7
|
for (const [point, size, idx] of variantEntries) {
|
|
8
8
|
if (!regexCache[point])
|
|
@@ -44,25 +44,41 @@ const variantCombinators = [
|
|
|
44
44
|
variantMatcher("svg", (input) => `${input} svg *`)
|
|
45
45
|
];
|
|
46
46
|
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const dark = variantMatcher("dark")(v);
|
|
54
|
-
if (dark) {
|
|
55
|
-
return {
|
|
56
|
-
...dark,
|
|
57
|
-
parent: "@media (prefers-color-scheme: dark)"
|
|
58
|
-
};
|
|
47
|
+
const variantColorsMediaOrClass = [
|
|
48
|
+
(v, { options: { dark } }) => {
|
|
49
|
+
if (dark === "class") {
|
|
50
|
+
const match = variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
|
|
51
|
+
if (match)
|
|
52
|
+
return match;
|
|
59
53
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
},
|
|
55
|
+
(v, { options: { dark } }) => {
|
|
56
|
+
if (dark === "class") {
|
|
57
|
+
const match = variantMatcher("light", (input) => `.light $$ ${input}`)(v);
|
|
58
|
+
if (match)
|
|
59
|
+
return match;
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
(v, { options: { dark } }) => {
|
|
63
|
+
if (dark === "media") {
|
|
64
|
+
const match = variantMatcher("dark")(v);
|
|
65
|
+
if (match) {
|
|
66
|
+
return {
|
|
67
|
+
...match,
|
|
68
|
+
parent: "@media (prefers-color-scheme: dark)"
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
(v, { options: { dark } }) => {
|
|
74
|
+
if (dark === "media") {
|
|
75
|
+
const match = variantMatcher("light")(v);
|
|
76
|
+
if (match) {
|
|
77
|
+
return {
|
|
78
|
+
...match,
|
|
79
|
+
parent: "@media (prefers-color-scheme: light)"
|
|
80
|
+
};
|
|
81
|
+
}
|
|
66
82
|
}
|
|
67
83
|
}
|
|
68
84
|
];
|
|
@@ -118,8 +134,11 @@ const variants = [
|
|
|
118
134
|
variantBreakpoints,
|
|
119
135
|
...variantCombinators,
|
|
120
136
|
variantPseudoClasses,
|
|
137
|
+
variantPseudoClassFunctions,
|
|
138
|
+
variantTaggedPseudoClasses,
|
|
121
139
|
variantPseudoElements,
|
|
122
|
-
partClasses
|
|
140
|
+
partClasses,
|
|
141
|
+
...variantColorsMediaOrClass
|
|
123
142
|
];
|
|
124
143
|
|
|
125
|
-
export {
|
|
144
|
+
export { variantBreakpoints as a, variantCombinators as b, variantColorsMediaOrClass as c, variantImportant as d, variantNegative as e, variantSpace as f, variants as v };
|