@unocss/preset-mini 0.16.2 → 0.17.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/chunks/default2.cjs +252 -432
- package/dist/chunks/default2.mjs +225 -400
- package/dist/chunks/default3.cjs +10 -6
- package/dist/chunks/default3.mjs +11 -7
- package/dist/chunks/pseudo.cjs +54 -30
- package/dist/chunks/pseudo.mjs +53 -30
- package/dist/chunks/utilities.cjs +294 -0
- package/dist/chunks/utilities.mjs +283 -0
- package/dist/chunks/variants.cjs +8 -6
- package/dist/chunks/variants.mjs +8 -6
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/rules.cjs +3 -8
- package/dist/rules.d.ts +5 -17
- package/dist/rules.mjs +2 -2
- package/dist/utils.cjs +11 -8
- package/dist/utils.d.ts +64 -4
- package/dist/utils.mjs +1 -1
- package/dist/variants.cjs +3 -2
- package/dist/variants.d.ts +4 -3
- package/dist/variants.mjs +2 -2
- package/package.json +2 -2
- package/dist/chunks/index.cjs +0 -142
- package/dist/chunks/index.mjs +0 -134
package/dist/chunks/default2.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
const utilities = require('./utilities.cjs');
|
|
3
4
|
const core = require('@unocss/core');
|
|
4
|
-
const index = require('./index.cjs');
|
|
5
5
|
const pseudo = require('./pseudo.cjs');
|
|
6
6
|
|
|
7
7
|
const verticalAlignAlias = {
|
|
@@ -19,128 +19,13 @@ const textAligns = [
|
|
|
19
19
|
["text-justify", { "text-align": "justify" }]
|
|
20
20
|
];
|
|
21
21
|
|
|
22
|
-
const parseColorUtil = (body, theme) => {
|
|
23
|
-
const [main, opacity2] = body.split(/(?:\/|:)/);
|
|
24
|
-
const [name, no = "DEFAULT"] = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
|
|
25
|
-
if (!name)
|
|
26
|
-
return;
|
|
27
|
-
let color;
|
|
28
|
-
const bracket = index.handler.bracket(main);
|
|
29
|
-
const bracketOrMain = bracket || main;
|
|
30
|
-
if (bracketOrMain.startsWith("#"))
|
|
31
|
-
color = bracketOrMain.slice(1);
|
|
32
|
-
if (bracketOrMain.startsWith("hex-"))
|
|
33
|
-
color = bracketOrMain.slice(4);
|
|
34
|
-
color = color || bracket;
|
|
35
|
-
if (!color) {
|
|
36
|
-
const colorData = theme.colors?.[name];
|
|
37
|
-
if (typeof colorData === "string")
|
|
38
|
-
color = colorData;
|
|
39
|
-
else if (no && colorData)
|
|
40
|
-
color = colorData[no];
|
|
41
|
-
}
|
|
42
|
-
return {
|
|
43
|
-
opacity: opacity2,
|
|
44
|
-
name,
|
|
45
|
-
no,
|
|
46
|
-
color,
|
|
47
|
-
rgba: core.hex2rgba(color)
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
const colorResolver$1 = (attribute, varName) => ([, body], { theme }) => {
|
|
51
|
-
const data = parseColorUtil(body, theme);
|
|
52
|
-
if (!data)
|
|
53
|
-
return;
|
|
54
|
-
const { opacity: opacity2, color, rgba } = data;
|
|
55
|
-
if (!color)
|
|
56
|
-
return;
|
|
57
|
-
const a = opacity2 ? opacity2[0] === "[" ? index.handler.bracket.percent(opacity2) : parseFloat(opacity2) / 100 : rgba?.[3];
|
|
58
|
-
if (rgba) {
|
|
59
|
-
if (a != null && !Number.isNaN(a)) {
|
|
60
|
-
rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
|
|
61
|
-
return {
|
|
62
|
-
[attribute]: `rgba(${rgba.join(",")})`
|
|
63
|
-
};
|
|
64
|
-
} else {
|
|
65
|
-
return {
|
|
66
|
-
[`--un-${varName}-opacity`]: 1,
|
|
67
|
-
[attribute]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
} else {
|
|
71
|
-
return {
|
|
72
|
-
[attribute]: color.replace("%alpha", `${a || 1}`)
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
const opacity = [
|
|
77
|
-
[/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: index.handler.bracket.percent.cssvar(d) })]
|
|
78
|
-
];
|
|
79
|
-
const textColors = [
|
|
80
|
-
[/^(?:text|color|c)-(.+)$/, colorResolver$1("color", "text")],
|
|
81
|
-
[/^(?:text|color|c)-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-text-opacity": index.handler.bracket.percent.cssvar(opacity2) })]
|
|
82
|
-
];
|
|
83
|
-
const bgColors = [
|
|
84
|
-
[/^bg-(.+)$/, colorResolver$1("background-color", "bg")],
|
|
85
|
-
[/^bg-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-bg-opacity": index.handler.bracket.percent(opacity2) })]
|
|
86
|
-
];
|
|
87
|
-
const borderColors = [
|
|
88
|
-
[/^(?:border|b)-(.+)$/, colorResolver$1("border-color", "border")],
|
|
89
|
-
[/^(?:border|b)-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-border-opacity": index.handler.bracket.percent(opacity2) })]
|
|
90
|
-
];
|
|
91
|
-
const ringColors = [
|
|
92
|
-
[/^ring-(.+)$/, colorResolver$1("--un-ring-color", "ring")],
|
|
93
|
-
[/^ring-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-ring-opacity": index.handler.bracket.percent(opacity2) })]
|
|
94
|
-
];
|
|
95
|
-
const ringOffsetColors = [
|
|
96
|
-
[/^ring-offset-(.+)$/, colorResolver$1("--un-ring-offset-color", "ring-offset")],
|
|
97
|
-
[/^ring-offset-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-ring-offset-opacity": index.handler.bracket.percent(opacity2) })]
|
|
98
|
-
];
|
|
99
|
-
const fillColors = [
|
|
100
|
-
["fill-none", { fill: "none" }],
|
|
101
|
-
[/^fill-(.+)$/, colorResolver$1("fill", "fill")],
|
|
102
|
-
[/^fill-op(?:acity)?-?(.+)$/m, ([, opacity2]) => ({ "--un-fill-opacity": index.handler.bracket.percent(opacity2) })]
|
|
103
|
-
];
|
|
104
|
-
|
|
105
|
-
const outlineStyle = ["none", "auto", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "inherit", "initial", "revert", "unset"];
|
|
106
|
-
const parseOutlineSize = (s) => {
|
|
107
|
-
const propName = ["width", "offset"].find((item) => s.startsWith(item)) || "width";
|
|
108
|
-
const size = index.handler.bracket.fraction.rem(s.replace(/^(offset\-|width\-)/, ""));
|
|
109
|
-
if (size) {
|
|
110
|
-
return {
|
|
111
|
-
[`outline-${propName}`]: size
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
22
|
const outline = [
|
|
116
|
-
[
|
|
23
|
+
[/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.fraction.auto.rem(d) })],
|
|
24
|
+
[/^outline-(?:color-)?(.+)$/, utilities.colorResolver("outline-color", "outline-color")],
|
|
25
|
+
[/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.handler.bracket.fraction.auto.rem(d) })],
|
|
117
26
|
["outline", { "outline-style": "solid" }],
|
|
118
|
-
[
|
|
119
|
-
|
|
120
|
-
(match, config) => {
|
|
121
|
-
const [, d] = match;
|
|
122
|
-
if (d === "none") {
|
|
123
|
-
return {
|
|
124
|
-
"outline": "2px solid transparent",
|
|
125
|
-
"outline-offset": "2px"
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
if (outlineStyle.includes(d)) {
|
|
129
|
-
return {
|
|
130
|
-
"outline-style": d
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
const sizeSheet = parseOutlineSize(d);
|
|
134
|
-
if (sizeSheet)
|
|
135
|
-
return sizeSheet;
|
|
136
|
-
const colorSheet = colorResolver$1("outline-color", "outline-color")([
|
|
137
|
-
match[0],
|
|
138
|
-
match[1].replace(/^color-/, "")
|
|
139
|
-
], config);
|
|
140
|
-
if (colorSheet)
|
|
141
|
-
return colorSheet;
|
|
142
|
-
}
|
|
143
|
-
]
|
|
27
|
+
[/^outline-(auto|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
|
|
28
|
+
["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
|
|
144
29
|
];
|
|
145
30
|
const appearance = [
|
|
146
31
|
["appearance-none", {
|
|
@@ -148,39 +33,27 @@ const appearance = [
|
|
|
148
33
|
"-webkit-appearance": "none"
|
|
149
34
|
}]
|
|
150
35
|
];
|
|
151
|
-
const
|
|
152
|
-
[
|
|
153
|
-
/^placeholder-opacity-(\d+)$/,
|
|
154
|
-
([, d]) => ({
|
|
155
|
-
"placeholder-opacity": index.handler.bracket.percent(d)
|
|
156
|
-
})
|
|
157
|
-
],
|
|
158
|
-
[
|
|
159
|
-
/^placeholder-(?!opacity)(.+)$/,
|
|
160
|
-
(match, config) => {
|
|
161
|
-
match[1] = match[1].replace(/^color-/, "");
|
|
162
|
-
return colorResolver$1("placeholder-color", "placeholder-color")(match, config);
|
|
163
|
-
}
|
|
164
|
-
]
|
|
36
|
+
const willChange = [
|
|
37
|
+
[/^will-change-(.+)/, ([, p]) => ({ "will-change": utilities.handler.properties.global(p) })]
|
|
165
38
|
];
|
|
166
39
|
|
|
167
40
|
const borders = [
|
|
168
41
|
[/^border$/, handlerBorder],
|
|
169
42
|
[/^(?:border|b)()-(.+)$/, handlerBorder],
|
|
170
|
-
[/^(?:border|b)-([^-]+)
|
|
43
|
+
[/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorder],
|
|
171
44
|
[/^(?:border|b)()-size-(.+)$/, handlerBorderSize],
|
|
172
45
|
[/^(?:border|b)-([^-]+)-size-(.+)$/, handlerBorderSize],
|
|
173
46
|
[/^(?:border|b)()-(.+)$/, handlerBorderColor],
|
|
174
|
-
[/^(?:border|b)-([^-]+)
|
|
175
|
-
[/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity":
|
|
47
|
+
[/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
|
|
48
|
+
[/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
49
|
+
[/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
|
|
50
|
+
[/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
|
|
51
|
+
[/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded],
|
|
176
52
|
["border-solid", { "border-style": "solid" }],
|
|
177
53
|
["border-dashed", { "border-style": "dashed" }],
|
|
178
54
|
["border-dotted", { "border-style": "dotted" }],
|
|
179
55
|
["border-double", { "border-style": "double" }],
|
|
180
|
-
["border-none", { "border-style": "none" }]
|
|
181
|
-
[/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
|
|
182
|
-
[/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?$/, handlerRounded],
|
|
183
|
-
[/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-([^-]+))?$/, handlerRounded]
|
|
56
|
+
["border-none", { "border-style": "none" }]
|
|
184
57
|
];
|
|
185
58
|
function handlerBorder(m) {
|
|
186
59
|
const borderSizes = handlerBorderSize(m);
|
|
@@ -192,118 +65,61 @@ function handlerBorder(m) {
|
|
|
192
65
|
}
|
|
193
66
|
}
|
|
194
67
|
function handlerBorderSize([, a, b]) {
|
|
195
|
-
const [d, s = "1"] =
|
|
196
|
-
const v =
|
|
197
|
-
if (v
|
|
198
|
-
return [
|
|
199
|
-
...index.directionMap[d].map((i) => [`border${i}-width`, v])
|
|
200
|
-
];
|
|
201
|
-
}
|
|
68
|
+
const [d, s = "1"] = utilities.directionMap[a] ? [a, b] : ["", a];
|
|
69
|
+
const v = utilities.handler.bracket.px(s);
|
|
70
|
+
if (v !== void 0)
|
|
71
|
+
return utilities.directionMap[d].map((i) => [`border${i}-width`, v]);
|
|
202
72
|
}
|
|
203
73
|
function handlerBorderColor([, a, c], ctx) {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
const borders2 = index.directionMap[index.directionMap[a] ? a : ""].map((i) => colorResolver$1(`border${i}-color`, "border")(["", c], ctx));
|
|
207
|
-
const borderObject = {};
|
|
208
|
-
Object.assign(borderObject, ...borders2);
|
|
209
|
-
return borderObject;
|
|
74
|
+
if (c !== void 0 && utilities.colorResolver("border-color", "border")(["", c], ctx)) {
|
|
75
|
+
return Object.assign({}, ...utilities.directionMap[utilities.directionMap[a] ? a : ""].map((i) => utilities.colorResolver(`border${i}-color`, "border")(["", c], ctx)));
|
|
210
76
|
}
|
|
211
77
|
}
|
|
212
78
|
function handlerRounded([, a, b], { theme }) {
|
|
213
|
-
const [d, s = "DEFAULT"] =
|
|
214
|
-
const v = theme.borderRadius?.[s] ||
|
|
215
|
-
if (v
|
|
216
|
-
return
|
|
79
|
+
const [d, s = "DEFAULT"] = utilities.cornerMap[a] ? [a, b] : ["", a];
|
|
80
|
+
const v = theme.borderRadius?.[s] || utilities.handler.auto.rem.fraction.bracket.cssvar(s);
|
|
81
|
+
if (v !== void 0)
|
|
82
|
+
return utilities.cornerMap[d].map((i) => [`border${i}-radius`, v]);
|
|
217
83
|
}
|
|
218
84
|
|
|
219
|
-
const
|
|
220
|
-
|
|
221
|
-
"border-color",
|
|
222
|
-
"background-color",
|
|
223
|
-
"flex-grow",
|
|
224
|
-
"flex",
|
|
225
|
-
"flex-shrink",
|
|
226
|
-
"caret-color",
|
|
227
|
-
"font",
|
|
228
|
-
"gap",
|
|
229
|
-
"opacity",
|
|
230
|
-
"visibility",
|
|
231
|
-
"z-index",
|
|
232
|
-
"font-weight",
|
|
233
|
-
"zoom",
|
|
234
|
-
"text-shadow",
|
|
235
|
-
"transform",
|
|
236
|
-
"box-shadow"
|
|
237
|
-
];
|
|
238
|
-
const transitionPositionProps = [
|
|
239
|
-
"backround-position",
|
|
240
|
-
"left",
|
|
241
|
-
"right",
|
|
242
|
-
"top",
|
|
243
|
-
"bottom",
|
|
244
|
-
"object-position"
|
|
85
|
+
const opacity = [
|
|
86
|
+
[/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: utilities.handler.bracket.percent.cssvar(d) })]
|
|
245
87
|
];
|
|
246
|
-
const
|
|
247
|
-
|
|
248
|
-
"
|
|
249
|
-
"max-width",
|
|
250
|
-
"min-width",
|
|
251
|
-
"height",
|
|
252
|
-
"width",
|
|
253
|
-
"border-width",
|
|
254
|
-
"margin",
|
|
255
|
-
"padding",
|
|
256
|
-
"outline-width",
|
|
257
|
-
"outline-offset",
|
|
258
|
-
"font-size",
|
|
259
|
-
"line-height",
|
|
260
|
-
"text-indent",
|
|
261
|
-
"vertical-align",
|
|
262
|
-
"border-spacing",
|
|
263
|
-
"letter-spacing",
|
|
264
|
-
"word-spacing"
|
|
88
|
+
const textColors = [
|
|
89
|
+
[/^(?:text|color|c)-(.+)$/, utilities.colorResolver("color", "text")],
|
|
90
|
+
[/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": utilities.handler.bracket.percent.cssvar(opacity2) })]
|
|
265
91
|
];
|
|
266
|
-
const
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
...transitionBasicProps,
|
|
270
|
-
...transitionPositionProps,
|
|
271
|
-
...transitionSizeProps,
|
|
272
|
-
...transitionEnhanceProps
|
|
92
|
+
const bgColors = [
|
|
93
|
+
[/^bg-(.+)$/, utilities.colorResolver("background-color", "bg")],
|
|
94
|
+
[/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": utilities.handler.bracket.percent(opacity2) })]
|
|
273
95
|
];
|
|
274
|
-
|
|
275
|
-
const
|
|
276
|
-
|
|
277
|
-
return;
|
|
278
|
-
return prop || transitionPropsStr;
|
|
96
|
+
|
|
97
|
+
const transitionProperty = (prop) => {
|
|
98
|
+
return utilities.handler.properties(prop) || (prop === "all" ? prop : void 0);
|
|
279
99
|
};
|
|
280
100
|
const transitions = [
|
|
281
|
-
[/^transition(?:-([a-z-]+))?(?:-(\d+))?$/, ([, prop, duration = "150"]) => {
|
|
282
|
-
const
|
|
283
|
-
if (
|
|
284
|
-
return
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
}
|
|
290
|
-
}],
|
|
291
|
-
[/^duration-(\d+)$/, ([, duration = "150"]) => {
|
|
292
|
-
return {
|
|
293
|
-
"transition-duration": `${duration}ms`
|
|
294
|
-
};
|
|
101
|
+
[/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop = "all", duration = "150"]) => {
|
|
102
|
+
const p = transitionProperty(prop);
|
|
103
|
+
if (p) {
|
|
104
|
+
return {
|
|
105
|
+
"transition-property": p,
|
|
106
|
+
"transition-timing-function": "cubic-bezier(0.4,0,0.2,1)",
|
|
107
|
+
"transition-duration": `${duration}ms`
|
|
108
|
+
};
|
|
109
|
+
}
|
|
295
110
|
}],
|
|
111
|
+
[/^duration-(\d+)$/, ([, duration = "150"]) => ({ "transition-duration": `${duration}ms` })],
|
|
296
112
|
["ease", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
|
|
113
|
+
["ease-linear", { "transition-timing-function": "linear" }],
|
|
297
114
|
["ease-in", { "transition-timing-function": "cubic-bezier(0.4, 0, 1, 1)" }],
|
|
298
115
|
["ease-out", { "transition-timing-function": "cubic-bezier(0, 0, 0.2, 1)" }],
|
|
299
116
|
["ease-in-out", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
|
|
300
117
|
[/^transition-delay-(\d+)$/, ([, v]) => ({ "transition-delay": `${v}ms` })],
|
|
301
118
|
[/^transition-duration-(\d+)$/, ([, v]) => ({ "transition-duration": `${v}ms` })],
|
|
302
|
-
[/^(?:transition-)?property-(
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
}]
|
|
119
|
+
[/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": utilities.handler.global(v) || transitionProperty(v) })],
|
|
120
|
+
["transition-property-none", { "transition-property": "none" }],
|
|
121
|
+
["property-none", { "transition-property": "none" }],
|
|
122
|
+
["transition-none", { transition: "none" }]
|
|
307
123
|
];
|
|
308
124
|
|
|
309
125
|
const flex = [
|
|
@@ -349,7 +165,7 @@ const fonts = [
|
|
|
349
165
|
}
|
|
350
166
|
}],
|
|
351
167
|
[/^text-(.+)$/, ([, s = "base"], { theme }) => {
|
|
352
|
-
const size =
|
|
168
|
+
const size = utilities.handler.bracket.auto.rem(s);
|
|
353
169
|
if (size)
|
|
354
170
|
return { "font-size": size };
|
|
355
171
|
const themed = core.toArray(theme.fontSize?.[s]);
|
|
@@ -362,27 +178,27 @@ const fonts = [
|
|
|
362
178
|
}
|
|
363
179
|
}],
|
|
364
180
|
[/^text-size-(.+)$/, ([, s]) => {
|
|
365
|
-
const raw =
|
|
181
|
+
const raw = utilities.handler.bracket.auto.rem(s);
|
|
366
182
|
if (raw)
|
|
367
183
|
return { "font-size": raw };
|
|
368
184
|
}],
|
|
369
185
|
[/^(?:font|fw)-?([^-]+)$/, ([, s]) => {
|
|
370
|
-
const v = weightMap[s] ||
|
|
186
|
+
const v = weightMap[s] || utilities.handler.number(s);
|
|
371
187
|
if (v)
|
|
372
188
|
return { "font-weight": v };
|
|
373
189
|
}],
|
|
374
190
|
[/^(?:leading|lh)-([^-]+)$/, ([, s], { theme }) => {
|
|
375
|
-
const v = theme.lineHeight?.[s] ||
|
|
191
|
+
const v = theme.lineHeight?.[s] || utilities.handler.bracket.auto.rem(s);
|
|
376
192
|
if (v !== null)
|
|
377
193
|
return { "line-height": v };
|
|
378
194
|
}],
|
|
379
195
|
[/^tracking-([^-]+)$/, ([, s], { theme }) => {
|
|
380
|
-
const v = theme.letterSpacing?.[s] ||
|
|
196
|
+
const v = theme.letterSpacing?.[s] || utilities.handler.bracket.auto.rem(s);
|
|
381
197
|
if (v !== null)
|
|
382
198
|
return { "letter-spacing": v };
|
|
383
199
|
}],
|
|
384
200
|
[/^word-spacing-([^-]+)$/, ([, s], { theme }) => {
|
|
385
|
-
const v = theme.wordSpacing?.[s] ||
|
|
201
|
+
const v = theme.wordSpacing?.[s] || utilities.handler.bracket.auto.rem(s);
|
|
386
202
|
if (v !== null)
|
|
387
203
|
return { "word-spacing": v };
|
|
388
204
|
}]
|
|
@@ -390,7 +206,7 @@ const fonts = [
|
|
|
390
206
|
const tabSizes = [
|
|
391
207
|
[/^tab-?([^-]*)$/, ([, s]) => {
|
|
392
208
|
s = s || "4";
|
|
393
|
-
const v =
|
|
209
|
+
const v = utilities.handler.bracket.global.number(s);
|
|
394
210
|
if (v !== null) {
|
|
395
211
|
return {
|
|
396
212
|
"-moz-tab-size": v,
|
|
@@ -402,59 +218,46 @@ const tabSizes = [
|
|
|
402
218
|
];
|
|
403
219
|
const textIndents = [
|
|
404
220
|
[/^indent(?:-(.+))?$/, ([, s], { theme }) => {
|
|
405
|
-
const v = theme.textIndent?.[s || "DEFAULT"] ||
|
|
221
|
+
const v = theme.textIndent?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.auto.rem(s);
|
|
406
222
|
if (v != null)
|
|
407
223
|
return { "text-indent": v };
|
|
408
224
|
}]
|
|
409
225
|
];
|
|
410
226
|
const textStrokes = [
|
|
411
227
|
[/^text-stroke(?:-(.+))?$/, ([, s], { theme }) => {
|
|
412
|
-
const v = theme.textStrokeWidth?.[s || "DEFAULT"] ||
|
|
228
|
+
const v = theme.textStrokeWidth?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.px(s);
|
|
413
229
|
if (v != null)
|
|
414
230
|
return { "-webkit-text-stroke-width": v };
|
|
415
231
|
}],
|
|
416
|
-
[/^text-stroke-(.+)$/, colorResolver
|
|
417
|
-
[/^text-stroke-op(?:acity)?-?(.+)
|
|
232
|
+
[/^text-stroke-(.+)$/, utilities.colorResolver("-webkit-text-stroke-color", "text-stroke")],
|
|
233
|
+
[/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": utilities.handler.bracket.percent(opacity) })]
|
|
418
234
|
];
|
|
419
235
|
const textShadows = [
|
|
420
236
|
[/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
|
|
421
|
-
const v = theme.textShadow?.[s || "DEFAULT"] ||
|
|
237
|
+
const v = theme.textShadow?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar(s);
|
|
422
238
|
if (v != null)
|
|
423
239
|
return { "text-shadow": v };
|
|
424
240
|
}]
|
|
425
241
|
];
|
|
426
242
|
|
|
427
243
|
const gaps = [
|
|
428
|
-
[/^(?:flex-|grid-)?gap-([^-]+)$/, ([, s]) => {
|
|
429
|
-
const v =
|
|
430
|
-
if (v != null) {
|
|
431
|
-
return {
|
|
432
|
-
"grid-gap": v,
|
|
433
|
-
"gap": v
|
|
434
|
-
};
|
|
435
|
-
}
|
|
436
|
-
}],
|
|
437
|
-
[/^(?:flex-|grid-)?gap-x-([^-]+)$/, ([, s]) => {
|
|
438
|
-
const v = index.handler.bracket.rem(s);
|
|
439
|
-
if (v != null) {
|
|
440
|
-
return {
|
|
441
|
-
"grid-column-gap": v,
|
|
442
|
-
"column-gap": v
|
|
443
|
-
};
|
|
444
|
-
}
|
|
445
|
-
}],
|
|
446
|
-
[/^(?:flex-|grid-)?gap-y-([^-]+)$/, ([, s]) => {
|
|
447
|
-
const v = index.handler.bracket.rem(s);
|
|
244
|
+
[/^(?:flex-|grid-)?gap-(x-|y-)?([^-]+)$/, ([, d = "", s]) => {
|
|
245
|
+
const v = utilities.handler.bracket.auto.rem(s);
|
|
448
246
|
if (v != null) {
|
|
247
|
+
const direction = {
|
|
248
|
+
"": "",
|
|
249
|
+
"x-": "column-",
|
|
250
|
+
"y-": "row-"
|
|
251
|
+
}[d];
|
|
449
252
|
return {
|
|
450
|
-
|
|
451
|
-
|
|
253
|
+
[`grid-${direction}gap`]: v,
|
|
254
|
+
[`${direction}gap`]: v
|
|
452
255
|
};
|
|
453
256
|
}
|
|
454
257
|
}]
|
|
455
258
|
];
|
|
456
259
|
|
|
457
|
-
const calSize = (s, theme) => core.toArray(theme.fontSize?.[s] ||
|
|
260
|
+
const calSize = (s, theme) => core.toArray(theme.fontSize?.[s] || utilities.handler.bracket.auto.rem(s))[0];
|
|
458
261
|
const autoDirection = (selector, theme) => {
|
|
459
262
|
if (selector === "min")
|
|
460
263
|
return "min-content";
|
|
@@ -467,13 +270,13 @@ const autoDirection = (selector, theme) => {
|
|
|
467
270
|
const grids = [
|
|
468
271
|
["grid", { display: "grid" }],
|
|
469
272
|
["inline-grid", { display: "inline-grid" }],
|
|
470
|
-
[/^(?:grid-)?col-start-([\w.-]+)$/, ([, v]) => ({ "grid-column-start":
|
|
471
|
-
[/^(?:grid-)?col-end-([\w.]+)$/, ([, v]) => ({ "grid-column-end":
|
|
472
|
-
[/^(?:grid-)?row-start-([\w.-]+)$/, ([, v]) => ({ "grid-row-start":
|
|
473
|
-
[/^(?:grid-)?row-end-([\w.-]+)$/, ([, v]) => ({ "grid-row-end":
|
|
273
|
+
[/^(?:grid-)?col-start-([\w.-]+)$/, ([, v]) => ({ "grid-column-start": v })],
|
|
274
|
+
[/^(?:grid-)?col-end-([\w.]+)$/, ([, v]) => ({ "grid-column-end": v })],
|
|
275
|
+
[/^(?:grid-)?row-start-([\w.-]+)$/, ([, v]) => ({ "grid-row-start": v })],
|
|
276
|
+
[/^(?:grid-)?row-end-([\w.-]+)$/, ([, v]) => ({ "grid-row-end": v })],
|
|
474
277
|
[/^(?:grid-)?(row|col)-(.+)$/, ([, d, v]) => {
|
|
475
278
|
const key = d === "row" ? "grid-row" : "grid-column";
|
|
476
|
-
let raw =
|
|
279
|
+
let raw = utilities.handler.bracket(v);
|
|
477
280
|
if (raw)
|
|
478
281
|
return { [key]: raw };
|
|
479
282
|
const parts = v.split("-");
|
|
@@ -482,16 +285,16 @@ const grids = [
|
|
|
482
285
|
if (parts[0] === "span") {
|
|
483
286
|
if (parts[1] === "full")
|
|
484
287
|
return { [key]: "1/-1" };
|
|
485
|
-
raw =
|
|
288
|
+
raw = utilities.handler.number.bracket(parts[1]);
|
|
486
289
|
if (raw)
|
|
487
290
|
return { [key]: `span ${raw}/span ${raw}` };
|
|
488
291
|
}
|
|
489
292
|
}],
|
|
490
|
-
[/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns":
|
|
491
|
-
[/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow":
|
|
492
|
-
[/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows":
|
|
493
|
-
[/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill,
|
|
494
|
-
[/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill,
|
|
293
|
+
[/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": autoDirection(v, theme) })],
|
|
294
|
+
[/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": v.replace("col", "column").split("-").join(" ") })],
|
|
295
|
+
[/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": autoDirection(v, theme) })],
|
|
296
|
+
[/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill,minmax(${d},1fr))` })],
|
|
297
|
+
[/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill,minmax(${d},1fr))` })],
|
|
495
298
|
[/^grid-cols-(\d+)$/, ([, d]) => ({ "grid-template-columns": `repeat(${d},minmax(0,1fr))` })],
|
|
496
299
|
[/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })],
|
|
497
300
|
[/^grid-cols-\[(.+)\]$/, ([, v]) => ({ "grid-template-columns": v.replace(/,/g, " ") })],
|
|
@@ -528,7 +331,10 @@ const justifies = [
|
|
|
528
331
|
...basicSet.map((i) => [`justify-self-${i}`, { "justify-self": i }])
|
|
529
332
|
];
|
|
530
333
|
const orders = [
|
|
531
|
-
[/^order-(.+)$/, ([, v]) => ({ order:
|
|
334
|
+
[/^order-(.+)$/, ([, v]) => ({ order: utilities.handler.bracket.number(v) })],
|
|
335
|
+
["order-first", { order: "-9999" }],
|
|
336
|
+
["order-last", { order: "9999" }],
|
|
337
|
+
["order-none", { order: "0" }]
|
|
532
338
|
];
|
|
533
339
|
const alignments = [
|
|
534
340
|
["content-start", { "align-content": "flex-start" }],
|
|
@@ -546,7 +352,7 @@ const alignments = [
|
|
|
546
352
|
["self-start", { "align-self": "flex-start" }],
|
|
547
353
|
["self-end", { "align-self": "flex-end" }],
|
|
548
354
|
["self-center", { "align-self": "center" }],
|
|
549
|
-
["self-stretch", { "align-
|
|
355
|
+
["self-stretch", { "align-self": "stretch" }]
|
|
550
356
|
];
|
|
551
357
|
const placements = [
|
|
552
358
|
["place-content-start", { "place-content": "start" }],
|
|
@@ -560,64 +366,139 @@ const placements = [
|
|
|
560
366
|
...basicSet.map((i) => [`place-self-${i}`, { "place-self": i }])
|
|
561
367
|
];
|
|
562
368
|
function handleInsetValue(v) {
|
|
563
|
-
return { auto: "auto", full: "100%" }[v] ??
|
|
369
|
+
return { auto: "auto", full: "100%" }[v] ?? utilities.handler.bracket.fraction.cssvar.auto.rem(v);
|
|
564
370
|
}
|
|
565
371
|
const insets = [
|
|
566
372
|
[/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
|
|
567
373
|
[/^inset-([xy])-(.+)$/, ([, d, v]) => {
|
|
568
374
|
const r = handleInsetValue(v);
|
|
569
|
-
if (r != null && d in
|
|
570
|
-
return
|
|
375
|
+
if (r != null && d in utilities.directionMap)
|
|
376
|
+
return utilities.directionMap[d].map((i) => [i.slice(1), r]);
|
|
571
377
|
}]
|
|
572
378
|
];
|
|
573
379
|
const floats = [
|
|
574
|
-
[
|
|
575
|
-
[
|
|
380
|
+
["float-left", { float: "left" }],
|
|
381
|
+
["float-right", { float: "right" }],
|
|
382
|
+
["float-none", { float: "none" }],
|
|
383
|
+
["clear-left", { clear: "left" }],
|
|
384
|
+
["clear-right", { clear: "right" }],
|
|
385
|
+
["clear-both", { clear: "both" }],
|
|
386
|
+
["clear-none", { clear: "none" }]
|
|
576
387
|
];
|
|
577
388
|
const zIndexes = [
|
|
578
389
|
["z-auto", { "z-index": "auto" }],
|
|
579
|
-
[/^z-([^-]+)$/, ([, v]) => ({ "z-index":
|
|
390
|
+
[/^z-([^-]+)$/, ([, v]) => ({ "z-index": utilities.handler.number(v) })]
|
|
580
391
|
];
|
|
581
392
|
const boxSizing = [
|
|
582
|
-
[
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
393
|
+
["box-border", { "box-sizing": "border-box" }],
|
|
394
|
+
["box-content", { "box-sizing": "content-box" }]
|
|
395
|
+
];
|
|
396
|
+
|
|
397
|
+
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
398
|
+
const displays = [
|
|
399
|
+
["inline", { display: "inline" }],
|
|
400
|
+
["block", { display: "block" }],
|
|
401
|
+
["inline-block", { display: "inline-block" }],
|
|
402
|
+
["contents", { display: "contents" }],
|
|
403
|
+
["flow-root", { display: "flow-root" }],
|
|
404
|
+
["list-item", { display: "list-item" }],
|
|
405
|
+
["hidden", { display: "none" }]
|
|
406
|
+
];
|
|
407
|
+
const appearances = [
|
|
408
|
+
["visible", { visibility: "visible" }],
|
|
409
|
+
["invisible", { visibility: "hidden" }],
|
|
410
|
+
["backface-visible", { "backface-visibility": "visible" }],
|
|
411
|
+
["backface-hidden", { "backface-visibility": "hidden" }]
|
|
412
|
+
];
|
|
413
|
+
const cursors = [
|
|
414
|
+
[/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
|
|
415
|
+
];
|
|
416
|
+
const pointerEvents = [
|
|
417
|
+
["pointer-events-auto", { "pointer-events": "auto" }],
|
|
418
|
+
["pointer-events-none", { "pointer-events": "none" }]
|
|
419
|
+
];
|
|
420
|
+
const resizes = [
|
|
421
|
+
["resize-x", { resize: "horizontal" }],
|
|
422
|
+
["resize-y", { resize: "vertical" }],
|
|
423
|
+
["resize", { resize: "both" }],
|
|
424
|
+
["resize-none", { resize: "none" }]
|
|
425
|
+
];
|
|
426
|
+
const userSelects = [
|
|
427
|
+
["select-auto", { "user-select": "auto" }],
|
|
428
|
+
["select-all", { "user-select": "all" }],
|
|
429
|
+
["select-text", { "user-select": "text" }],
|
|
430
|
+
["select-none", { "user-select": "none" }]
|
|
431
|
+
];
|
|
432
|
+
const whitespaces = [
|
|
433
|
+
[/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
|
|
434
|
+
];
|
|
435
|
+
const contents = [
|
|
436
|
+
["content-empty", { content: '""' }]
|
|
437
|
+
];
|
|
438
|
+
const breaks = [
|
|
439
|
+
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
|
|
440
|
+
["break-word", { "overflow-wrap": "break-word" }],
|
|
441
|
+
["break-all", { "word-break": "break-all" }]
|
|
442
|
+
];
|
|
443
|
+
const textOverflows = [
|
|
444
|
+
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
|
|
445
|
+
["text-ellipsis", { "text-overflow": "ellipsis" }],
|
|
446
|
+
["text-clip", { "text-overflow": "clip" }]
|
|
447
|
+
];
|
|
448
|
+
const textTransforms = [
|
|
449
|
+
["case-upper", { "text-transform": "uppercase" }],
|
|
450
|
+
["case-lower", { "text-transform": "lowercase" }],
|
|
451
|
+
["case-capital", { "text-transform": "capitalize" }],
|
|
452
|
+
["case-normal", { "text-transform": "none" }]
|
|
453
|
+
];
|
|
454
|
+
const fontStyles = [
|
|
455
|
+
["italic", { "font-style": "italic" }],
|
|
456
|
+
["not-italic", { "font-style": "normal" }]
|
|
457
|
+
];
|
|
458
|
+
const fontSmoothings = [
|
|
459
|
+
["antialiased", {
|
|
460
|
+
"-webkit-font-smoothing": "antialiased",
|
|
461
|
+
"-moz-osx-font-smoothing": "grayscale",
|
|
462
|
+
"font-smoothing": "grayscale"
|
|
463
|
+
}],
|
|
464
|
+
["subpixel-antialiased", {
|
|
465
|
+
"-webkit-font-smoothing": "auto",
|
|
466
|
+
"-moz-osx-font-smoothing": "auto",
|
|
467
|
+
"font-smoothing": "auto"
|
|
468
|
+
}]
|
|
588
469
|
];
|
|
589
470
|
|
|
590
471
|
const rings = [
|
|
591
472
|
[/^ring-?(.*)$/, ([, d]) => {
|
|
592
|
-
const value =
|
|
473
|
+
const value = utilities.handler.px(d || "1");
|
|
593
474
|
if (value) {
|
|
594
475
|
return {
|
|
595
|
-
"--un-ring-inset":
|
|
476
|
+
"--un-ring-inset": varEmpty,
|
|
596
477
|
"--un-ring-offset-width": "0px",
|
|
597
478
|
"--un-ring-offset-color": "#fff",
|
|
598
479
|
"--un-ring-color": "rgba(59, 130, 246, .5)",
|
|
599
480
|
"--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
|
|
600
481
|
"--un-ring-shadow": `var(--un-ring-inset) 0 0 0 calc(${value} + var(--un-ring-offset-width)) var(--un-ring-color)`,
|
|
601
|
-
"-webkit-box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)
|
|
602
|
-
"box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)
|
|
482
|
+
"-webkit-box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)",
|
|
483
|
+
"box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
|
|
603
484
|
};
|
|
604
485
|
}
|
|
605
486
|
}],
|
|
606
|
-
[
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
};
|
|
612
|
-
}
|
|
487
|
+
["ring-offset", { "--un-ring-offset-width": "1px" }],
|
|
488
|
+
[/^ring-offset-(.+)$/, ([, d]) => {
|
|
489
|
+
const value = utilities.handler.px(d || "1");
|
|
490
|
+
if (value)
|
|
491
|
+
return { "--un-ring-offset-width": value };
|
|
613
492
|
}],
|
|
614
|
-
[
|
|
615
|
-
|
|
616
|
-
|
|
493
|
+
[/^ring-(.+)$/, utilities.colorResolver("--un-ring-color", "ring")],
|
|
494
|
+
[/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
495
|
+
[/^ring-offset-(.+)$/, utilities.colorResolver("--un-ring-offset-color", "ring-offset")],
|
|
496
|
+
[/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
497
|
+
["ring-inset", { "--un-ring-inset": "inset" }]
|
|
617
498
|
];
|
|
618
499
|
|
|
619
500
|
const colorResolver = (body, theme) => {
|
|
620
|
-
const data =
|
|
501
|
+
const data = utilities.parseColor(body, theme);
|
|
621
502
|
if (!data)
|
|
622
503
|
return;
|
|
623
504
|
const { color, rgba } = data;
|
|
@@ -635,7 +516,7 @@ const colorResolver = (body, theme) => {
|
|
|
635
516
|
};
|
|
636
517
|
const boxShadows = [
|
|
637
518
|
[/^shadow-?(.*)$/, ([, d], { theme }) => {
|
|
638
|
-
const value = theme
|
|
519
|
+
const value = theme.boxShadow?.[d || "DEFAULT"];
|
|
639
520
|
if (value) {
|
|
640
521
|
return {
|
|
641
522
|
"--un-shadow-color": "0,0,0",
|
|
@@ -655,12 +536,12 @@ function getPropName(minmax, hw) {
|
|
|
655
536
|
function getThemeValue(minmax, hw, theme, prop) {
|
|
656
537
|
let str = `${hw === "h" ? "height" : "width"}`;
|
|
657
538
|
if (minmax)
|
|
658
|
-
str = `${minmax}${
|
|
539
|
+
str = `${minmax}${utilities.capitalize(str)}`;
|
|
659
540
|
return theme[str]?.[prop];
|
|
660
541
|
}
|
|
661
542
|
const sizes = [
|
|
662
543
|
[/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => {
|
|
663
|
-
const v = getThemeValue(m, w, theme, s) ||
|
|
544
|
+
const v = getThemeValue(m, w, theme, s) || utilities.handler.bracket.cssvar.fraction.auto.rem(s);
|
|
664
545
|
if (v != null)
|
|
665
546
|
return { [getPropName(m, w)]: v };
|
|
666
547
|
}],
|
|
@@ -673,106 +554,30 @@ const sizes = [
|
|
|
673
554
|
const aspectRatio = [
|
|
674
555
|
["aspect-ratio-auto", { "aspect-ratio": "auto" }],
|
|
675
556
|
[/^aspect-ratio-(.+)$/, ([, d]) => {
|
|
676
|
-
const v = (/^\d+\/\d+$/.test(d) ? d : null) ||
|
|
557
|
+
const v = (/^\d+\/\d+$/.test(d) ? d : null) || utilities.handler.bracket.cssvar.number(d);
|
|
677
558
|
if (v != null)
|
|
678
559
|
return { "aspect-ratio": v };
|
|
679
560
|
}]
|
|
680
561
|
];
|
|
681
562
|
|
|
682
|
-
const directionSize = (prefix) => ([_, direction, size]) => {
|
|
683
|
-
const v = index.handler.bracket.rem.fraction.cssvar(size);
|
|
684
|
-
if (v)
|
|
685
|
-
return index.directionMap[direction].map((i) => [prefix + i, v]);
|
|
686
|
-
};
|
|
687
563
|
const paddings = [
|
|
688
|
-
[/^pa?()-?(-?.+)$/, directionSize("padding")],
|
|
689
|
-
[/^p-?([xy])-?(-?.+)$/, directionSize("padding")],
|
|
690
|
-
[/^p-?([rltbse])-?(-?.+)$/, directionSize("padding")]
|
|
564
|
+
[/^pa?()-?(-?.+)$/, utilities.directionSize("padding")],
|
|
565
|
+
[/^p-?([xy])-?(-?.+)$/, utilities.directionSize("padding")],
|
|
566
|
+
[/^p-?([rltbse])-?(-?.+)$/, utilities.directionSize("padding")]
|
|
691
567
|
];
|
|
692
568
|
const margins = [
|
|
693
|
-
[/^ma?()-?(-?.+)$/, directionSize("margin")],
|
|
694
|
-
[/^m-?([xy])-?(-?.+)$/, directionSize("margin")],
|
|
695
|
-
[/^m-?([rltbse])-?(-?.+)$/, directionSize("margin")]
|
|
696
|
-
];
|
|
697
|
-
|
|
698
|
-
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
699
|
-
const displays = [
|
|
700
|
-
["inline", { display: "inline" }],
|
|
701
|
-
["block", { display: "block" }],
|
|
702
|
-
["inline-block", { display: "inline-block" }],
|
|
703
|
-
["contents", { display: "contents" }],
|
|
704
|
-
["flow-root", { display: "flow-root" }],
|
|
705
|
-
["list-item", { display: "list-item" }],
|
|
706
|
-
["hidden", { display: "none" }]
|
|
707
|
-
];
|
|
708
|
-
const appearances = [
|
|
709
|
-
["visible", { visibility: "visible" }],
|
|
710
|
-
["invisible", { visibility: "hidden" }],
|
|
711
|
-
["backface-visible", { "backface-visibility": "visible" }],
|
|
712
|
-
["backface-hidden", { "backface-visibility": "hidden" }]
|
|
713
|
-
];
|
|
714
|
-
const cursors = [
|
|
715
|
-
[/^cursor-(.+)$/, ([, c]) => ({ cursor: c })]
|
|
716
|
-
];
|
|
717
|
-
const pointerEvents = [
|
|
718
|
-
["pointer-events-none", { "pointer-events": "none" }],
|
|
719
|
-
["pointer-events-auto", { "pointer-events": "auto" }]
|
|
720
|
-
];
|
|
721
|
-
const resizes = [
|
|
722
|
-
["resize-none", { resize: "none" }],
|
|
723
|
-
["resize-x", { resize: "horizontal" }],
|
|
724
|
-
["resize-y", { resize: "vertical" }],
|
|
725
|
-
["resize", { resize: "both" }]
|
|
726
|
-
];
|
|
727
|
-
const userSelects = [
|
|
728
|
-
[/^select-(none|text|all|auto)$/, ([, v]) => ({ "user-select": v })]
|
|
729
|
-
];
|
|
730
|
-
const whitespaces = [
|
|
731
|
-
[/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
|
|
732
|
-
];
|
|
733
|
-
const contents = [
|
|
734
|
-
["content-empty", { content: '""' }]
|
|
735
|
-
];
|
|
736
|
-
const breaks = [
|
|
737
|
-
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
|
|
738
|
-
["break-word", { "overflow-wrap": "break-word" }],
|
|
739
|
-
["break-all", { "word-break": "break-all" }]
|
|
740
|
-
];
|
|
741
|
-
const textOverflows = [
|
|
742
|
-
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
|
|
743
|
-
["text-ellipsis", { "text-overflow": "ellipsis" }],
|
|
744
|
-
["text-clip", { "text-overflow": "clip" }]
|
|
745
|
-
];
|
|
746
|
-
const textTransforms = [
|
|
747
|
-
["case-upper", { "text-transform": "uppercase" }],
|
|
748
|
-
["case-lower", { "text-transform": "lowercase" }],
|
|
749
|
-
["case-capital", { "text-transform": "capitalize" }],
|
|
750
|
-
["case-normal", { "text-transform": "none" }]
|
|
751
|
-
];
|
|
752
|
-
const fontStyles = [
|
|
753
|
-
["italic", { "font-style": "italic" }],
|
|
754
|
-
["not-italic", { "font-style": "normal" }]
|
|
755
|
-
];
|
|
756
|
-
const fontSmoothings = [
|
|
757
|
-
["antialiased", {
|
|
758
|
-
"-webkit-font-smoothing": "antialiased",
|
|
759
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
760
|
-
"font-smoothing": "grayscale"
|
|
761
|
-
}],
|
|
762
|
-
["subpixel-antialiased", {
|
|
763
|
-
"-webkit-font-smoothing": "auto",
|
|
764
|
-
"-moz-osx-font-smoothing": "auto",
|
|
765
|
-
"font-smoothing": "auto"
|
|
766
|
-
}]
|
|
569
|
+
[/^ma?()-?(-?.+)$/, utilities.directionSize("margin")],
|
|
570
|
+
[/^m-?([xy])-?(-?.+)$/, utilities.directionSize("margin")],
|
|
571
|
+
[/^m-?([rltbse])-?(-?.+)$/, utilities.directionSize("margin")]
|
|
767
572
|
];
|
|
768
573
|
|
|
769
574
|
const transformGpu = {
|
|
770
575
|
transform: "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
|
|
771
|
-
[pseudo.
|
|
576
|
+
[pseudo.CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
772
577
|
};
|
|
773
578
|
const transformCpu = {
|
|
774
579
|
transform: "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))",
|
|
775
|
-
[pseudo.
|
|
580
|
+
[pseudo.CONTROL_BYPASS_PSEUDO_CLASS]: ""
|
|
776
581
|
};
|
|
777
582
|
const transformBase = {
|
|
778
583
|
"--un-rotate": 0,
|
|
@@ -789,11 +594,12 @@ const transformBase = {
|
|
|
789
594
|
const transforms = [
|
|
790
595
|
["transform", transformBase],
|
|
791
596
|
[/^preserve-(3d|flat)$/, ([, value]) => ({ "transform-style": value === "3d" ? `preserve-${value}` : value })],
|
|
792
|
-
[/^translate()-(
|
|
793
|
-
[/^translate-([xyz])-(
|
|
794
|
-
[/^scale()-(
|
|
795
|
-
[/^scale-([xyz])-(
|
|
796
|
-
[/^rotate-(
|
|
597
|
+
[/^translate()-(.+)$/, handleTranslate],
|
|
598
|
+
[/^translate-([xyz])-(.+)$/, handleTranslate],
|
|
599
|
+
[/^scale()-(.+)$/, handleScale],
|
|
600
|
+
[/^scale-([xyz])-(.+)$/, handleScale],
|
|
601
|
+
[/^rotate-(.+)$/, handleRotate],
|
|
602
|
+
[/^rotate-((?!\[)[^-]+?)(?:deg)?$/, handleRotateWithUnit],
|
|
797
603
|
["transform-gpu", transformGpu],
|
|
798
604
|
["transform-cpu", transformCpu],
|
|
799
605
|
["transform-none", { transform: "none" }],
|
|
@@ -808,29 +614,29 @@ const transforms = [
|
|
|
808
614
|
["origin-top-left", { "transform-origin": "top left" }]
|
|
809
615
|
];
|
|
810
616
|
function handleTranslate([, d, b]) {
|
|
811
|
-
const v =
|
|
617
|
+
const v = utilities.handler.bracket.fraction.auto.rem(b);
|
|
812
618
|
if (v != null) {
|
|
813
619
|
return [
|
|
814
620
|
transformBase,
|
|
815
621
|
[
|
|
816
|
-
...
|
|
622
|
+
...utilities.xyzMap[d].map((i) => [`--un-translate${i}`, v])
|
|
817
623
|
]
|
|
818
624
|
];
|
|
819
625
|
}
|
|
820
626
|
}
|
|
821
627
|
function handleScale([, d, b]) {
|
|
822
|
-
const v =
|
|
628
|
+
const v = utilities.handler.bracket.fraction.percent(b);
|
|
823
629
|
if (v != null) {
|
|
824
630
|
return [
|
|
825
631
|
transformBase,
|
|
826
632
|
[
|
|
827
|
-
...
|
|
633
|
+
...utilities.xyzMap[d].map((i) => [`--un-scale${i}`, v])
|
|
828
634
|
]
|
|
829
635
|
];
|
|
830
636
|
}
|
|
831
637
|
}
|
|
832
|
-
function
|
|
833
|
-
const v =
|
|
638
|
+
function handleRotateWithUnit([, b]) {
|
|
639
|
+
const v = utilities.handler.bracket.number(b);
|
|
834
640
|
if (v != null) {
|
|
835
641
|
return [
|
|
836
642
|
transformBase,
|
|
@@ -838,6 +644,15 @@ function handleRotate([, b]) {
|
|
|
838
644
|
];
|
|
839
645
|
}
|
|
840
646
|
}
|
|
647
|
+
function handleRotate([, b]) {
|
|
648
|
+
const v = utilities.handler.bracket(b);
|
|
649
|
+
if (v != null) {
|
|
650
|
+
return [
|
|
651
|
+
transformBase,
|
|
652
|
+
{ "--un-rotate": v }
|
|
653
|
+
];
|
|
654
|
+
}
|
|
655
|
+
}
|
|
841
656
|
|
|
842
657
|
const variablesAbbrMap = {
|
|
843
658
|
"visible": "visibility",
|
|
@@ -878,8 +693,8 @@ const cssVariables = [
|
|
|
878
693
|
}
|
|
879
694
|
}],
|
|
880
695
|
[/^(?:border|b)-([^-]+)-\$(.+)$/, ([, a, v]) => {
|
|
881
|
-
if (a in
|
|
882
|
-
return
|
|
696
|
+
if (a in utilities.directionMap)
|
|
697
|
+
return utilities.directionMap[a].map((i) => [`border${i}-color`, `var(--${v})`]);
|
|
883
698
|
}]
|
|
884
699
|
];
|
|
885
700
|
|
|
@@ -897,20 +712,12 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
|
|
|
897
712
|
const textDecorations = [
|
|
898
713
|
["underline", { "text-decoration": "underline" }],
|
|
899
714
|
["line-through", { "text-decoration": "line-through" }],
|
|
900
|
-
["no-underline", { "text-decoration": "none" }],
|
|
901
715
|
["decoration-underline", { "text-decoration": "underline" }],
|
|
902
716
|
["decoration-line-through", { "text-decoration": "line-through" }],
|
|
903
|
-
[
|
|
904
|
-
[/^(?:underline|decoration)-(
|
|
905
|
-
[/^(?:underline|decoration)-([^-]+)$/, ([, s]) => ({ "text-decoration-thickness": ["auto", "from-font"].includes(s) ? s : index.handler.bracket.px(s) })],
|
|
906
|
-
[/^decoration-(.*)$/, ([, d]) => ({ "text-decoration-thickness": index.handler.bracket.px(d) })],
|
|
907
|
-
[/^underline-offset-([^-]+)$/, ([, s]) => {
|
|
908
|
-
const v = s === "auto" ? s : index.handler.bracket.px(s);
|
|
909
|
-
if (v != null)
|
|
910
|
-
return { "text-underline-offset": v };
|
|
911
|
-
}],
|
|
717
|
+
[/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": utilities.handler.bracket.px(s) })],
|
|
718
|
+
[/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
|
|
912
719
|
[/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
|
|
913
|
-
const result = colorResolver
|
|
720
|
+
const result = utilities.colorResolver("text-decoration-color", "line")(match, ctx);
|
|
914
721
|
if (result) {
|
|
915
722
|
return {
|
|
916
723
|
"-webkit-text-decoration-color": result["text-decoration-color"],
|
|
@@ -918,7 +725,25 @@ const textDecorations = [
|
|
|
918
725
|
};
|
|
919
726
|
}
|
|
920
727
|
}],
|
|
921
|
-
[/^(?:underline|decoration)-op(?:acity)?-?(.+)
|
|
728
|
+
[/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
729
|
+
[/^underline-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": utilities.handler.auto.bracket.px(s) })],
|
|
730
|
+
[/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
|
|
731
|
+
["no-underline", { "text-decoration": "none" }],
|
|
732
|
+
["decoration-none", { "text-decoration": "none" }]
|
|
733
|
+
];
|
|
734
|
+
|
|
735
|
+
const svgUtilities = [
|
|
736
|
+
[/^fill-(.+)$/, utilities.colorResolver("fill", "fill")],
|
|
737
|
+
[/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
738
|
+
["fill-none", { fill: "none" }],
|
|
739
|
+
[/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => {
|
|
740
|
+
const v = utilities.handler.bracket.fraction.px.number(s);
|
|
741
|
+
if (v)
|
|
742
|
+
return { "stroke-width": v };
|
|
743
|
+
}],
|
|
744
|
+
[/^stroke-(.+)$/, utilities.colorResolver("stroke", "stroke")],
|
|
745
|
+
[/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
746
|
+
["stroke-none", { stroke: "none" }]
|
|
922
747
|
];
|
|
923
748
|
|
|
924
749
|
const rules = [
|
|
@@ -928,7 +753,7 @@ const rules = [
|
|
|
928
753
|
displays,
|
|
929
754
|
opacity,
|
|
930
755
|
bgColors,
|
|
931
|
-
|
|
756
|
+
svgUtilities,
|
|
932
757
|
borders,
|
|
933
758
|
contents,
|
|
934
759
|
fonts,
|
|
@@ -962,7 +787,6 @@ const rules = [
|
|
|
962
787
|
overflows,
|
|
963
788
|
outline,
|
|
964
789
|
appearance,
|
|
965
|
-
placeholder,
|
|
966
790
|
positions,
|
|
967
791
|
orders,
|
|
968
792
|
justifies,
|
|
@@ -974,6 +798,7 @@ const rules = [
|
|
|
974
798
|
boxSizing,
|
|
975
799
|
transitions,
|
|
976
800
|
transforms,
|
|
801
|
+
willChange,
|
|
977
802
|
questionMark
|
|
978
803
|
].flat(1);
|
|
979
804
|
|
|
@@ -982,17 +807,14 @@ exports.appearance = appearance;
|
|
|
982
807
|
exports.appearances = appearances;
|
|
983
808
|
exports.aspectRatio = aspectRatio;
|
|
984
809
|
exports.bgColors = bgColors;
|
|
985
|
-
exports.borderColors = borderColors;
|
|
986
810
|
exports.borders = borders;
|
|
987
811
|
exports.boxShadows = boxShadows;
|
|
988
812
|
exports.boxSizing = boxSizing;
|
|
989
813
|
exports.breaks = breaks;
|
|
990
|
-
exports.colorResolver = colorResolver$1;
|
|
991
814
|
exports.contents = contents;
|
|
992
815
|
exports.cssVariables = cssVariables;
|
|
993
816
|
exports.cursors = cursors;
|
|
994
817
|
exports.displays = displays;
|
|
995
|
-
exports.fillColors = fillColors;
|
|
996
818
|
exports.flex = flex;
|
|
997
819
|
exports.floats = floats;
|
|
998
820
|
exports.fontSmoothings = fontSmoothings;
|
|
@@ -1008,18 +830,15 @@ exports.orders = orders;
|
|
|
1008
830
|
exports.outline = outline;
|
|
1009
831
|
exports.overflows = overflows;
|
|
1010
832
|
exports.paddings = paddings;
|
|
1011
|
-
exports.parseColorUtil = parseColorUtil;
|
|
1012
|
-
exports.placeholder = placeholder;
|
|
1013
833
|
exports.placements = placements;
|
|
1014
834
|
exports.pointerEvents = pointerEvents;
|
|
1015
835
|
exports.positions = positions;
|
|
1016
836
|
exports.questionMark = questionMark;
|
|
1017
837
|
exports.resizes = resizes;
|
|
1018
|
-
exports.ringColors = ringColors;
|
|
1019
|
-
exports.ringOffsetColors = ringOffsetColors;
|
|
1020
838
|
exports.rings = rings;
|
|
1021
839
|
exports.rules = rules;
|
|
1022
840
|
exports.sizes = sizes;
|
|
841
|
+
exports.svgUtilities = svgUtilities;
|
|
1023
842
|
exports.tabSizes = tabSizes;
|
|
1024
843
|
exports.textAligns = textAligns;
|
|
1025
844
|
exports.textColors = textColors;
|
|
@@ -1035,4 +854,5 @@ exports.userSelects = userSelects;
|
|
|
1035
854
|
exports.varEmpty = varEmpty;
|
|
1036
855
|
exports.verticalAligns = verticalAligns;
|
|
1037
856
|
exports.whitespaces = whitespaces;
|
|
857
|
+
exports.willChange = willChange;
|
|
1038
858
|
exports.zIndexes = zIndexes;
|