@unocss/preset-wind 0.20.0 → 0.21.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.cjs +176 -189
- package/dist/index.mjs +177 -190
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -10,6 +10,12 @@ const rules$1 = require('@unocss/preset-mini/rules');
|
|
|
10
10
|
const utils = require('@unocss/preset-mini/utils');
|
|
11
11
|
|
|
12
12
|
const animations = [
|
|
13
|
+
[/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
|
|
14
|
+
const kf = theme.animation?.keyframes?.[name];
|
|
15
|
+
if (kf)
|
|
16
|
+
return `@keyframes ${name}${kf}
|
|
17
|
+
${constructCSS({ animation: `${name}` })}`;
|
|
18
|
+
}],
|
|
13
19
|
[/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
|
|
14
20
|
const kf = theme.animation?.keyframes?.[name];
|
|
15
21
|
if (kf) {
|
|
@@ -20,36 +26,33 @@ const animations = [
|
|
|
20
26
|
${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
|
|
21
27
|
}
|
|
22
28
|
}],
|
|
23
|
-
[/^animate(
|
|
24
|
-
[/^animate-delay-(
|
|
29
|
+
[/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d) })],
|
|
30
|
+
[/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
|
|
25
31
|
[/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
|
|
26
32
|
["animate-mode-none", { "animation-fill-mode": "none" }],
|
|
27
33
|
["animate-fill-mode-none", { "animation-fill-mode": "none" }],
|
|
28
34
|
[/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
|
|
29
35
|
["animate-normal", { "animation-direction": "normal" }],
|
|
30
36
|
["animate-direction-normal", { "animation-direction": "normal" }],
|
|
31
|
-
[/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": d.replace(/\-/g, ",
|
|
37
|
+
[/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket(d) ?? d.replace(/\-/g, ",") })],
|
|
32
38
|
[/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
|
|
33
39
|
[/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
|
|
34
40
|
["animate-none", { animation: "none" }]
|
|
35
41
|
];
|
|
36
42
|
|
|
37
|
-
const
|
|
43
|
+
const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
|
|
38
44
|
const data = utils.parseColor(body, theme);
|
|
39
45
|
if (!data)
|
|
40
46
|
return;
|
|
41
|
-
const {
|
|
47
|
+
const { alpha, color, rgba } = data;
|
|
42
48
|
if (!color)
|
|
43
49
|
return;
|
|
44
50
|
let colorString = color;
|
|
45
51
|
if (rgba) {
|
|
46
|
-
|
|
47
|
-
if (a != null && !Number.isNaN(a)) {
|
|
48
|
-
rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
|
|
52
|
+
if (alpha != null)
|
|
49
53
|
colorString = `rgba(${rgba.join(",")})`;
|
|
50
|
-
|
|
51
|
-
colorString = `rgba(${rgba.
|
|
52
|
-
}
|
|
54
|
+
else
|
|
55
|
+
colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
|
|
53
56
|
}
|
|
54
57
|
switch (mode) {
|
|
55
58
|
case "from":
|
|
@@ -67,107 +70,64 @@ const colorResolver = (mode) => ([, body], { theme }) => {
|
|
|
67
70
|
};
|
|
68
71
|
}
|
|
69
72
|
};
|
|
70
|
-
const bgGradientDirections = {
|
|
71
|
-
t: "top",
|
|
72
|
-
tr: "top right",
|
|
73
|
-
r: "right",
|
|
74
|
-
br: "bottom right",
|
|
75
|
-
b: "bottom",
|
|
76
|
-
bl: "bottom left",
|
|
77
|
-
l: "left",
|
|
78
|
-
tl: "top left"
|
|
79
|
-
};
|
|
80
73
|
const backgroundStyles = [
|
|
74
|
+
[/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
|
|
75
|
+
[/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
|
|
76
|
+
[/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
|
|
77
|
+
[/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
|
|
78
|
+
[/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
|
|
79
|
+
[/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
|
|
80
|
+
[/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
|
|
81
|
+
if (d in utils.positionMap)
|
|
82
|
+
return { "background-image": `linear-gradient(to ${utils.positionMap[d]}, var(--un-gradient-stops))` };
|
|
83
|
+
}],
|
|
84
|
+
["bg-none", { "background-image": "none" }],
|
|
85
|
+
["box-decoration-slice", { "box-decoration-break": "slice" }],
|
|
86
|
+
["box-decoration-clone", { "box-decoration-break": "clone" }],
|
|
87
|
+
["bg-auto", { "background-size": "auto" }],
|
|
88
|
+
["bg-cover", { "background-size": "cover" }],
|
|
89
|
+
["bg-contain", { "background-size": "contain" }],
|
|
81
90
|
["bg-fixed", { "background-attachment": "fixed" }],
|
|
82
91
|
["bg-local", { "background-attachment": "local" }],
|
|
83
92
|
["bg-scroll", { "background-attachment": "scroll" }],
|
|
84
|
-
["bg-blend-multiply", { "background-blend-mode": "multiply" }],
|
|
85
|
-
["bg-blend-screen", { "background-blend-mode": "screen" }],
|
|
86
|
-
["bg-blend-overlay", { "background-blend-mode": "overlay" }],
|
|
87
|
-
["bg-blend-darken", { "background-blend-mode": "darken" }],
|
|
88
|
-
["bg-blend-lighten", { "background-blend-mode": "lighten" }],
|
|
89
|
-
["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
|
|
90
|
-
["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
|
|
91
|
-
["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
|
|
92
|
-
["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
|
|
93
|
-
["bg-blend-difference", { "background-blend-mode": "difference" }],
|
|
94
|
-
["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
|
|
95
|
-
["bg-blend-hue", { "background-blend-mode": "hue" }],
|
|
96
|
-
["bg-blend-saturation", { "background-blend-mode": "saturation" }],
|
|
97
|
-
["bg-blend-color", { "background-blend-mode": "color" }],
|
|
98
|
-
["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
|
|
99
|
-
["bg-blend-normal", { "background-blend-mode": "normal" }],
|
|
100
93
|
["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
|
|
101
94
|
["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
|
|
102
95
|
["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
|
|
103
96
|
["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
|
|
104
|
-
[/^
|
|
105
|
-
[/^(?:bg-gradient-)?to-(.+)$/, colorResolver("to")],
|
|
106
|
-
[/^(?:bg-gradient-)?via-(.+)$/, colorResolver("via")],
|
|
107
|
-
[/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
|
|
108
|
-
[/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
|
|
109
|
-
[/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
|
|
110
|
-
[/^bg-gradient-to-([trbl]{1,2})$/, ([, d]) => {
|
|
111
|
-
const v = bgGradientDirections[d];
|
|
112
|
-
if (v)
|
|
113
|
-
return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
|
|
114
|
-
}],
|
|
115
|
-
["bg-none", { "background-image": "none" }],
|
|
116
|
-
["bg-origin-border", { "background-origin": "border-box" }],
|
|
117
|
-
["bg-origin-padding", { "background-origin": "padding-box" }],
|
|
118
|
-
["bg-origin-content", { "background-origin": "content-box" }],
|
|
119
|
-
["bg-bottom", { "background-position": "bottom" }],
|
|
120
|
-
["bg-center", { "background-position": "center" }],
|
|
121
|
-
["bg-left", { "background-position": "left" }],
|
|
122
|
-
["bg-left-bottom", { "background-position": "left bottom" }],
|
|
123
|
-
["bg-left-top", { "background-position": "left top" }],
|
|
124
|
-
["bg-right", { "background-position": "right" }],
|
|
125
|
-
["bg-right-bottom", { "background-position": "right bottom" }],
|
|
126
|
-
["bg-right-top", { "background-position": "right top" }],
|
|
127
|
-
["bg-top", { "background-position": "top" }],
|
|
97
|
+
[/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": utils.positionMap[s] })],
|
|
128
98
|
["bg-repeat", { "background-repeat": "repeat" }],
|
|
129
99
|
["bg-no-repeat", { "background-repeat": "no-repeat" }],
|
|
130
100
|
["bg-repeat-x", { "background-position": "repeat-x" }],
|
|
131
101
|
["bg-repeat-y", { "background-position": "repeat-y" }],
|
|
132
102
|
["bg-repeat-round", { "background-position": "round" }],
|
|
133
103
|
["bg-repeat-space", { "background-position": "space" }],
|
|
134
|
-
["bg-
|
|
135
|
-
["bg-
|
|
136
|
-
["bg-
|
|
104
|
+
["bg-origin-border", { "background-origin": "border-box" }],
|
|
105
|
+
["bg-origin-padding", { "background-origin": "padding-box" }],
|
|
106
|
+
["bg-origin-content", { "background-origin": "content-box" }]
|
|
137
107
|
];
|
|
138
108
|
|
|
139
|
-
const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
|
|
140
109
|
const listStyle = [
|
|
141
|
-
[
|
|
142
|
-
|
|
143
|
-
const position = /outside|inside/.exec(value) ?? [];
|
|
144
|
-
if (position.length) {
|
|
110
|
+
[/^list-(disc|circle|square|decimal|zero-decimal|greek|roman|upper-roman|alpha|upper-alpha)(?:-(outside|inside))?$/, ([, style, position]) => {
|
|
111
|
+
if (position != null) {
|
|
145
112
|
return {
|
|
146
|
-
"list-style-position":
|
|
113
|
+
"list-style-position": position,
|
|
147
114
|
"list-style-type": style
|
|
148
115
|
};
|
|
149
116
|
}
|
|
150
117
|
return { "list-style-type": style };
|
|
151
118
|
}],
|
|
152
|
-
[
|
|
119
|
+
["list-outside", { "list-style-position": "outside" }],
|
|
120
|
+
["list-inside", { "list-style-position": "inside" }],
|
|
153
121
|
["list-none", { "list-style-type": "none" }]
|
|
154
122
|
];
|
|
155
|
-
const
|
|
156
|
-
[
|
|
157
|
-
["decoration-clone", { "box-decoration-break": "clone" }]
|
|
158
|
-
];
|
|
159
|
-
const accentOpacity = [
|
|
123
|
+
const accents = [
|
|
124
|
+
[/^accent-(.+)$/, utils.colorResolver("accent-color", "accent")],
|
|
160
125
|
[/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.handler.bracket.percent(d) })]
|
|
161
126
|
];
|
|
162
|
-
const
|
|
163
|
-
[/^
|
|
164
|
-
];
|
|
165
|
-
const caretOpacity = [
|
|
127
|
+
const carets = [
|
|
128
|
+
[/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")],
|
|
166
129
|
[/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.handler.bracket.percent(d) })]
|
|
167
130
|
];
|
|
168
|
-
const caretColors = [
|
|
169
|
-
[/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")]
|
|
170
|
-
];
|
|
171
131
|
const imageRenderings = [
|
|
172
132
|
["image-render-auto", { "image-rendering": "auto" }],
|
|
173
133
|
["image-render-edge", { "image-rendering": "crisp-edges" }],
|
|
@@ -179,18 +139,15 @@ const imageRenderings = [
|
|
|
179
139
|
["image-rendering", "pixelated"]
|
|
180
140
|
]]
|
|
181
141
|
];
|
|
182
|
-
const overflowValues = [
|
|
183
|
-
"auto",
|
|
184
|
-
"hidden",
|
|
185
|
-
"visible",
|
|
186
|
-
"scroll",
|
|
187
|
-
"contain"
|
|
188
|
-
];
|
|
189
142
|
const overscrolls = [
|
|
190
|
-
[
|
|
143
|
+
["overscroll-auto", { "overscroll-behavior": "auto" }],
|
|
144
|
+
["overscroll-contain", { "overscroll-behavior": "contain" }],
|
|
191
145
|
["overscroll-none", { "overscroll-behavior": "none" }],
|
|
192
|
-
[
|
|
146
|
+
["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
|
|
147
|
+
["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
|
|
193
148
|
["overscroll-x-none", { "overscroll-behavior-x": "none" }],
|
|
149
|
+
["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
|
|
150
|
+
["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
|
|
194
151
|
["overscroll-y-none", { "overscroll-behavior-y": "none" }]
|
|
195
152
|
];
|
|
196
153
|
const scrollBehaviors = [
|
|
@@ -199,11 +156,7 @@ const scrollBehaviors = [
|
|
|
199
156
|
];
|
|
200
157
|
|
|
201
158
|
const columns = [
|
|
202
|
-
[/^columns-(.+)$/, ([, v]) => {
|
|
203
|
-
const column = utils.handler.bracket.global.number.auto.numberWithUnit(v);
|
|
204
|
-
if (column)
|
|
205
|
-
return { column };
|
|
206
|
-
}],
|
|
159
|
+
[/^columns-(.+)$/, ([, v]) => ({ column: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
|
|
207
160
|
["break-before-auto", { "break-before": "auto" }],
|
|
208
161
|
["break-before-avoid", { "break-before": "avoid" }],
|
|
209
162
|
["break-before-all", { "break-before": "all" }],
|
|
@@ -260,21 +213,21 @@ const containerShortcuts = [
|
|
|
260
213
|
}]
|
|
261
214
|
];
|
|
262
215
|
|
|
263
|
-
const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)
|
|
216
|
+
const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)";
|
|
264
217
|
const filterBase = {
|
|
265
218
|
"--un-blur": rules$1.varEmpty,
|
|
266
219
|
"--un-brightness": rules$1.varEmpty,
|
|
267
220
|
"--un-contrast": rules$1.varEmpty,
|
|
221
|
+
"--un-drop-shadow": rules$1.varEmpty,
|
|
268
222
|
"--un-grayscale": rules$1.varEmpty,
|
|
269
223
|
"--un-hue-rotate": rules$1.varEmpty,
|
|
270
224
|
"--un-invert": rules$1.varEmpty,
|
|
271
225
|
"--un-saturate": rules$1.varEmpty,
|
|
272
226
|
"--un-sepia": rules$1.varEmpty,
|
|
273
|
-
"--un-drop-shadow": rules$1.varEmpty,
|
|
274
227
|
"filter": filterContnet,
|
|
275
228
|
[variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
276
229
|
};
|
|
277
|
-
const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
|
|
230
|
+
const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
|
|
278
231
|
const backdropFilterBase = {
|
|
279
232
|
"--un-backdrop-blur": rules$1.varEmpty,
|
|
280
233
|
"--un-backdrop-brightness": rules$1.varEmpty,
|
|
@@ -282,19 +235,24 @@ const backdropFilterBase = {
|
|
|
282
235
|
"--un-backdrop-grayscale": rules$1.varEmpty,
|
|
283
236
|
"--un-backdrop-hue-rotate": rules$1.varEmpty,
|
|
284
237
|
"--un-backdrop-invert": rules$1.varEmpty,
|
|
238
|
+
"--un-backdrop-opacity": rules$1.varEmpty,
|
|
285
239
|
"--un-backdrop-saturate": rules$1.varEmpty,
|
|
286
240
|
"--un-backdrop-sepia": rules$1.varEmpty,
|
|
287
241
|
"-webkit-backdrop-filter": backdropFilterContent,
|
|
288
242
|
"backdrop-filter": backdropFilterContent,
|
|
289
243
|
[variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
290
244
|
};
|
|
291
|
-
const percentWithDefault = (
|
|
292
|
-
|
|
293
|
-
|
|
245
|
+
const percentWithDefault = (str) => {
|
|
246
|
+
let v = utils.handler.bracket(str || "");
|
|
247
|
+
if (v != null)
|
|
248
|
+
return v;
|
|
249
|
+
v = str ? utils.handler.percent(str) : "1";
|
|
250
|
+
if (v != null && parseFloat(v) <= 1)
|
|
251
|
+
return v;
|
|
294
252
|
};
|
|
295
253
|
const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
|
|
296
254
|
const value = resolver(s, theme);
|
|
297
|
-
if (value) {
|
|
255
|
+
if (value != null && value !== "") {
|
|
298
256
|
return [
|
|
299
257
|
b ? backdropFilterBase : filterBase,
|
|
300
258
|
{ [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
|
|
@@ -305,49 +263,37 @@ const filters = [
|
|
|
305
263
|
["filter", filterBase],
|
|
306
264
|
["backdrop-filter", backdropFilterBase],
|
|
307
265
|
[/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
|
|
308
|
-
[/^(backdrop-)?brightness-(
|
|
309
|
-
[/^(backdrop-)?contrast-(
|
|
266
|
+
[/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
|
|
267
|
+
[/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
|
|
310
268
|
[/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
|
|
311
|
-
|
|
312
|
-
if (v)
|
|
269
|
+
let v = theme.dropShadow?.[s || "DEFAULT"];
|
|
270
|
+
if (v != null)
|
|
313
271
|
return core.toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
|
|
272
|
+
v = utils.handler.bracket(s);
|
|
273
|
+
if (v != null)
|
|
274
|
+
return `drop-shadow(${v})`;
|
|
314
275
|
})],
|
|
315
|
-
[/^(backdrop-)?grayscale(?:-(
|
|
316
|
-
[/^(backdrop-)?hue-rotate-(
|
|
317
|
-
[/^(backdrop-)?invert(?:-(
|
|
318
|
-
[/^(backdrop-)
|
|
319
|
-
[/^(backdrop-)?
|
|
276
|
+
[/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
|
|
277
|
+
[/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
|
|
278
|
+
[/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
|
|
279
|
+
[/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
|
|
280
|
+
[/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
|
|
281
|
+
[/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
|
|
320
282
|
["filter-none", { filter: "none" }],
|
|
321
283
|
["backdrop-filter-none", {
|
|
322
284
|
"-webkit-backdrop-filter": "none",
|
|
323
285
|
"backdrop-filter": "none"
|
|
324
|
-
}]
|
|
325
|
-
]
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
|
|
331
|
-
["mix-blend-darken", { "mix-blend-mode": "darken" }],
|
|
332
|
-
["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
|
|
333
|
-
["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
|
|
334
|
-
["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
|
|
335
|
-
["mix-blend-color-light", { "mix-blend-mode": "color-light" }],
|
|
336
|
-
["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
|
|
337
|
-
["mix-blend-difference", { "mix-blend-mode": "difference" }],
|
|
338
|
-
["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
|
|
339
|
-
["mix-blend-hue", { "mix-blend-mode": "hue" }],
|
|
340
|
-
["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
|
|
341
|
-
["mix-blend-color", { "mix-blend-mode": "color" }],
|
|
342
|
-
["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
|
|
343
|
-
["mix-blend-normal", { "mix-blend-mode": "normal" }]
|
|
286
|
+
}],
|
|
287
|
+
[/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
|
|
288
|
+
[/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
|
|
289
|
+
"-webkit-backdrop-filter": `${s}(0)`,
|
|
290
|
+
"backdrop-filter": `${s}(0)`
|
|
291
|
+
})]
|
|
344
292
|
];
|
|
345
293
|
|
|
346
294
|
const spaces = [
|
|
347
295
|
[/^space-?([xy])-?(-?.+)$/, (match) => {
|
|
348
|
-
const [, direction
|
|
349
|
-
if (size === "reverse")
|
|
350
|
-
return { [`--un-space-${direction}-reverse`]: 1 };
|
|
296
|
+
const [, direction] = match;
|
|
351
297
|
const results = utils.directionSize("margin")(match)?.map((item) => {
|
|
352
298
|
const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
|
|
353
299
|
return [item[0], value];
|
|
@@ -358,7 +304,8 @@ const spaces = [
|
|
|
358
304
|
...results
|
|
359
305
|
];
|
|
360
306
|
}
|
|
361
|
-
}]
|
|
307
|
+
}],
|
|
308
|
+
[/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
|
|
362
309
|
];
|
|
363
310
|
|
|
364
311
|
const textTransforms = [
|
|
@@ -425,7 +372,8 @@ const screenReadersAccess = [
|
|
|
425
372
|
];
|
|
426
373
|
const isolations = [
|
|
427
374
|
["isolate", { isolation: "isolate" }],
|
|
428
|
-
["isolate-auto", { isolation: "auto" }]
|
|
375
|
+
["isolate-auto", { isolation: "auto" }],
|
|
376
|
+
["isolation-auto", { isolation: "auto" }]
|
|
429
377
|
];
|
|
430
378
|
const objectPositions = [
|
|
431
379
|
["object-cover", { "object-fit": "cover" }],
|
|
@@ -433,17 +381,43 @@ const objectPositions = [
|
|
|
433
381
|
["object-fill", { "object-fit": "fill" }],
|
|
434
382
|
["object-scale-down", { "object-fit": "scale-down" }],
|
|
435
383
|
["object-none", { "object-fit": "none" }],
|
|
436
|
-
[
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
["
|
|
440
|
-
["
|
|
441
|
-
["
|
|
442
|
-
["
|
|
443
|
-
["
|
|
444
|
-
["
|
|
445
|
-
["
|
|
446
|
-
["
|
|
384
|
+
[/^object-([-\w]+)$/, ([, s]) => ({ "object-position": utils.positionMap[s] })]
|
|
385
|
+
];
|
|
386
|
+
const backgroundBlendModes = [
|
|
387
|
+
["bg-blend-multiply", { "background-blend-mode": "multiply" }],
|
|
388
|
+
["bg-blend-screen", { "background-blend-mode": "screen" }],
|
|
389
|
+
["bg-blend-overlay", { "background-blend-mode": "overlay" }],
|
|
390
|
+
["bg-blend-darken", { "background-blend-mode": "darken" }],
|
|
391
|
+
["bg-blend-lighten", { "background-blend-mode": "lighten" }],
|
|
392
|
+
["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
|
|
393
|
+
["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
|
|
394
|
+
["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
|
|
395
|
+
["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
|
|
396
|
+
["bg-blend-difference", { "background-blend-mode": "difference" }],
|
|
397
|
+
["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
|
|
398
|
+
["bg-blend-hue", { "background-blend-mode": "hue" }],
|
|
399
|
+
["bg-blend-saturation", { "background-blend-mode": "saturation" }],
|
|
400
|
+
["bg-blend-color", { "background-blend-mode": "color" }],
|
|
401
|
+
["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
|
|
402
|
+
["bg-blend-normal", { "background-blend-mode": "normal" }]
|
|
403
|
+
];
|
|
404
|
+
const mixBlendModes = [
|
|
405
|
+
["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
|
|
406
|
+
["mix-blend-screen", { "mix-blend-mode": "screen" }],
|
|
407
|
+
["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
|
|
408
|
+
["mix-blend-darken", { "mix-blend-mode": "darken" }],
|
|
409
|
+
["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
|
|
410
|
+
["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
|
|
411
|
+
["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
|
|
412
|
+
["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
|
|
413
|
+
["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
|
|
414
|
+
["mix-blend-difference", { "mix-blend-mode": "difference" }],
|
|
415
|
+
["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
|
|
416
|
+
["mix-blend-hue", { "mix-blend-mode": "hue" }],
|
|
417
|
+
["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
|
|
418
|
+
["mix-blend-color", { "mix-blend-mode": "color" }],
|
|
419
|
+
["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
|
|
420
|
+
["mix-blend-normal", { "mix-blend-mode": "normal" }]
|
|
447
421
|
];
|
|
448
422
|
|
|
449
423
|
const tables = [
|
|
@@ -484,33 +458,24 @@ const cssVariables = [[
|
|
|
484
458
|
/^(.+)-\$(.+)$/,
|
|
485
459
|
([, name, varname]) => {
|
|
486
460
|
const prop = variablesAbbrMap[name];
|
|
487
|
-
if (prop)
|
|
488
|
-
return {
|
|
489
|
-
[prop]: `var(--${varname})`
|
|
490
|
-
};
|
|
491
|
-
}
|
|
461
|
+
if (prop)
|
|
462
|
+
return { [prop]: `var(--${varname})` };
|
|
492
463
|
}
|
|
493
464
|
]];
|
|
494
465
|
|
|
495
|
-
const
|
|
496
|
-
[/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
|
|
497
|
-
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })]
|
|
498
|
-
];
|
|
499
|
-
const divideSizes = [
|
|
466
|
+
const divides = [
|
|
500
467
|
[/^divide-?([xy])$/, handlerDivide],
|
|
501
468
|
[/^divide-?([xy])-?(-?.+)$/, handlerDivide],
|
|
502
|
-
[/^divide-?([xy])-reverse$/, ([, d]) => [
|
|
503
|
-
]
|
|
504
|
-
|
|
469
|
+
[/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
|
|
470
|
+
[/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
|
|
471
|
+
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
|
|
505
472
|
["divide-solid", { "border-style": "solid" }],
|
|
506
473
|
["divide-dashed", { "border-style": "dashed" }],
|
|
507
474
|
["divide-dotted", { "border-style": "dotted" }],
|
|
508
475
|
["divide-double", { "border-style": "double" }],
|
|
509
476
|
["divide-none", { "border-style": "none" }]
|
|
510
477
|
];
|
|
511
|
-
|
|
512
|
-
function handlerDivide([, a, b]) {
|
|
513
|
-
const [d, s = "1"] = utils.directionMap[a] ? [a, b] : ["", a];
|
|
478
|
+
function handlerDivide([, d, s = "1"]) {
|
|
514
479
|
const v = utils.handler.bracket.px(s);
|
|
515
480
|
if (v != null) {
|
|
516
481
|
const results = utils.directionMap[d].map((item) => {
|
|
@@ -593,7 +558,7 @@ const touchActions = [
|
|
|
593
558
|
];
|
|
594
559
|
|
|
595
560
|
const scrolls = [
|
|
596
|
-
[/^snap-(x|y|
|
|
561
|
+
[/^snap-(x|y|both)$/, ([, d]) => [
|
|
597
562
|
{
|
|
598
563
|
"--un-scroll-snap-strictness": "proximity",
|
|
599
564
|
[variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
@@ -619,6 +584,11 @@ const scrolls = [
|
|
|
619
584
|
[/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
|
|
620
585
|
];
|
|
621
586
|
|
|
587
|
+
const placeholders = [
|
|
588
|
+
[/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
|
|
589
|
+
[/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
|
|
590
|
+
];
|
|
591
|
+
|
|
622
592
|
const rules = [
|
|
623
593
|
rules$1.cssVariables,
|
|
624
594
|
cssVariables,
|
|
@@ -665,7 +635,6 @@ const rules = [
|
|
|
665
635
|
rules$1.breaks,
|
|
666
636
|
rules$1.borders,
|
|
667
637
|
rules$1.bgColors,
|
|
668
|
-
boxDecorationBreaks,
|
|
669
638
|
backgroundStyles,
|
|
670
639
|
rules$1.svgUtilities,
|
|
671
640
|
objectPositions,
|
|
@@ -686,11 +655,10 @@ const rules = [
|
|
|
686
655
|
hyphens,
|
|
687
656
|
writingModes,
|
|
688
657
|
writingOrientations,
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
accentColors,
|
|
692
|
-
accentOpacity,
|
|
658
|
+
carets,
|
|
659
|
+
accents,
|
|
693
660
|
rules$1.opacity,
|
|
661
|
+
backgroundBlendModes,
|
|
694
662
|
mixBlendModes,
|
|
695
663
|
rules$1.boxShadows,
|
|
696
664
|
rules$1.outline,
|
|
@@ -700,6 +668,7 @@ const rules = [
|
|
|
700
668
|
rules$1.transitions,
|
|
701
669
|
rules$1.willChange,
|
|
702
670
|
rules$1.contents,
|
|
671
|
+
placeholders,
|
|
703
672
|
rules$1.questionMark
|
|
704
673
|
].flat(1);
|
|
705
674
|
|
|
@@ -858,27 +827,43 @@ const theme = {
|
|
|
858
827
|
};
|
|
859
828
|
|
|
860
829
|
const variantColorsScheme = [
|
|
861
|
-
utils.variantMatcher("
|
|
862
|
-
utils.variantMatcher("
|
|
863
|
-
(
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
830
|
+
utils.variantMatcher(".dark", (input) => `.dark $$ ${input}`),
|
|
831
|
+
utils.variantMatcher(".light", (input) => `.light $$ ${input}`),
|
|
832
|
+
utils.variantParentMatcher("@dark", "@media (prefers-color-scheme: dark)"),
|
|
833
|
+
utils.variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
|
|
834
|
+
];
|
|
835
|
+
|
|
836
|
+
const variantSpaceAndDivide = (matcher) => {
|
|
837
|
+
if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
|
|
838
|
+
return {
|
|
839
|
+
matcher,
|
|
840
|
+
selector: (input) => {
|
|
841
|
+
return `${input}>:not([hidden])~:not([hidden])`;
|
|
842
|
+
}
|
|
843
|
+
};
|
|
844
|
+
}
|
|
845
|
+
};
|
|
846
|
+
|
|
847
|
+
const placeholderModifier = (input, { theme }) => {
|
|
848
|
+
const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
|
|
849
|
+
if (m) {
|
|
850
|
+
const [, pre = "", p, body] = m;
|
|
851
|
+
if (hasColorValue(body, theme) || hasOpacityValue(body)) {
|
|
875
852
|
return {
|
|
876
|
-
|
|
877
|
-
parent: "@media (prefers-color-scheme: light)"
|
|
853
|
+
matcher: `${pre}${p}$-placeholder-${body}`
|
|
878
854
|
};
|
|
879
855
|
}
|
|
880
856
|
}
|
|
881
|
-
|
|
857
|
+
};
|
|
858
|
+
function hasColorValue(body, theme) {
|
|
859
|
+
return !!utils.parseColor(body, theme)?.color;
|
|
860
|
+
}
|
|
861
|
+
function hasOpacityValue(body) {
|
|
862
|
+
const match = body.match(/^op(?:acity)?-?(.+)$/);
|
|
863
|
+
if (match && match[1] != null)
|
|
864
|
+
return utils.handler.bracket.percent.cssvar(match[1]) != null;
|
|
865
|
+
return false;
|
|
866
|
+
}
|
|
882
867
|
|
|
883
868
|
const presetWind = (options = {}) => {
|
|
884
869
|
options.dark = options.dark ?? "class";
|
|
@@ -891,7 +876,9 @@ const presetWind = (options = {}) => {
|
|
|
891
876
|
...containerShortcuts
|
|
892
877
|
],
|
|
893
878
|
variants: [
|
|
894
|
-
|
|
879
|
+
placeholderModifier,
|
|
880
|
+
variantSpaceAndDivide,
|
|
881
|
+
...variants.variants(options),
|
|
895
882
|
...variantColorsScheme
|
|
896
883
|
],
|
|
897
884
|
options
|
package/dist/index.mjs
CHANGED
|
@@ -3,9 +3,15 @@ import { toArray } from '@unocss/core';
|
|
|
3
3
|
import { theme as theme$1 } from '@unocss/preset-mini/theme';
|
|
4
4
|
export { colors } from '@unocss/preset-mini';
|
|
5
5
|
import { varEmpty, cssVariables as cssVariables$1, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
|
|
6
|
-
import { handler, parseColor, colorResolver
|
|
6
|
+
import { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
|
|
7
7
|
|
|
8
8
|
const animations = [
|
|
9
|
+
[/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
|
|
10
|
+
const kf = theme.animation?.keyframes?.[name];
|
|
11
|
+
if (kf)
|
|
12
|
+
return `@keyframes ${name}${kf}
|
|
13
|
+
${constructCSS({ animation: `${name}` })}`;
|
|
14
|
+
}],
|
|
9
15
|
[/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
|
|
10
16
|
const kf = theme.animation?.keyframes?.[name];
|
|
11
17
|
if (kf) {
|
|
@@ -16,36 +22,33 @@ const animations = [
|
|
|
16
22
|
${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
|
|
17
23
|
}
|
|
18
24
|
}],
|
|
19
|
-
[/^animate(
|
|
20
|
-
[/^animate-delay-(
|
|
25
|
+
[/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d) })],
|
|
26
|
+
[/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
|
|
21
27
|
[/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
|
|
22
28
|
["animate-mode-none", { "animation-fill-mode": "none" }],
|
|
23
29
|
["animate-fill-mode-none", { "animation-fill-mode": "none" }],
|
|
24
30
|
[/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
|
|
25
31
|
["animate-normal", { "animation-direction": "normal" }],
|
|
26
32
|
["animate-direction-normal", { "animation-direction": "normal" }],
|
|
27
|
-
[/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": d.replace(/\-/g, ",
|
|
33
|
+
[/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket(d) ?? d.replace(/\-/g, ",") })],
|
|
28
34
|
[/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
|
|
29
35
|
[/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
|
|
30
36
|
["animate-none", { animation: "none" }]
|
|
31
37
|
];
|
|
32
38
|
|
|
33
|
-
const
|
|
39
|
+
const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
|
|
34
40
|
const data = parseColor(body, theme);
|
|
35
41
|
if (!data)
|
|
36
42
|
return;
|
|
37
|
-
const {
|
|
43
|
+
const { alpha, color, rgba } = data;
|
|
38
44
|
if (!color)
|
|
39
45
|
return;
|
|
40
46
|
let colorString = color;
|
|
41
47
|
if (rgba) {
|
|
42
|
-
|
|
43
|
-
if (a != null && !Number.isNaN(a)) {
|
|
44
|
-
rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
|
|
48
|
+
if (alpha != null)
|
|
45
49
|
colorString = `rgba(${rgba.join(",")})`;
|
|
46
|
-
|
|
47
|
-
colorString = `rgba(${rgba.
|
|
48
|
-
}
|
|
50
|
+
else
|
|
51
|
+
colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
|
|
49
52
|
}
|
|
50
53
|
switch (mode) {
|
|
51
54
|
case "from":
|
|
@@ -63,107 +66,64 @@ const colorResolver = (mode) => ([, body], { theme }) => {
|
|
|
63
66
|
};
|
|
64
67
|
}
|
|
65
68
|
};
|
|
66
|
-
const bgGradientDirections = {
|
|
67
|
-
t: "top",
|
|
68
|
-
tr: "top right",
|
|
69
|
-
r: "right",
|
|
70
|
-
br: "bottom right",
|
|
71
|
-
b: "bottom",
|
|
72
|
-
bl: "bottom left",
|
|
73
|
-
l: "left",
|
|
74
|
-
tl: "top left"
|
|
75
|
-
};
|
|
76
69
|
const backgroundStyles = [
|
|
70
|
+
[/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
|
|
71
|
+
[/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
|
|
72
|
+
[/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
|
|
73
|
+
[/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
|
|
74
|
+
[/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
|
|
75
|
+
[/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
|
|
76
|
+
[/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
|
|
77
|
+
if (d in positionMap)
|
|
78
|
+
return { "background-image": `linear-gradient(to ${positionMap[d]}, var(--un-gradient-stops))` };
|
|
79
|
+
}],
|
|
80
|
+
["bg-none", { "background-image": "none" }],
|
|
81
|
+
["box-decoration-slice", { "box-decoration-break": "slice" }],
|
|
82
|
+
["box-decoration-clone", { "box-decoration-break": "clone" }],
|
|
83
|
+
["bg-auto", { "background-size": "auto" }],
|
|
84
|
+
["bg-cover", { "background-size": "cover" }],
|
|
85
|
+
["bg-contain", { "background-size": "contain" }],
|
|
77
86
|
["bg-fixed", { "background-attachment": "fixed" }],
|
|
78
87
|
["bg-local", { "background-attachment": "local" }],
|
|
79
88
|
["bg-scroll", { "background-attachment": "scroll" }],
|
|
80
|
-
["bg-blend-multiply", { "background-blend-mode": "multiply" }],
|
|
81
|
-
["bg-blend-screen", { "background-blend-mode": "screen" }],
|
|
82
|
-
["bg-blend-overlay", { "background-blend-mode": "overlay" }],
|
|
83
|
-
["bg-blend-darken", { "background-blend-mode": "darken" }],
|
|
84
|
-
["bg-blend-lighten", { "background-blend-mode": "lighten" }],
|
|
85
|
-
["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
|
|
86
|
-
["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
|
|
87
|
-
["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
|
|
88
|
-
["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
|
|
89
|
-
["bg-blend-difference", { "background-blend-mode": "difference" }],
|
|
90
|
-
["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
|
|
91
|
-
["bg-blend-hue", { "background-blend-mode": "hue" }],
|
|
92
|
-
["bg-blend-saturation", { "background-blend-mode": "saturation" }],
|
|
93
|
-
["bg-blend-color", { "background-blend-mode": "color" }],
|
|
94
|
-
["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
|
|
95
|
-
["bg-blend-normal", { "background-blend-mode": "normal" }],
|
|
96
89
|
["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
|
|
97
90
|
["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
|
|
98
91
|
["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
|
|
99
92
|
["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
|
|
100
|
-
[/^
|
|
101
|
-
[/^(?:bg-gradient-)?to-(.+)$/, colorResolver("to")],
|
|
102
|
-
[/^(?:bg-gradient-)?via-(.+)$/, colorResolver("via")],
|
|
103
|
-
[/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
|
|
104
|
-
[/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
|
|
105
|
-
[/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
|
|
106
|
-
[/^bg-gradient-to-([trbl]{1,2})$/, ([, d]) => {
|
|
107
|
-
const v = bgGradientDirections[d];
|
|
108
|
-
if (v)
|
|
109
|
-
return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
|
|
110
|
-
}],
|
|
111
|
-
["bg-none", { "background-image": "none" }],
|
|
112
|
-
["bg-origin-border", { "background-origin": "border-box" }],
|
|
113
|
-
["bg-origin-padding", { "background-origin": "padding-box" }],
|
|
114
|
-
["bg-origin-content", { "background-origin": "content-box" }],
|
|
115
|
-
["bg-bottom", { "background-position": "bottom" }],
|
|
116
|
-
["bg-center", { "background-position": "center" }],
|
|
117
|
-
["bg-left", { "background-position": "left" }],
|
|
118
|
-
["bg-left-bottom", { "background-position": "left bottom" }],
|
|
119
|
-
["bg-left-top", { "background-position": "left top" }],
|
|
120
|
-
["bg-right", { "background-position": "right" }],
|
|
121
|
-
["bg-right-bottom", { "background-position": "right bottom" }],
|
|
122
|
-
["bg-right-top", { "background-position": "right top" }],
|
|
123
|
-
["bg-top", { "background-position": "top" }],
|
|
93
|
+
[/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })],
|
|
124
94
|
["bg-repeat", { "background-repeat": "repeat" }],
|
|
125
95
|
["bg-no-repeat", { "background-repeat": "no-repeat" }],
|
|
126
96
|
["bg-repeat-x", { "background-position": "repeat-x" }],
|
|
127
97
|
["bg-repeat-y", { "background-position": "repeat-y" }],
|
|
128
98
|
["bg-repeat-round", { "background-position": "round" }],
|
|
129
99
|
["bg-repeat-space", { "background-position": "space" }],
|
|
130
|
-
["bg-
|
|
131
|
-
["bg-
|
|
132
|
-
["bg-
|
|
100
|
+
["bg-origin-border", { "background-origin": "border-box" }],
|
|
101
|
+
["bg-origin-padding", { "background-origin": "padding-box" }],
|
|
102
|
+
["bg-origin-content", { "background-origin": "content-box" }]
|
|
133
103
|
];
|
|
134
104
|
|
|
135
|
-
const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
|
|
136
105
|
const listStyle = [
|
|
137
|
-
[
|
|
138
|
-
|
|
139
|
-
const position = /outside|inside/.exec(value) ?? [];
|
|
140
|
-
if (position.length) {
|
|
106
|
+
[/^list-(disc|circle|square|decimal|zero-decimal|greek|roman|upper-roman|alpha|upper-alpha)(?:-(outside|inside))?$/, ([, style, position]) => {
|
|
107
|
+
if (position != null) {
|
|
141
108
|
return {
|
|
142
|
-
"list-style-position":
|
|
109
|
+
"list-style-position": position,
|
|
143
110
|
"list-style-type": style
|
|
144
111
|
};
|
|
145
112
|
}
|
|
146
113
|
return { "list-style-type": style };
|
|
147
114
|
}],
|
|
148
|
-
[
|
|
115
|
+
["list-outside", { "list-style-position": "outside" }],
|
|
116
|
+
["list-inside", { "list-style-position": "inside" }],
|
|
149
117
|
["list-none", { "list-style-type": "none" }]
|
|
150
118
|
];
|
|
151
|
-
const
|
|
152
|
-
[
|
|
153
|
-
["decoration-clone", { "box-decoration-break": "clone" }]
|
|
154
|
-
];
|
|
155
|
-
const accentOpacity = [
|
|
119
|
+
const accents = [
|
|
120
|
+
[/^accent-(.+)$/, colorResolver("accent-color", "accent")],
|
|
156
121
|
[/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": handler.bracket.percent(d) })]
|
|
157
122
|
];
|
|
158
|
-
const
|
|
159
|
-
[/^
|
|
160
|
-
];
|
|
161
|
-
const caretOpacity = [
|
|
123
|
+
const carets = [
|
|
124
|
+
[/^caret-(.+)$/, colorResolver("caret-color", "caret")],
|
|
162
125
|
[/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": handler.bracket.percent(d) })]
|
|
163
126
|
];
|
|
164
|
-
const caretColors = [
|
|
165
|
-
[/^caret-(.+)$/, colorResolver$1("caret-color", "caret")]
|
|
166
|
-
];
|
|
167
127
|
const imageRenderings = [
|
|
168
128
|
["image-render-auto", { "image-rendering": "auto" }],
|
|
169
129
|
["image-render-edge", { "image-rendering": "crisp-edges" }],
|
|
@@ -175,18 +135,15 @@ const imageRenderings = [
|
|
|
175
135
|
["image-rendering", "pixelated"]
|
|
176
136
|
]]
|
|
177
137
|
];
|
|
178
|
-
const overflowValues = [
|
|
179
|
-
"auto",
|
|
180
|
-
"hidden",
|
|
181
|
-
"visible",
|
|
182
|
-
"scroll",
|
|
183
|
-
"contain"
|
|
184
|
-
];
|
|
185
138
|
const overscrolls = [
|
|
186
|
-
[
|
|
139
|
+
["overscroll-auto", { "overscroll-behavior": "auto" }],
|
|
140
|
+
["overscroll-contain", { "overscroll-behavior": "contain" }],
|
|
187
141
|
["overscroll-none", { "overscroll-behavior": "none" }],
|
|
188
|
-
[
|
|
142
|
+
["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
|
|
143
|
+
["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
|
|
189
144
|
["overscroll-x-none", { "overscroll-behavior-x": "none" }],
|
|
145
|
+
["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
|
|
146
|
+
["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
|
|
190
147
|
["overscroll-y-none", { "overscroll-behavior-y": "none" }]
|
|
191
148
|
];
|
|
192
149
|
const scrollBehaviors = [
|
|
@@ -195,11 +152,7 @@ const scrollBehaviors = [
|
|
|
195
152
|
];
|
|
196
153
|
|
|
197
154
|
const columns = [
|
|
198
|
-
[/^columns-(.+)$/, ([, v]) => {
|
|
199
|
-
const column = handler.bracket.global.number.auto.numberWithUnit(v);
|
|
200
|
-
if (column)
|
|
201
|
-
return { column };
|
|
202
|
-
}],
|
|
155
|
+
[/^columns-(.+)$/, ([, v]) => ({ column: handler.bracket.global.number.auto.numberWithUnit(v) })],
|
|
203
156
|
["break-before-auto", { "break-before": "auto" }],
|
|
204
157
|
["break-before-avoid", { "break-before": "avoid" }],
|
|
205
158
|
["break-before-all", { "break-before": "all" }],
|
|
@@ -256,21 +209,21 @@ const containerShortcuts = [
|
|
|
256
209
|
}]
|
|
257
210
|
];
|
|
258
211
|
|
|
259
|
-
const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)
|
|
212
|
+
const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)";
|
|
260
213
|
const filterBase = {
|
|
261
214
|
"--un-blur": varEmpty,
|
|
262
215
|
"--un-brightness": varEmpty,
|
|
263
216
|
"--un-contrast": varEmpty,
|
|
217
|
+
"--un-drop-shadow": varEmpty,
|
|
264
218
|
"--un-grayscale": varEmpty,
|
|
265
219
|
"--un-hue-rotate": varEmpty,
|
|
266
220
|
"--un-invert": varEmpty,
|
|
267
221
|
"--un-saturate": varEmpty,
|
|
268
222
|
"--un-sepia": varEmpty,
|
|
269
|
-
"--un-drop-shadow": varEmpty,
|
|
270
223
|
"filter": filterContnet,
|
|
271
224
|
[CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
272
225
|
};
|
|
273
|
-
const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
|
|
226
|
+
const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
|
|
274
227
|
const backdropFilterBase = {
|
|
275
228
|
"--un-backdrop-blur": varEmpty,
|
|
276
229
|
"--un-backdrop-brightness": varEmpty,
|
|
@@ -278,19 +231,24 @@ const backdropFilterBase = {
|
|
|
278
231
|
"--un-backdrop-grayscale": varEmpty,
|
|
279
232
|
"--un-backdrop-hue-rotate": varEmpty,
|
|
280
233
|
"--un-backdrop-invert": varEmpty,
|
|
234
|
+
"--un-backdrop-opacity": varEmpty,
|
|
281
235
|
"--un-backdrop-saturate": varEmpty,
|
|
282
236
|
"--un-backdrop-sepia": varEmpty,
|
|
283
237
|
"-webkit-backdrop-filter": backdropFilterContent,
|
|
284
238
|
"backdrop-filter": backdropFilterContent,
|
|
285
239
|
[CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
286
240
|
};
|
|
287
|
-
const percentWithDefault = (
|
|
288
|
-
|
|
289
|
-
|
|
241
|
+
const percentWithDefault = (str) => {
|
|
242
|
+
let v = handler.bracket(str || "");
|
|
243
|
+
if (v != null)
|
|
244
|
+
return v;
|
|
245
|
+
v = str ? handler.percent(str) : "1";
|
|
246
|
+
if (v != null && parseFloat(v) <= 1)
|
|
247
|
+
return v;
|
|
290
248
|
};
|
|
291
249
|
const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
|
|
292
250
|
const value = resolver(s, theme);
|
|
293
|
-
if (value) {
|
|
251
|
+
if (value != null && value !== "") {
|
|
294
252
|
return [
|
|
295
253
|
b ? backdropFilterBase : filterBase,
|
|
296
254
|
{ [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
|
|
@@ -301,49 +259,37 @@ const filters = [
|
|
|
301
259
|
["filter", filterBase],
|
|
302
260
|
["backdrop-filter", backdropFilterBase],
|
|
303
261
|
[/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
|
|
304
|
-
[/^(backdrop-)?brightness-(
|
|
305
|
-
[/^(backdrop-)?contrast-(
|
|
262
|
+
[/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
|
|
263
|
+
[/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
|
|
306
264
|
[/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
|
|
307
|
-
|
|
308
|
-
if (v)
|
|
265
|
+
let v = theme.dropShadow?.[s || "DEFAULT"];
|
|
266
|
+
if (v != null)
|
|
309
267
|
return toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
|
|
268
|
+
v = handler.bracket(s);
|
|
269
|
+
if (v != null)
|
|
270
|
+
return `drop-shadow(${v})`;
|
|
310
271
|
})],
|
|
311
|
-
[/^(backdrop-)?grayscale(?:-(
|
|
312
|
-
[/^(backdrop-)?hue-rotate-(
|
|
313
|
-
[/^(backdrop-)?invert(?:-(
|
|
314
|
-
[/^(backdrop-)
|
|
315
|
-
[/^(backdrop-)?
|
|
272
|
+
[/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
|
|
273
|
+
[/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
|
|
274
|
+
[/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
|
|
275
|
+
[/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
|
|
276
|
+
[/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
|
|
277
|
+
[/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
|
|
316
278
|
["filter-none", { filter: "none" }],
|
|
317
279
|
["backdrop-filter-none", {
|
|
318
280
|
"-webkit-backdrop-filter": "none",
|
|
319
281
|
"backdrop-filter": "none"
|
|
320
|
-
}]
|
|
321
|
-
]
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
|
|
327
|
-
["mix-blend-darken", { "mix-blend-mode": "darken" }],
|
|
328
|
-
["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
|
|
329
|
-
["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
|
|
330
|
-
["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
|
|
331
|
-
["mix-blend-color-light", { "mix-blend-mode": "color-light" }],
|
|
332
|
-
["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
|
|
333
|
-
["mix-blend-difference", { "mix-blend-mode": "difference" }],
|
|
334
|
-
["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
|
|
335
|
-
["mix-blend-hue", { "mix-blend-mode": "hue" }],
|
|
336
|
-
["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
|
|
337
|
-
["mix-blend-color", { "mix-blend-mode": "color" }],
|
|
338
|
-
["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
|
|
339
|
-
["mix-blend-normal", { "mix-blend-mode": "normal" }]
|
|
282
|
+
}],
|
|
283
|
+
[/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
|
|
284
|
+
[/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
|
|
285
|
+
"-webkit-backdrop-filter": `${s}(0)`,
|
|
286
|
+
"backdrop-filter": `${s}(0)`
|
|
287
|
+
})]
|
|
340
288
|
];
|
|
341
289
|
|
|
342
290
|
const spaces = [
|
|
343
291
|
[/^space-?([xy])-?(-?.+)$/, (match) => {
|
|
344
|
-
const [, direction
|
|
345
|
-
if (size === "reverse")
|
|
346
|
-
return { [`--un-space-${direction}-reverse`]: 1 };
|
|
292
|
+
const [, direction] = match;
|
|
347
293
|
const results = directionSize("margin")(match)?.map((item) => {
|
|
348
294
|
const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
|
|
349
295
|
return [item[0], value];
|
|
@@ -354,7 +300,8 @@ const spaces = [
|
|
|
354
300
|
...results
|
|
355
301
|
];
|
|
356
302
|
}
|
|
357
|
-
}]
|
|
303
|
+
}],
|
|
304
|
+
[/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
|
|
358
305
|
];
|
|
359
306
|
|
|
360
307
|
const textTransforms = [
|
|
@@ -421,7 +368,8 @@ const screenReadersAccess = [
|
|
|
421
368
|
];
|
|
422
369
|
const isolations = [
|
|
423
370
|
["isolate", { isolation: "isolate" }],
|
|
424
|
-
["isolate-auto", { isolation: "auto" }]
|
|
371
|
+
["isolate-auto", { isolation: "auto" }],
|
|
372
|
+
["isolation-auto", { isolation: "auto" }]
|
|
425
373
|
];
|
|
426
374
|
const objectPositions = [
|
|
427
375
|
["object-cover", { "object-fit": "cover" }],
|
|
@@ -429,17 +377,43 @@ const objectPositions = [
|
|
|
429
377
|
["object-fill", { "object-fit": "fill" }],
|
|
430
378
|
["object-scale-down", { "object-fit": "scale-down" }],
|
|
431
379
|
["object-none", { "object-fit": "none" }],
|
|
432
|
-
[
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
["
|
|
436
|
-
["
|
|
437
|
-
["
|
|
438
|
-
["
|
|
439
|
-
["
|
|
440
|
-
["
|
|
441
|
-
["
|
|
442
|
-
["
|
|
380
|
+
[/^object-([-\w]+)$/, ([, s]) => ({ "object-position": positionMap[s] })]
|
|
381
|
+
];
|
|
382
|
+
const backgroundBlendModes = [
|
|
383
|
+
["bg-blend-multiply", { "background-blend-mode": "multiply" }],
|
|
384
|
+
["bg-blend-screen", { "background-blend-mode": "screen" }],
|
|
385
|
+
["bg-blend-overlay", { "background-blend-mode": "overlay" }],
|
|
386
|
+
["bg-blend-darken", { "background-blend-mode": "darken" }],
|
|
387
|
+
["bg-blend-lighten", { "background-blend-mode": "lighten" }],
|
|
388
|
+
["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
|
|
389
|
+
["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
|
|
390
|
+
["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
|
|
391
|
+
["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
|
|
392
|
+
["bg-blend-difference", { "background-blend-mode": "difference" }],
|
|
393
|
+
["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
|
|
394
|
+
["bg-blend-hue", { "background-blend-mode": "hue" }],
|
|
395
|
+
["bg-blend-saturation", { "background-blend-mode": "saturation" }],
|
|
396
|
+
["bg-blend-color", { "background-blend-mode": "color" }],
|
|
397
|
+
["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
|
|
398
|
+
["bg-blend-normal", { "background-blend-mode": "normal" }]
|
|
399
|
+
];
|
|
400
|
+
const mixBlendModes = [
|
|
401
|
+
["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
|
|
402
|
+
["mix-blend-screen", { "mix-blend-mode": "screen" }],
|
|
403
|
+
["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
|
|
404
|
+
["mix-blend-darken", { "mix-blend-mode": "darken" }],
|
|
405
|
+
["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
|
|
406
|
+
["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
|
|
407
|
+
["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
|
|
408
|
+
["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
|
|
409
|
+
["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
|
|
410
|
+
["mix-blend-difference", { "mix-blend-mode": "difference" }],
|
|
411
|
+
["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
|
|
412
|
+
["mix-blend-hue", { "mix-blend-mode": "hue" }],
|
|
413
|
+
["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
|
|
414
|
+
["mix-blend-color", { "mix-blend-mode": "color" }],
|
|
415
|
+
["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
|
|
416
|
+
["mix-blend-normal", { "mix-blend-mode": "normal" }]
|
|
443
417
|
];
|
|
444
418
|
|
|
445
419
|
const tables = [
|
|
@@ -480,33 +454,24 @@ const cssVariables = [[
|
|
|
480
454
|
/^(.+)-\$(.+)$/,
|
|
481
455
|
([, name, varname]) => {
|
|
482
456
|
const prop = variablesAbbrMap[name];
|
|
483
|
-
if (prop)
|
|
484
|
-
return {
|
|
485
|
-
[prop]: `var(--${varname})`
|
|
486
|
-
};
|
|
487
|
-
}
|
|
457
|
+
if (prop)
|
|
458
|
+
return { [prop]: `var(--${varname})` };
|
|
488
459
|
}
|
|
489
460
|
]];
|
|
490
461
|
|
|
491
|
-
const
|
|
492
|
-
[/^divide-(.+)$/, colorResolver$1("border-color", "divide")],
|
|
493
|
-
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })]
|
|
494
|
-
];
|
|
495
|
-
const divideSizes = [
|
|
462
|
+
const divides = [
|
|
496
463
|
[/^divide-?([xy])$/, handlerDivide],
|
|
497
464
|
[/^divide-?([xy])-?(-?.+)$/, handlerDivide],
|
|
498
|
-
[/^divide-?([xy])-reverse$/, ([, d]) => [
|
|
499
|
-
]
|
|
500
|
-
|
|
465
|
+
[/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
|
|
466
|
+
[/^divide-(.+)$/, colorResolver("border-color", "divide")],
|
|
467
|
+
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
|
|
501
468
|
["divide-solid", { "border-style": "solid" }],
|
|
502
469
|
["divide-dashed", { "border-style": "dashed" }],
|
|
503
470
|
["divide-dotted", { "border-style": "dotted" }],
|
|
504
471
|
["divide-double", { "border-style": "double" }],
|
|
505
472
|
["divide-none", { "border-style": "none" }]
|
|
506
473
|
];
|
|
507
|
-
|
|
508
|
-
function handlerDivide([, a, b]) {
|
|
509
|
-
const [d, s = "1"] = directionMap[a] ? [a, b] : ["", a];
|
|
474
|
+
function handlerDivide([, d, s = "1"]) {
|
|
510
475
|
const v = handler.bracket.px(s);
|
|
511
476
|
if (v != null) {
|
|
512
477
|
const results = directionMap[d].map((item) => {
|
|
@@ -589,7 +554,7 @@ const touchActions = [
|
|
|
589
554
|
];
|
|
590
555
|
|
|
591
556
|
const scrolls = [
|
|
592
|
-
[/^snap-(x|y|
|
|
557
|
+
[/^snap-(x|y|both)$/, ([, d]) => [
|
|
593
558
|
{
|
|
594
559
|
"--un-scroll-snap-strictness": "proximity",
|
|
595
560
|
[CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
@@ -615,6 +580,11 @@ const scrolls = [
|
|
|
615
580
|
[/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
|
|
616
581
|
];
|
|
617
582
|
|
|
583
|
+
const placeholders = [
|
|
584
|
+
[/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
|
|
585
|
+
[/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
|
|
586
|
+
];
|
|
587
|
+
|
|
618
588
|
const rules = [
|
|
619
589
|
cssVariables$1,
|
|
620
590
|
cssVariables,
|
|
@@ -661,7 +631,6 @@ const rules = [
|
|
|
661
631
|
breaks,
|
|
662
632
|
borders,
|
|
663
633
|
bgColors,
|
|
664
|
-
boxDecorationBreaks,
|
|
665
634
|
backgroundStyles,
|
|
666
635
|
svgUtilities,
|
|
667
636
|
objectPositions,
|
|
@@ -682,11 +651,10 @@ const rules = [
|
|
|
682
651
|
hyphens,
|
|
683
652
|
writingModes,
|
|
684
653
|
writingOrientations,
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
accentColors,
|
|
688
|
-
accentOpacity,
|
|
654
|
+
carets,
|
|
655
|
+
accents,
|
|
689
656
|
opacity,
|
|
657
|
+
backgroundBlendModes,
|
|
690
658
|
mixBlendModes,
|
|
691
659
|
boxShadows,
|
|
692
660
|
outline,
|
|
@@ -696,6 +664,7 @@ const rules = [
|
|
|
696
664
|
transitions,
|
|
697
665
|
willChange,
|
|
698
666
|
contents,
|
|
667
|
+
placeholders,
|
|
699
668
|
questionMark
|
|
700
669
|
].flat(1);
|
|
701
670
|
|
|
@@ -854,27 +823,43 @@ const theme = {
|
|
|
854
823
|
};
|
|
855
824
|
|
|
856
825
|
const variantColorsScheme = [
|
|
857
|
-
variantMatcher("
|
|
858
|
-
variantMatcher("
|
|
859
|
-
(
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
826
|
+
variantMatcher(".dark", (input) => `.dark $$ ${input}`),
|
|
827
|
+
variantMatcher(".light", (input) => `.light $$ ${input}`),
|
|
828
|
+
variantParentMatcher("@dark", "@media (prefers-color-scheme: dark)"),
|
|
829
|
+
variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
|
|
830
|
+
];
|
|
831
|
+
|
|
832
|
+
const variantSpaceAndDivide = (matcher) => {
|
|
833
|
+
if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
|
|
834
|
+
return {
|
|
835
|
+
matcher,
|
|
836
|
+
selector: (input) => {
|
|
837
|
+
return `${input}>:not([hidden])~:not([hidden])`;
|
|
838
|
+
}
|
|
839
|
+
};
|
|
840
|
+
}
|
|
841
|
+
};
|
|
842
|
+
|
|
843
|
+
const placeholderModifier = (input, { theme }) => {
|
|
844
|
+
const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
|
|
845
|
+
if (m) {
|
|
846
|
+
const [, pre = "", p, body] = m;
|
|
847
|
+
if (hasColorValue(body, theme) || hasOpacityValue(body)) {
|
|
871
848
|
return {
|
|
872
|
-
|
|
873
|
-
parent: "@media (prefers-color-scheme: light)"
|
|
849
|
+
matcher: `${pre}${p}$-placeholder-${body}`
|
|
874
850
|
};
|
|
875
851
|
}
|
|
876
852
|
}
|
|
877
|
-
|
|
853
|
+
};
|
|
854
|
+
function hasColorValue(body, theme) {
|
|
855
|
+
return !!parseColor(body, theme)?.color;
|
|
856
|
+
}
|
|
857
|
+
function hasOpacityValue(body) {
|
|
858
|
+
const match = body.match(/^op(?:acity)?-?(.+)$/);
|
|
859
|
+
if (match && match[1] != null)
|
|
860
|
+
return handler.bracket.percent.cssvar(match[1]) != null;
|
|
861
|
+
return false;
|
|
862
|
+
}
|
|
878
863
|
|
|
879
864
|
const presetWind = (options = {}) => {
|
|
880
865
|
options.dark = options.dark ?? "class";
|
|
@@ -887,7 +872,9 @@ const presetWind = (options = {}) => {
|
|
|
887
872
|
...containerShortcuts
|
|
888
873
|
],
|
|
889
874
|
variants: [
|
|
890
|
-
|
|
875
|
+
placeholderModifier,
|
|
876
|
+
variantSpaceAndDivide,
|
|
877
|
+
...variants(options),
|
|
891
878
|
...variantColorsScheme
|
|
892
879
|
],
|
|
893
880
|
options
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unocss/preset-wind",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.21.0",
|
|
4
4
|
"description": "Tailwind / Windi CSS compact preset for UnoCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"unocss",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"*.css"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@unocss/core": "0.
|
|
39
|
-
"@unocss/preset-mini": "0.
|
|
38
|
+
"@unocss/core": "0.21.0",
|
|
39
|
+
"@unocss/preset-mini": "0.21.0"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"build": "unbuild",
|