@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.
@@ -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
- ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }],
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
- /^outline-(.+)$/,
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 placeholder = [
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)-([^-]+)-(.+)$/, handlerBorder],
43
+ [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorder],
171
44
  [/^(?:border|b)()-size-(.+)$/, handlerBorderSize],
172
45
  [/^(?:border|b)-([^-]+)-size-(.+)$/, handlerBorderSize],
173
46
  [/^(?:border|b)()-(.+)$/, handlerBorderColor],
174
- [/^(?:border|b)-([^-]+)-(.+)$/, handlerBorderColor],
175
- [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": index.handler.bracket.percent(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"] = index.directionMap[a] ? [a, b] : ["", a];
196
- const v = index.handler.bracket.px(s);
197
- if (v != null) {
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
- const ofColor = colorResolver$1("border-color", "border")(["", c], ctx);
205
- if (ofColor) {
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"] = index.cornerMap[a] ? [a, b] : ["", a];
214
- const v = theme.borderRadius?.[s] || index.handler.bracket.fraction.rem(s);
215
- if (v != null)
216
- return index.cornerMap[d].map((i) => [`border${i}-radius`, v]);
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 transitionBasicProps = [
220
- "color",
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 transitionSizeProps = [
247
- "max-height",
248
- "min-height",
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 transitionSwitchProps = ["all", "none"];
267
- const transitionEnhanceProps = ["stroke", "filter", "backdrop-filter", "fill", "mask", "mask-size", "mask-border", "clip-path", "clip"];
268
- const transitionProps = [
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
- const transitionPropsStr = transitionProps.join(", ");
275
- const validateProperty = (prop) => {
276
- if (prop && ![...transitionProps, ...transitionSwitchProps].includes(prop))
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 transitionProperty = validateProperty(prop);
283
- if (!transitionProperty)
284
- return;
285
- return {
286
- "transition-property": transitionProperty,
287
- "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
288
- "transition-duration": `${duration}ms`
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-([a-z-]+)$/, ([, v]) => {
303
- const transitionProperty = validateProperty(v);
304
- if (transitionProperty)
305
- return { "transition-property": transitionProperty };
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 = index.handler.bracket.rem(s);
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 = index.handler.bracket.rem(s);
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] || index.handler.number(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] || index.handler.bracket.rem(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] || index.handler.bracket.rem(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] || index.handler.bracket.rem(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 = index.handler.bracket.global.number(s);
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"] || index.handler.bracket.cssvar.fraction.rem(s);
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"] || index.handler.bracket.cssvar.px(s);
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$1("-webkit-text-stroke-color", "text-stroke")],
417
- [/^text-stroke-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-text-stroke-opacity": index.handler.bracket.percent(opacity) })]
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"] || index.handler.bracket.cssvar(s);
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 = index.handler.bracket.rem(s);
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
- "grid-row-gap": v,
451
- "row-gap": v
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] || index.handler.bracket.rem(s))[0];
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": `${v}` })],
471
- [/^(?:grid-)?col-end-([\w.]+)$/, ([, v]) => ({ "grid-column-end": `${v}` })],
472
- [/^(?:grid-)?row-start-([\w.-]+)$/, ([, v]) => ({ "grid-row-start": `${v}` })],
473
- [/^(?:grid-)?row-end-([\w.-]+)$/, ([, v]) => ({ "grid-row-end": `${v}` })],
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 = index.handler.bracket(v);
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 = index.handler.number.bracket(parts[1])?.toString().replace(/_/g, " ");
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": `${autoDirection(v, theme)}` })],
491
- [/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": `${v.replace("col", "column").split("-").join(" ")}` })],
492
- [/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": `${autoDirection(v, theme)}` })],
493
- [/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill, minmax(${d}, 1fr))` })],
494
- [/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill, minmax(${d}, 1fr))` })],
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: { first: "-9999", last: "9999", none: "0" }[v] || index.handler.bracket.number(v) })]
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-items": "stretch" }]
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] ?? index.handler.bracket.fraction.cssvar.rem(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 index.directionMap)
570
- return index.directionMap[d].map((i) => [i.slice(1), r]);
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
- [/^float-(left|right|none)$/, ([, value]) => ({ float: value })],
575
- [/^clear-(left|right|both|none)$/, ([, value]) => ({ clear: value })]
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": index.handler.number(v) })]
390
+ [/^z-([^-]+)$/, ([, v]) => ({ "z-index": utilities.handler.number(v) })]
580
391
  ];
581
392
  const boxSizing = [
582
- [
583
- /^box-(border|content)$/,
584
- ([, value]) => ({
585
- "box-sizing": `${value}-box`
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 = index.handler.px(d || "1");
473
+ const value = utilities.handler.px(d || "1");
593
474
  if (value) {
594
475
  return {
595
- "--un-ring-inset": "var(--un-empty, )",
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
- [/^ring-offset-?(.*)$/, ([, d]) => {
607
- const value = index.handler.px(d || "1");
608
- if (value) {
609
- return {
610
- "--un-ring-offset-width": value
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
- ["ring-inset", { "--un-ring-inset": "inset" }],
615
- ...ringColors,
616
- ...ringOffsetColors
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 = parseColorUtil(body, theme);
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?.boxShadow?.[d || "DEFAULT"];
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}${index.capitalize(str)}`;
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) || index.handler.bracket.cssvar.fraction.rem(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) || index.handler.bracket.cssvar.number(d);
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.CONTROL_BYPASS_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.CONTROL_BYPASS_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()-([^-]+)$/, handleTranslate],
793
- [/^translate-([xyz])-([^-]+)$/, handleTranslate],
794
- [/^scale()-([^-]+)$/, handleScale],
795
- [/^scale-([xyz])-([^-]+)$/, handleScale],
796
- [/^rotate-([^-]+)(?:deg)?$/, handleRotate],
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 = index.handler.bracket.fraction.rem(b);
617
+ const v = utilities.handler.bracket.fraction.auto.rem(b);
812
618
  if (v != null) {
813
619
  return [
814
620
  transformBase,
815
621
  [
816
- ...index.xyzMap[d].map((i) => [`--un-translate${i}`, v])
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 = index.handler.bracket.fraction.percent(b);
628
+ const v = utilities.handler.bracket.fraction.percent(b);
823
629
  if (v != null) {
824
630
  return [
825
631
  transformBase,
826
632
  [
827
- ...index.xyzMap[d].map((i) => [`--un-scale${i}`, v])
633
+ ...utilities.xyzMap[d].map((i) => [`--un-scale${i}`, v])
828
634
  ]
829
635
  ];
830
636
  }
831
637
  }
832
- function handleRotate([, b]) {
833
- const v = index.handler.bracket.number(b);
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 index.directionMap)
882
- return index.directionMap[a].map((i) => [`border${i}-color`, `var(--${v})`]);
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
- ["decoration-none", { "text-decoration": "none" }],
904
- [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy)$/, ([, d]) => ({ "text-decoration-style": d })],
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$1("text-decoration-color", "line")(match, ctx);
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)?-?(.+)$/m, ([, opacity]) => ({ "--un-line-opacity": index.handler.bracket.percent(opacity) })]
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
- fillColors,
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;