@unocss/preset-wind 0.53.0 → 0.53.3
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 +40 -40
- package/dist/index.mjs +41 -41
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -48,12 +48,12 @@ const animations = [
|
|
|
48
48
|
}
|
|
49
49
|
];
|
|
50
50
|
}
|
|
51
|
-
return { animation: utils.
|
|
51
|
+
return { animation: utils.h.bracket.cssvar(name) };
|
|
52
52
|
}, { autocomplete: "animate-$animation.keyframes" }],
|
|
53
|
-
[/^animate-name-(.+)/, ([, d]) => ({ "animation-name": utils.
|
|
54
|
-
[/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? utils.
|
|
55
|
-
[/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? utils.
|
|
56
|
-
[/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? utils.
|
|
53
|
+
[/^animate-name-(.+)/, ([, d]) => ({ "animation-name": utils.h.bracket.cssvar(d) ?? d })],
|
|
54
|
+
[/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? utils.h.bracket.cssvar.time(d) }), { autocomplete: ["animate-duration", "animate-duration-$duration"] }],
|
|
55
|
+
[/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? utils.h.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }],
|
|
56
|
+
[/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? utils.h.bracket.cssvar(d) }), { autocomplete: ["animate-ease", "animate-ease-$easing"] }],
|
|
57
57
|
[
|
|
58
58
|
/^animate-(fill-mode-|fill-|mode-)?(.+)$/,
|
|
59
59
|
([, t, d]) => ["none", "forwards", "backwards", "both", ...[t ? utils.globalKeywords : []]].includes(d) ? { "animation-fill-mode": d } : void 0,
|
|
@@ -76,7 +76,7 @@ const animations = [
|
|
|
76
76
|
]
|
|
77
77
|
}
|
|
78
78
|
],
|
|
79
|
-
[/^animate-(?:iteration
|
|
79
|
+
[/^animate-(?:iteration-count-|iteration-|count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.h.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
|
|
80
80
|
[
|
|
81
81
|
/^animate-(play-state-|play-|state-)?(.+)$/,
|
|
82
82
|
([, t, d]) => ["paused", "running", ...[t ? utils.globalKeywords : []]].includes(d) ? { "animation-play-state": d } : void 0,
|
|
@@ -141,7 +141,7 @@ function bgGradientColorResolver() {
|
|
|
141
141
|
function bgGradientPositionResolver() {
|
|
142
142
|
return ([, mode, body]) => {
|
|
143
143
|
return {
|
|
144
|
-
[`--un-gradient-${mode}-position`]: `${Number(utils.
|
|
144
|
+
[`--un-gradient-${mode}-position`]: `${Number(utils.h.bracket.cssvar.percent(body)) * 100}%`
|
|
145
145
|
};
|
|
146
146
|
};
|
|
147
147
|
}
|
|
@@ -151,20 +151,20 @@ const bgPositionRE = /^\[position:.+\]$/;
|
|
|
151
151
|
const backgroundStyles = [
|
|
152
152
|
[/^bg-(.+)$/, ([, d]) => {
|
|
153
153
|
if (bgUrlRE.test(d))
|
|
154
|
-
return { "--un-url": utils.
|
|
155
|
-
if (bgLengthRE.test(d) && utils.
|
|
156
|
-
return { "background-size": utils.
|
|
157
|
-
if (bgPositionRE.test(d) && utils.
|
|
158
|
-
return { "background-position": utils.
|
|
154
|
+
return { "--un-url": utils.h.bracket(d), "background-image": "var(--un-url)" };
|
|
155
|
+
if (bgLengthRE.test(d) && utils.h.bracketOfLength(d) != null)
|
|
156
|
+
return { "background-size": utils.h.bracketOfLength(d).split(" ").map((e) => utils.h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
|
|
157
|
+
if (bgPositionRE.test(d) && utils.h.bracketOfPosition(d) != null)
|
|
158
|
+
return { "background-position": utils.h.bracketOfPosition(d).split(" ").map((e) => utils.h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
|
|
159
159
|
}],
|
|
160
|
-
[/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": utils.
|
|
160
|
+
[/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": utils.h.bracket(d) }), {
|
|
161
161
|
autocomplete: ["bg-gradient", "bg-gradient-(from|to|via)", "bg-gradient-(from|to|via)-$colors", "bg-gradient-(from|to|via)-(op|opacity)", "bg-gradient-(from|to|via)-(op|opacity)-<percent>"]
|
|
162
162
|
}],
|
|
163
|
-
[/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": utils.
|
|
163
|
+
[/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": utils.h.bracket(s) })],
|
|
164
164
|
[/^(?:bg-gradient-)?(from)-(.+)$/, bgGradientColorResolver()],
|
|
165
165
|
[/^(?:bg-gradient-)?(via)-(.+)$/, bgGradientColorResolver()],
|
|
166
166
|
[/^(?:bg-gradient-)?(to)-(.+)$/, bgGradientColorResolver()],
|
|
167
|
-
[/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: utils.
|
|
167
|
+
[/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: utils.h.bracket.percent(opacity) })],
|
|
168
168
|
[/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
|
|
169
169
|
[/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
|
|
170
170
|
"background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
|
|
@@ -179,7 +179,7 @@ const backgroundStyles = [
|
|
|
179
179
|
}
|
|
180
180
|
}, { autocomplete: `bg-gradient-to-(${Object.keys(utils.positionMap).filter((k) => k.length <= 2 && Array.from(k).every((c) => "rltb".includes(c))).join("|")})` }],
|
|
181
181
|
[/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => {
|
|
182
|
-
const v = d in utils.positionMap ? `to ${utils.positionMap[d]}` : utils.
|
|
182
|
+
const v = d in utils.positionMap ? `to ${utils.positionMap[d]}` : utils.h.bracket(d);
|
|
183
183
|
if (v != null) {
|
|
184
184
|
return {
|
|
185
185
|
"--un-gradient-shape": v,
|
|
@@ -251,18 +251,18 @@ const listStyle = [
|
|
|
251
251
|
["list-none", { "list-style-type": "none" }],
|
|
252
252
|
[/^list-image-(.+)$/, ([, d]) => {
|
|
253
253
|
if (/^\[url\(.+\)\]$/.test(d))
|
|
254
|
-
return { "list-style-image": utils.
|
|
254
|
+
return { "list-style-image": utils.h.bracket(d) };
|
|
255
255
|
}],
|
|
256
256
|
["list-image-none", { "list-style-image": "none" }],
|
|
257
257
|
...utils.makeGlobalStaticRules("list", "list-style-type")
|
|
258
258
|
];
|
|
259
259
|
const accents = [
|
|
260
260
|
[/^accent-(.+)$/, utils.colorResolver("accent-color", "accent"), { autocomplete: "accent-$colors" }],
|
|
261
|
-
[/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.
|
|
261
|
+
[/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.h.bracket.percent(d) }), { autocomplete: ["accent-(op|opacity)", "accent-(op|opacity)-<percent>"] }]
|
|
262
262
|
];
|
|
263
263
|
const carets = [
|
|
264
264
|
[/^caret-(.+)$/, utils.colorResolver("caret-color", "caret"), { autocomplete: "caret-$colors" }],
|
|
265
|
-
[/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.
|
|
265
|
+
[/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.h.bracket.percent(d) }), { autocomplete: ["caret-(op|opacity)", "caret-(op|opacity)-<percent>"] }]
|
|
266
266
|
];
|
|
267
267
|
const imageRenderings = [
|
|
268
268
|
["image-render-auto", { "image-rendering": "auto" }],
|
|
@@ -296,7 +296,7 @@ const scrollBehaviors = [
|
|
|
296
296
|
];
|
|
297
297
|
|
|
298
298
|
const columns = [
|
|
299
|
-
[/^columns-(.+)$/, ([, v]) => ({ columns: utils.
|
|
299
|
+
[/^columns-(.+)$/, ([, v]) => ({ columns: utils.h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: "columns-<num>" }],
|
|
300
300
|
["break-before-auto", { "break-before": "auto" }],
|
|
301
301
|
["break-before-avoid", { "break-before": "avoid" }],
|
|
302
302
|
["break-before-all", { "break-before": "all" }],
|
|
@@ -410,10 +410,10 @@ const backdropFilterBase = {
|
|
|
410
410
|
};
|
|
411
411
|
const backdropFilterProperty = "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)";
|
|
412
412
|
function percentWithDefault(str) {
|
|
413
|
-
let v = utils.
|
|
413
|
+
let v = utils.h.bracket.cssvar(str || "");
|
|
414
414
|
if (v != null)
|
|
415
415
|
return v;
|
|
416
|
-
v = str ? utils.
|
|
416
|
+
v = str ? utils.h.percent(str) : "1";
|
|
417
417
|
if (v != null && Number.parseFloat(v) <= 1)
|
|
418
418
|
return v;
|
|
419
419
|
}
|
|
@@ -445,7 +445,7 @@ function dropShadowResolver([, s], { theme }) {
|
|
|
445
445
|
"filter": filterProperty
|
|
446
446
|
};
|
|
447
447
|
}
|
|
448
|
-
v = utils.
|
|
448
|
+
v = utils.h.bracket.cssvar(s);
|
|
449
449
|
if (v != null) {
|
|
450
450
|
return {
|
|
451
451
|
"--un-drop-shadow": `drop-shadow(${v})`,
|
|
@@ -454,9 +454,9 @@ function dropShadowResolver([, s], { theme }) {
|
|
|
454
454
|
}
|
|
455
455
|
}
|
|
456
456
|
const filters = [
|
|
457
|
-
[/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.
|
|
458
|
-
[/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.
|
|
459
|
-
[/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.
|
|
457
|
+
[/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }],
|
|
458
|
+
[/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
|
|
459
|
+
[/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }],
|
|
460
460
|
[/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, {
|
|
461
461
|
autocomplete: [
|
|
462
462
|
"filter-drop",
|
|
@@ -475,12 +475,12 @@ const filters = [
|
|
|
475
475
|
]
|
|
476
476
|
}],
|
|
477
477
|
[/^(?:filter-)?drop-shadow-color-(.+)$/, utils.colorResolver("--un-drop-shadow-color", "drop-shadow")],
|
|
478
|
-
[/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.
|
|
478
|
+
[/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.h.bracket.percent(opacity) })],
|
|
479
479
|
[/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
|
|
480
|
-
[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.
|
|
480
|
+
[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.h.bracket.cssvar.degree(s))],
|
|
481
481
|
[/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
|
|
482
|
-
[/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => utils.
|
|
483
|
-
[/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.
|
|
482
|
+
[/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
|
|
483
|
+
[/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"] }],
|
|
484
484
|
[/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), { autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"] }],
|
|
485
485
|
["filter", { filter: filterProperty }],
|
|
486
486
|
["backdrop-filter", {
|
|
@@ -506,7 +506,7 @@ const spaces = [
|
|
|
506
506
|
[/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
|
|
507
507
|
];
|
|
508
508
|
function handlerSpace([, d, s], { theme }) {
|
|
509
|
-
let v = theme.spacing?.[s || "DEFAULT"] ?? utils.
|
|
509
|
+
let v = theme.spacing?.[s || "DEFAULT"] ?? utils.h.bracket.cssvar.auto.fraction.rem(s || "1");
|
|
510
510
|
if (v != null) {
|
|
511
511
|
if (v === "0")
|
|
512
512
|
v = "0px";
|
|
@@ -592,8 +592,8 @@ const objectPositions = [
|
|
|
592
592
|
[/^object-(.+)$/, ([, d]) => {
|
|
593
593
|
if (utils.positionMap[d])
|
|
594
594
|
return { "object-position": utils.positionMap[d] };
|
|
595
|
-
if (utils.
|
|
596
|
-
return { "object-position": utils.
|
|
595
|
+
if (utils.h.bracketOfPosition(d) != null)
|
|
596
|
+
return { "object-position": utils.h.bracketOfPosition(d).split(" ").map((e) => utils.h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
|
|
597
597
|
}, { autocomplete: `object-(${Object.keys(utils.positionMap).join("|")})` }]
|
|
598
598
|
];
|
|
599
599
|
const backgroundBlendModes = [
|
|
@@ -655,7 +655,7 @@ const tables = [
|
|
|
655
655
|
["border-collapse", { "border-collapse": "collapse" }],
|
|
656
656
|
["border-separate", { "border-collapse": "separate" }],
|
|
657
657
|
[/^border-spacing-(.+)$/, ([, s], { theme }) => {
|
|
658
|
-
const v = theme.spacing?.[s] ?? utils.
|
|
658
|
+
const v = theme.spacing?.[s] ?? utils.h.bracket.cssvar.global.auto.fraction.rem(s);
|
|
659
659
|
if (v != null) {
|
|
660
660
|
return {
|
|
661
661
|
"--un-border-spacing-x": v,
|
|
@@ -665,7 +665,7 @@ const tables = [
|
|
|
665
665
|
}
|
|
666
666
|
}, { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
|
|
667
667
|
[/^border-spacing-([xy])-(.+)$/, ([, d, s], { theme }) => {
|
|
668
|
-
const v = theme.spacing?.[s] ?? utils.
|
|
668
|
+
const v = theme.spacing?.[s] ?? utils.h.bracket.cssvar.global.auto.fraction.rem(s);
|
|
669
669
|
if (v != null) {
|
|
670
670
|
return {
|
|
671
671
|
[`--un-border-spacing-${d}`]: v,
|
|
@@ -700,7 +700,7 @@ const cssVariables = [
|
|
|
700
700
|
[/^(.+?)-(\$.+)$/, ([, name, varname]) => {
|
|
701
701
|
const prop = variablesAbbrMap[name];
|
|
702
702
|
if (prop)
|
|
703
|
-
return { [prop]: utils.
|
|
703
|
+
return { [prop]: utils.h.cssvar(varname) };
|
|
704
704
|
}]
|
|
705
705
|
];
|
|
706
706
|
|
|
@@ -712,11 +712,11 @@ const divides = [
|
|
|
712
712
|
[/^divide-(block|inline)-(-?.+)$/, handlerDivide],
|
|
713
713
|
[/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
|
|
714
714
|
[/^divide-(.+)$/, utils.colorResolver("border-color", "divide"), { autocomplete: "divide-$colors" }],
|
|
715
|
-
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.
|
|
715
|
+
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.h.bracket.percent(opacity) }), { autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-<percent>"] }],
|
|
716
716
|
..._.borderStyles.map((style) => [`divide-${style}`, { "border-style": style }])
|
|
717
717
|
];
|
|
718
718
|
function handlerDivide([, d, s], { theme }) {
|
|
719
|
-
let v = theme.lineWidth?.[s || "DEFAULT"] ?? utils.
|
|
719
|
+
let v = theme.lineWidth?.[s || "DEFAULT"] ?? utils.h.bracket.cssvar.px(s || "1");
|
|
720
720
|
if (v != null) {
|
|
721
721
|
if (v === "0")
|
|
722
722
|
v = "0px";
|
|
@@ -841,7 +841,7 @@ const scrolls = [
|
|
|
841
841
|
|
|
842
842
|
const placeholders = [
|
|
843
843
|
[/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder"), { autocomplete: "placeholder-$colors" }],
|
|
844
|
-
[/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.
|
|
844
|
+
[/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.h.bracket.percent(opacity) }), { autocomplete: ["placeholder-(op|opacity)", "placeholder-(op|opacity)-<percent>"] }]
|
|
845
845
|
];
|
|
846
846
|
|
|
847
847
|
const rules = [
|
|
@@ -1206,7 +1206,7 @@ const placeholderModifier = (input, { theme }) => {
|
|
|
1206
1206
|
function hasOpacityValue(body) {
|
|
1207
1207
|
const match = body.match(/^op(?:acity)?-?(.+)$/);
|
|
1208
1208
|
if (match && match[1] != null)
|
|
1209
|
-
return utils.
|
|
1209
|
+
return utils.h.bracket.percent(match[1]) != null;
|
|
1210
1210
|
return false;
|
|
1211
1211
|
}
|
|
1212
1212
|
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { presetMini } from '@unocss/preset-mini';
|
|
2
2
|
export { colors, preflights } from '@unocss/preset-mini';
|
|
3
|
-
import {
|
|
3
|
+
import { h, globalKeywords, makeGlobalStaticRules, positionMap, parseColor, colorToString, colorOpacityToString, colorResolver, resolveBreakpoints, colorableShadows, directionMap, directionSize, variantMatcher, variantParentMatcher, hasParseableColor } from '@unocss/preset-mini/utils';
|
|
4
4
|
import { isString, warnOnce } from '@unocss/core';
|
|
5
5
|
import * as _ from '@unocss/preset-mini/rules';
|
|
6
6
|
import { varEmpty, borderStyles, transformBase, boxShadowsBase, ringBase } from '@unocss/preset-mini/rules';
|
|
@@ -32,12 +32,12 @@ const animations = [
|
|
|
32
32
|
}
|
|
33
33
|
];
|
|
34
34
|
}
|
|
35
|
-
return { animation:
|
|
35
|
+
return { animation: h.bracket.cssvar(name) };
|
|
36
36
|
}, { autocomplete: "animate-$animation.keyframes" }],
|
|
37
|
-
[/^animate-name-(.+)/, ([, d]) => ({ "animation-name":
|
|
38
|
-
[/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ??
|
|
39
|
-
[/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ??
|
|
40
|
-
[/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ??
|
|
37
|
+
[/^animate-name-(.+)/, ([, d]) => ({ "animation-name": h.bracket.cssvar(d) ?? d })],
|
|
38
|
+
[/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-duration", "animate-duration-$duration"] }],
|
|
39
|
+
[/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }],
|
|
40
|
+
[/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? h.bracket.cssvar(d) }), { autocomplete: ["animate-ease", "animate-ease-$easing"] }],
|
|
41
41
|
[
|
|
42
42
|
/^animate-(fill-mode-|fill-|mode-)?(.+)$/,
|
|
43
43
|
([, t, d]) => ["none", "forwards", "backwards", "both", ...[t ? globalKeywords : []]].includes(d) ? { "animation-fill-mode": d } : void 0,
|
|
@@ -60,7 +60,7 @@ const animations = [
|
|
|
60
60
|
]
|
|
61
61
|
}
|
|
62
62
|
],
|
|
63
|
-
[/^animate-(?:iteration
|
|
63
|
+
[/^animate-(?:iteration-count-|iteration-|count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": h.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
|
|
64
64
|
[
|
|
65
65
|
/^animate-(play-state-|play-|state-)?(.+)$/,
|
|
66
66
|
([, t, d]) => ["paused", "running", ...[t ? globalKeywords : []]].includes(d) ? { "animation-play-state": d } : void 0,
|
|
@@ -125,7 +125,7 @@ function bgGradientColorResolver() {
|
|
|
125
125
|
function bgGradientPositionResolver() {
|
|
126
126
|
return ([, mode, body]) => {
|
|
127
127
|
return {
|
|
128
|
-
[`--un-gradient-${mode}-position`]: `${Number(
|
|
128
|
+
[`--un-gradient-${mode}-position`]: `${Number(h.bracket.cssvar.percent(body)) * 100}%`
|
|
129
129
|
};
|
|
130
130
|
};
|
|
131
131
|
}
|
|
@@ -135,20 +135,20 @@ const bgPositionRE = /^\[position:.+\]$/;
|
|
|
135
135
|
const backgroundStyles = [
|
|
136
136
|
[/^bg-(.+)$/, ([, d]) => {
|
|
137
137
|
if (bgUrlRE.test(d))
|
|
138
|
-
return { "--un-url":
|
|
139
|
-
if (bgLengthRE.test(d) &&
|
|
140
|
-
return { "background-size":
|
|
141
|
-
if (bgPositionRE.test(d) &&
|
|
142
|
-
return { "background-position":
|
|
138
|
+
return { "--un-url": h.bracket(d), "background-image": "var(--un-url)" };
|
|
139
|
+
if (bgLengthRE.test(d) && h.bracketOfLength(d) != null)
|
|
140
|
+
return { "background-size": h.bracketOfLength(d).split(" ").map((e) => h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
|
|
141
|
+
if (bgPositionRE.test(d) && h.bracketOfPosition(d) != null)
|
|
142
|
+
return { "background-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
|
|
143
143
|
}],
|
|
144
|
-
[/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient":
|
|
144
|
+
[/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": h.bracket(d) }), {
|
|
145
145
|
autocomplete: ["bg-gradient", "bg-gradient-(from|to|via)", "bg-gradient-(from|to|via)-$colors", "bg-gradient-(from|to|via)-(op|opacity)", "bg-gradient-(from|to|via)-(op|opacity)-<percent>"]
|
|
146
146
|
}],
|
|
147
|
-
[/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops":
|
|
147
|
+
[/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": h.bracket(s) })],
|
|
148
148
|
[/^(?:bg-gradient-)?(from)-(.+)$/, bgGradientColorResolver()],
|
|
149
149
|
[/^(?:bg-gradient-)?(via)-(.+)$/, bgGradientColorResolver()],
|
|
150
150
|
[/^(?:bg-gradient-)?(to)-(.+)$/, bgGradientColorResolver()],
|
|
151
|
-
[/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]:
|
|
151
|
+
[/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: h.bracket.percent(opacity) })],
|
|
152
152
|
[/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
|
|
153
153
|
[/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
|
|
154
154
|
"background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
|
|
@@ -163,7 +163,7 @@ const backgroundStyles = [
|
|
|
163
163
|
}
|
|
164
164
|
}, { autocomplete: `bg-gradient-to-(${Object.keys(positionMap).filter((k) => k.length <= 2 && Array.from(k).every((c) => "rltb".includes(c))).join("|")})` }],
|
|
165
165
|
[/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => {
|
|
166
|
-
const v = d in positionMap ? `to ${positionMap[d]}` :
|
|
166
|
+
const v = d in positionMap ? `to ${positionMap[d]}` : h.bracket(d);
|
|
167
167
|
if (v != null) {
|
|
168
168
|
return {
|
|
169
169
|
"--un-gradient-shape": v,
|
|
@@ -235,18 +235,18 @@ const listStyle = [
|
|
|
235
235
|
["list-none", { "list-style-type": "none" }],
|
|
236
236
|
[/^list-image-(.+)$/, ([, d]) => {
|
|
237
237
|
if (/^\[url\(.+\)\]$/.test(d))
|
|
238
|
-
return { "list-style-image":
|
|
238
|
+
return { "list-style-image": h.bracket(d) };
|
|
239
239
|
}],
|
|
240
240
|
["list-image-none", { "list-style-image": "none" }],
|
|
241
241
|
...makeGlobalStaticRules("list", "list-style-type")
|
|
242
242
|
];
|
|
243
243
|
const accents = [
|
|
244
244
|
[/^accent-(.+)$/, colorResolver("accent-color", "accent"), { autocomplete: "accent-$colors" }],
|
|
245
|
-
[/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity":
|
|
245
|
+
[/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": h.bracket.percent(d) }), { autocomplete: ["accent-(op|opacity)", "accent-(op|opacity)-<percent>"] }]
|
|
246
246
|
];
|
|
247
247
|
const carets = [
|
|
248
248
|
[/^caret-(.+)$/, colorResolver("caret-color", "caret"), { autocomplete: "caret-$colors" }],
|
|
249
|
-
[/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity":
|
|
249
|
+
[/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": h.bracket.percent(d) }), { autocomplete: ["caret-(op|opacity)", "caret-(op|opacity)-<percent>"] }]
|
|
250
250
|
];
|
|
251
251
|
const imageRenderings = [
|
|
252
252
|
["image-render-auto", { "image-rendering": "auto" }],
|
|
@@ -280,7 +280,7 @@ const scrollBehaviors = [
|
|
|
280
280
|
];
|
|
281
281
|
|
|
282
282
|
const columns = [
|
|
283
|
-
[/^columns-(.+)$/, ([, v]) => ({ columns:
|
|
283
|
+
[/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: "columns-<num>" }],
|
|
284
284
|
["break-before-auto", { "break-before": "auto" }],
|
|
285
285
|
["break-before-avoid", { "break-before": "avoid" }],
|
|
286
286
|
["break-before-all", { "break-before": "all" }],
|
|
@@ -394,10 +394,10 @@ const backdropFilterBase = {
|
|
|
394
394
|
};
|
|
395
395
|
const backdropFilterProperty = "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)";
|
|
396
396
|
function percentWithDefault(str) {
|
|
397
|
-
let v =
|
|
397
|
+
let v = h.bracket.cssvar(str || "");
|
|
398
398
|
if (v != null)
|
|
399
399
|
return v;
|
|
400
|
-
v = str ?
|
|
400
|
+
v = str ? h.percent(str) : "1";
|
|
401
401
|
if (v != null && Number.parseFloat(v) <= 1)
|
|
402
402
|
return v;
|
|
403
403
|
}
|
|
@@ -429,7 +429,7 @@ function dropShadowResolver([, s], { theme }) {
|
|
|
429
429
|
"filter": filterProperty
|
|
430
430
|
};
|
|
431
431
|
}
|
|
432
|
-
v =
|
|
432
|
+
v = h.bracket.cssvar(s);
|
|
433
433
|
if (v != null) {
|
|
434
434
|
return {
|
|
435
435
|
"--un-drop-shadow": `drop-shadow(${v})`,
|
|
@@ -438,9 +438,9 @@ function dropShadowResolver([, s], { theme }) {
|
|
|
438
438
|
}
|
|
439
439
|
}
|
|
440
440
|
const filters = [
|
|
441
|
-
[/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] ||
|
|
442
|
-
[/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) =>
|
|
443
|
-
[/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) =>
|
|
441
|
+
[/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }],
|
|
442
|
+
[/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
|
|
443
|
+
[/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }],
|
|
444
444
|
[/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, {
|
|
445
445
|
autocomplete: [
|
|
446
446
|
"filter-drop",
|
|
@@ -459,12 +459,12 @@ const filters = [
|
|
|
459
459
|
]
|
|
460
460
|
}],
|
|
461
461
|
[/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
|
|
462
|
-
[/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity":
|
|
462
|
+
[/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": h.bracket.percent(opacity) })],
|
|
463
463
|
[/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
|
|
464
|
-
[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) =>
|
|
464
|
+
[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => h.bracket.cssvar.degree(s))],
|
|
465
465
|
[/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
|
|
466
|
-
[/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) =>
|
|
467
|
-
[/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) =>
|
|
466
|
+
[/^(backdrop-)op(?:acity)-(.+)$/, toFilter("opacity", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
|
|
467
|
+
[/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"] }],
|
|
468
468
|
[/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), { autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"] }],
|
|
469
469
|
["filter", { filter: filterProperty }],
|
|
470
470
|
["backdrop-filter", {
|
|
@@ -490,7 +490,7 @@ const spaces = [
|
|
|
490
490
|
[/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
|
|
491
491
|
];
|
|
492
492
|
function handlerSpace([, d, s], { theme }) {
|
|
493
|
-
let v = theme.spacing?.[s || "DEFAULT"] ??
|
|
493
|
+
let v = theme.spacing?.[s || "DEFAULT"] ?? h.bracket.cssvar.auto.fraction.rem(s || "1");
|
|
494
494
|
if (v != null) {
|
|
495
495
|
if (v === "0")
|
|
496
496
|
v = "0px";
|
|
@@ -576,8 +576,8 @@ const objectPositions = [
|
|
|
576
576
|
[/^object-(.+)$/, ([, d]) => {
|
|
577
577
|
if (positionMap[d])
|
|
578
578
|
return { "object-position": positionMap[d] };
|
|
579
|
-
if (
|
|
580
|
-
return { "object-position":
|
|
579
|
+
if (h.bracketOfPosition(d) != null)
|
|
580
|
+
return { "object-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
|
|
581
581
|
}, { autocomplete: `object-(${Object.keys(positionMap).join("|")})` }]
|
|
582
582
|
];
|
|
583
583
|
const backgroundBlendModes = [
|
|
@@ -639,7 +639,7 @@ const tables = [
|
|
|
639
639
|
["border-collapse", { "border-collapse": "collapse" }],
|
|
640
640
|
["border-separate", { "border-collapse": "separate" }],
|
|
641
641
|
[/^border-spacing-(.+)$/, ([, s], { theme }) => {
|
|
642
|
-
const v = theme.spacing?.[s] ??
|
|
642
|
+
const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.auto.fraction.rem(s);
|
|
643
643
|
if (v != null) {
|
|
644
644
|
return {
|
|
645
645
|
"--un-border-spacing-x": v,
|
|
@@ -649,7 +649,7 @@ const tables = [
|
|
|
649
649
|
}
|
|
650
650
|
}, { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
|
|
651
651
|
[/^border-spacing-([xy])-(.+)$/, ([, d, s], { theme }) => {
|
|
652
|
-
const v = theme.spacing?.[s] ??
|
|
652
|
+
const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.auto.fraction.rem(s);
|
|
653
653
|
if (v != null) {
|
|
654
654
|
return {
|
|
655
655
|
[`--un-border-spacing-${d}`]: v,
|
|
@@ -684,7 +684,7 @@ const cssVariables = [
|
|
|
684
684
|
[/^(.+?)-(\$.+)$/, ([, name, varname]) => {
|
|
685
685
|
const prop = variablesAbbrMap[name];
|
|
686
686
|
if (prop)
|
|
687
|
-
return { [prop]:
|
|
687
|
+
return { [prop]: h.cssvar(varname) };
|
|
688
688
|
}]
|
|
689
689
|
];
|
|
690
690
|
|
|
@@ -696,11 +696,11 @@ const divides = [
|
|
|
696
696
|
[/^divide-(block|inline)-(-?.+)$/, handlerDivide],
|
|
697
697
|
[/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
|
|
698
698
|
[/^divide-(.+)$/, colorResolver("border-color", "divide"), { autocomplete: "divide-$colors" }],
|
|
699
|
-
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity":
|
|
699
|
+
[/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": h.bracket.percent(opacity) }), { autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-<percent>"] }],
|
|
700
700
|
...borderStyles.map((style) => [`divide-${style}`, { "border-style": style }])
|
|
701
701
|
];
|
|
702
702
|
function handlerDivide([, d, s], { theme }) {
|
|
703
|
-
let v = theme.lineWidth?.[s || "DEFAULT"] ??
|
|
703
|
+
let v = theme.lineWidth?.[s || "DEFAULT"] ?? h.bracket.cssvar.px(s || "1");
|
|
704
704
|
if (v != null) {
|
|
705
705
|
if (v === "0")
|
|
706
706
|
v = "0px";
|
|
@@ -825,7 +825,7 @@ const scrolls = [
|
|
|
825
825
|
|
|
826
826
|
const placeholders = [
|
|
827
827
|
[/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder"), { autocomplete: "placeholder-$colors" }],
|
|
828
|
-
[/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity":
|
|
828
|
+
[/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": h.bracket.percent(opacity) }), { autocomplete: ["placeholder-(op|opacity)", "placeholder-(op|opacity)-<percent>"] }]
|
|
829
829
|
];
|
|
830
830
|
|
|
831
831
|
const rules = [
|
|
@@ -1190,7 +1190,7 @@ const placeholderModifier = (input, { theme }) => {
|
|
|
1190
1190
|
function hasOpacityValue(body) {
|
|
1191
1191
|
const match = body.match(/^op(?:acity)?-?(.+)$/);
|
|
1192
1192
|
if (match && match[1] != null)
|
|
1193
|
-
return
|
|
1193
|
+
return h.bracket.percent(match[1]) != null;
|
|
1194
1194
|
return false;
|
|
1195
1195
|
}
|
|
1196
1196
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unocss/preset-wind",
|
|
3
|
-
"version": "0.53.
|
|
3
|
+
"version": "0.53.3",
|
|
4
4
|
"description": "Tailwind / Windi CSS compact preset for UnoCSS",
|
|
5
5
|
"author": "Anthony Fu <anthonyfu117@hotmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"*.css"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@unocss/core": "0.53.
|
|
39
|
-
"@unocss/preset-mini": "0.53.
|
|
38
|
+
"@unocss/core": "0.53.3",
|
|
39
|
+
"@unocss/preset-mini": "0.53.3"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"build": "unbuild",
|