@unocss/preset-wind 0.21.2 → 0.22.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.
Files changed (3) hide show
  1. package/dist/index.cjs +155 -79
  2. package/dist/index.mjs +158 -82
  3. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -26,17 +26,17 @@ ${constructCSS({ animation: `${name}` })}`;
26
26
  ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
27
27
  }
28
28
  }],
29
- [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d) })],
30
- [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
29
+ [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.cssvar.time(d) })],
30
+ [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.cssvar.time(d) })],
31
31
  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
32
32
  ["animate-mode-none", { "animation-fill-mode": "none" }],
33
33
  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
34
34
  [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
35
35
  ["animate-normal", { "animation-direction": "normal" }],
36
36
  ["animate-direction-normal", { "animation-direction": "normal" }],
37
- [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket(d) ?? d.replace(/\-/g, ",") })],
37
+ [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
38
38
  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
39
- [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
39
+ [/^animate-play-(?:state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
40
40
  ["animate-none", { animation: "none" }]
41
41
  ];
42
42
 
@@ -71,15 +71,34 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
71
71
  }
72
72
  };
73
73
  const backgroundStyles = [
74
+ [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": utils.handler.bracket(d) })],
75
+ [/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": utils.handler.bracket(s) })],
74
76
  [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
75
77
  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
76
78
  [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
77
79
  [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
78
80
  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
79
81
  [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
82
+ [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
83
+ "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
84
+ })],
80
85
  [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
81
- if (d in utils.positionMap)
82
- return { "background-image": `linear-gradient(to ${utils.positionMap[d]}, var(--un-gradient-stops))` };
86
+ if (d in utils.positionMap) {
87
+ return {
88
+ "--un-gradient-shape": `to ${utils.positionMap[d]}`,
89
+ "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)",
90
+ "background-image": "linear-gradient(var(--un-gradient))"
91
+ };
92
+ }
93
+ }],
94
+ [/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => {
95
+ const v = d in utils.positionMap ? `to ${utils.positionMap[d]}` : utils.handler.bracket(d);
96
+ if (v != null) {
97
+ return {
98
+ "--un-gradient-shape": v,
99
+ "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)"
100
+ };
101
+ }
83
102
  }],
84
103
  ["bg-none", { "background-image": "none" }],
85
104
  ["box-decoration-slice", { "box-decoration-break": "slice" }],
@@ -213,7 +232,6 @@ const containerShortcuts = [
213
232
  }]
214
233
  ];
215
234
 
216
- const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)";
217
235
  const filterBase = {
218
236
  "--un-blur": rules$1.varEmpty,
219
237
  "--un-brightness": rules$1.varEmpty,
@@ -224,10 +242,9 @@ const filterBase = {
224
242
  "--un-invert": rules$1.varEmpty,
225
243
  "--un-saturate": rules$1.varEmpty,
226
244
  "--un-sepia": rules$1.varEmpty,
227
- "filter": filterContnet,
228
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
245
+ "--un-filter": "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)",
246
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
229
247
  };
230
- const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
231
248
  const backdropFilterBase = {
232
249
  "--un-backdrop-blur": rules$1.varEmpty,
233
250
  "--un-backdrop-brightness": rules$1.varEmpty,
@@ -238,12 +255,11 @@ const backdropFilterBase = {
238
255
  "--un-backdrop-opacity": rules$1.varEmpty,
239
256
  "--un-backdrop-saturate": rules$1.varEmpty,
240
257
  "--un-backdrop-sepia": rules$1.varEmpty,
241
- "-webkit-backdrop-filter": backdropFilterContent,
242
- "backdrop-filter": backdropFilterContent,
243
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
258
+ "--un-backdrop-filter": "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)",
259
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
244
260
  };
245
261
  const percentWithDefault = (str) => {
246
- let v = utils.handler.bracket(str || "");
262
+ let v = utils.handler.bracket.cssvar(str || "");
247
263
  if (v != null)
248
264
  return v;
249
265
  v = str ? utils.handler.percent(str) : "1";
@@ -253,38 +269,79 @@ const percentWithDefault = (str) => {
253
269
  const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
254
270
  const value = resolver(s, theme);
255
271
  if (value != null && value !== "") {
272
+ if (b) {
273
+ return [
274
+ backdropFilterBase,
275
+ {
276
+ [`--un-${b}${varName}`]: `${varName}(${value})`,
277
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
278
+ "backdrop-filter": "var(--un-backdrop-filter)"
279
+ }
280
+ ];
281
+ } else {
282
+ return [
283
+ filterBase,
284
+ {
285
+ [`--un-${varName}`]: `${varName}(${value})`,
286
+ filter: "var(--un-filter)"
287
+ }
288
+ ];
289
+ }
290
+ }
291
+ };
292
+ const dropShadowResolver = ([, s], { theme }) => {
293
+ let v = theme.dropShadow?.[s || "DEFAULT"];
294
+ if (v != null) {
295
+ const shadows = rules$1.colorableShadows(v, "--un-drop-shadow-color");
256
296
  return [
257
- b ? backdropFilterBase : filterBase,
258
- { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
297
+ filterBase,
298
+ {
299
+ "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
300
+ "filter": "var(--un-filter)"
301
+ }
302
+ ];
303
+ }
304
+ v = utils.handler.bracket.cssvar(s);
305
+ if (v != null) {
306
+ return [
307
+ filterBase,
308
+ {
309
+ "--un-drop-shadow": `drop-shadow(${v})`,
310
+ "filter": "var(--un-filter)"
311
+ }
259
312
  ];
260
313
  }
261
314
  };
262
315
  const filters = [
263
- ["filter", filterBase],
264
- ["backdrop-filter", backdropFilterBase],
265
- [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
266
- [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
267
- [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
268
- [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
269
- let v = theme.dropShadow?.[s || "DEFAULT"];
270
- if (v != null)
271
- return core.toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
272
- v = utils.handler.bracket(s);
273
- if (v != null)
274
- return `drop-shadow(${v})`;
275
- })],
276
- [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
277
- [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
278
- [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
279
- [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
280
- [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
281
- [/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
316
+ [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.cssvar.px(s))],
317
+ [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.cssvar.percent(s))],
318
+ [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.cssvar.percent(s))],
319
+ [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
320
+ [/^(?:filter-)?drop-shadow-color-(.+)$/, utils.colorResolver("--un-drop-shadow-color", "drop-shadow")],
321
+ [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent(opacity) })],
322
+ [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
323
+ [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.cssvar.degree(s))],
324
+ [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
325
+ [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.cssvar.percent(s))],
326
+ [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.cssvar.percent(s))],
327
+ [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
328
+ [/^filter$/, () => [
329
+ filterBase,
330
+ { filter: "var(--un-filter)" }
331
+ ]],
332
+ [/^backdrop-filter$/, () => [
333
+ backdropFilterBase,
334
+ {
335
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
336
+ "backdrop-filter": "var(--un-backdrop-filter)"
337
+ }
338
+ ]],
282
339
  ["filter-none", { filter: "none" }],
283
340
  ["backdrop-filter-none", {
284
341
  "-webkit-backdrop-filter": "none",
285
342
  "backdrop-filter": "none"
286
343
  }],
287
- [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
344
+ [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
288
345
  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
289
346
  "-webkit-backdrop-filter": `${s}(0)`,
290
347
  "backdrop-filter": `${s}(0)`
@@ -292,21 +349,24 @@ const filters = [
292
349
  ];
293
350
 
294
351
  const spaces = [
295
- [/^space-?([xy])-?(-?.+)$/, (match) => {
296
- const [, direction] = match;
297
- const results = utils.directionSize("margin")(match)?.map((item) => {
298
- const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
299
- return [item[0], value];
300
- });
301
- if (results) {
302
- return [
303
- [`--un-space-${direction}-reverse`, 0],
304
- ...results
305
- ];
306
- }
307
- }],
308
- [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
352
+ [/^space-?([xy])-?(-?.+)$/, handlerSpace],
353
+ [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
354
+ [/^space-(block|inline)-(-?.+)$/, handlerSpace],
355
+ [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
309
356
  ];
357
+ function handlerSpace(match) {
358
+ const [, direction] = match;
359
+ const results = utils.directionSize("margin")(match)?.map((item) => {
360
+ const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
361
+ return [item[0], value];
362
+ });
363
+ if (results) {
364
+ return [
365
+ [`--un-space-${direction}-reverse`, 0],
366
+ ...results
367
+ ];
368
+ }
369
+ }
310
370
 
311
371
  const textTransforms = [
312
372
  ["uppercase", { "text-transform": "uppercase" }],
@@ -442,31 +502,35 @@ const tables = [
442
502
  ];
443
503
 
444
504
  const variablesAbbrMap = {
445
- "write": "writing-mode",
446
- "write-orient": "text-orientation",
447
505
  "bg-blend": "background-blend-mode",
448
506
  "bg-clip": "-webkit-background-clip",
449
507
  "bg-gradient": "linear-gradient",
450
- "bg-origin-border": "background-origin",
508
+ "bg-image": "background-image",
509
+ "bg-origin": "background-origin",
451
510
  "bg-position": "background-position",
452
511
  "bg-repeat": "background-repeat",
453
512
  "bg-size": "background-size",
454
513
  "mix-blend": "mix-blend-mode",
455
- "animate-speed": "animation-speed"
514
+ "object": "object-fit",
515
+ "object-position": "object-position",
516
+ "write": "writing-mode",
517
+ "write-orient": "text-orientation"
456
518
  };
457
- const cssVariables = [[
458
- /^(.+)-\$(.+)$/,
459
- ([, name, varname]) => {
460
- const prop = variablesAbbrMap[name];
519
+ const cssVariables = [
520
+ [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
521
+ const prop = variablesAbbrMap[name.slice(0, -1)];
461
522
  if (prop)
462
523
  return { [prop]: `var(--${varname})` };
463
- }
464
- ]];
524
+ }]
525
+ ];
465
526
 
466
527
  const divides = [
467
528
  [/^divide-?([xy])$/, handlerDivide],
468
529
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
469
530
  [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
531
+ [/^divide-(block|inline)$/, handlerDivide],
532
+ [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
533
+ [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
470
534
  [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
471
535
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
472
536
  ["divide-solid", { "border-style": "solid" }],
@@ -476,7 +540,7 @@ const divides = [
476
540
  ["divide-none", { "border-style": "none" }]
477
541
  ];
478
542
  function handlerDivide([, d, s = "1"]) {
479
- const v = utils.handler.bracket.px(s);
543
+ const v = utils.handler.bracket.cssvar.px(s);
480
544
  if (v != null) {
481
545
  const results = utils.directionMap[d].map((item) => {
482
546
  const key = `border${item}-width`;
@@ -508,18 +572,25 @@ const fontVariantNumericBase = {
508
572
  "--un-numeric-figure": rules$1.varEmpty,
509
573
  "--un-numeric-spacing": rules$1.varEmpty,
510
574
  "--un-numeric-fraction": rules$1.varEmpty,
511
- "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
512
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
575
+ "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
576
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
513
577
  };
578
+ const toEntries = (entry) => [
579
+ fontVariantNumericBase,
580
+ {
581
+ ...entry,
582
+ "font-variant-numeric": "var(--un-font-variant-numeric)"
583
+ }
584
+ ];
514
585
  const fontVariantNumeric = [
515
- [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
516
- [/^slashed-zero$/, () => [fontVariantNumericBase, { "--un-slashed-zero": "slashed-zero" }]],
517
- [/^lining-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "lining-nums" }]],
518
- [/^oldstyle-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "oldstyle-nums" }]],
519
- [/^proportional-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "proportional-nums" }]],
520
- [/^tabular-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "tabular-nums" }]],
521
- [/^diagonal-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "diagonal-fractions" }]],
522
- [/^stacked-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "stacked-fractions" }]],
586
+ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
587
+ [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
588
+ [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
589
+ [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
590
+ [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
591
+ [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
592
+ [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
593
+ [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
523
594
  ["normal-nums", { "font-variant-numeric": "normal" }]
524
595
  ];
525
596
 
@@ -528,7 +599,7 @@ const touchActionBase = {
528
599
  "--un-pan-y": rules$1.varEmpty,
529
600
  "--un-pinch-zoom": rules$1.varEmpty,
530
601
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
531
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
602
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
532
603
  };
533
604
  const touchActions = [
534
605
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -561,7 +632,7 @@ const scrolls = [
561
632
  [/^snap-(x|y|both)$/, ([, d]) => [
562
633
  {
563
634
  "--un-scroll-snap-strictness": "proximity",
564
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
635
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
565
636
  },
566
637
  {
567
638
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -579,19 +650,24 @@ const scrolls = [
579
650
  [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
580
651
  [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
581
652
  [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
653
+ [/^scroll-m-(block|inline)-(-?.+)$/, utils.directionSize("scroll-margin")],
654
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-margin")],
582
655
  [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
583
656
  [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
584
- [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
657
+ [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")],
658
+ [/^scroll-p-(block|inline)-(-?.+)$/, utils.directionSize("scroll-padding")],
659
+ [/^scroll-p-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-padding")]
585
660
  ];
586
661
 
587
662
  const placeholders = [
588
- [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
589
- [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
663
+ [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
664
+ [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent(opacity) })]
590
665
  ];
591
666
 
592
667
  const rules = [
593
668
  rules$1.cssVariables,
594
669
  cssVariables,
670
+ rules$1.cssProperty,
595
671
  container,
596
672
  screenReadersAccess,
597
673
  rules$1.pointerEvents,
@@ -845,12 +921,12 @@ const variantSpaceAndDivide = (matcher) => {
845
921
  };
846
922
 
847
923
  const placeholderModifier = (input, { theme }) => {
848
- const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
924
+ const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
849
925
  if (m) {
850
926
  const [, pre = "", p, body] = m;
851
927
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
852
928
  return {
853
- matcher: `${pre}${p}$-placeholder-${body}`
929
+ matcher: `${pre}placeholder-$ ${p}${body}`
854
930
  };
855
931
  }
856
932
  }
@@ -861,7 +937,7 @@ function hasColorValue(body, theme) {
861
937
  function hasOpacityValue(body) {
862
938
  const match = body.match(/^op(?:acity)?-?(.+)$/);
863
939
  if (match && match[1] != null)
864
- return utils.handler.bracket.percent.cssvar(match[1]) != null;
940
+ return utils.handler.bracket.percent(match[1]) != null;
865
941
  return false;
866
942
  }
867
943
 
package/dist/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
- import { CONTROL_BYPASS_PSEUDO_CLASS, variants } from '@unocss/preset-mini/variants';
2
- import { toArray } from '@unocss/core';
1
+ import { variants } from '@unocss/preset-mini/variants';
2
+ import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
3
3
  import { theme as theme$1 } from '@unocss/preset-mini/theme';
4
4
  export { colors } from '@unocss/preset-mini';
5
- import { varEmpty, cssVariables as cssVariables$1, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
5
+ import { varEmpty, colorableShadows, cssVariables as cssVariables$1, cssProperty, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
6
6
  import { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
7
7
 
8
8
  const animations = [
@@ -22,17 +22,17 @@ ${constructCSS({ animation: `${name}` })}`;
22
22
  ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
23
23
  }
24
24
  }],
25
- [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d) })],
26
- [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
25
+ [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.cssvar.time(d) })],
26
+ [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.cssvar.time(d) })],
27
27
  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
28
28
  ["animate-mode-none", { "animation-fill-mode": "none" }],
29
29
  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
30
30
  [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
31
31
  ["animate-normal", { "animation-direction": "normal" }],
32
32
  ["animate-direction-normal", { "animation-direction": "normal" }],
33
- [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket(d) ?? d.replace(/\-/g, ",") })],
33
+ [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket.cssvar(d) ?? d.replace(/\-/g, ",") })],
34
34
  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
35
- [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
35
+ [/^animate-play-(?:state-)?(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
36
36
  ["animate-none", { animation: "none" }]
37
37
  ];
38
38
 
@@ -67,15 +67,34 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
67
67
  }
68
68
  };
69
69
  const backgroundStyles = [
70
+ [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": handler.bracket(d) })],
71
+ [/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": handler.bracket(s) })],
70
72
  [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
71
73
  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
72
74
  [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
73
75
  [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
74
76
  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
75
77
  [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
78
+ [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
79
+ "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`
80
+ })],
76
81
  [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
77
- if (d in positionMap)
78
- return { "background-image": `linear-gradient(to ${positionMap[d]}, var(--un-gradient-stops))` };
82
+ if (d in positionMap) {
83
+ return {
84
+ "--un-gradient-shape": `to ${positionMap[d]}`,
85
+ "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)",
86
+ "background-image": "linear-gradient(var(--un-gradient))"
87
+ };
88
+ }
89
+ }],
90
+ [/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => {
91
+ const v = d in positionMap ? `to ${positionMap[d]}` : handler.bracket(d);
92
+ if (v != null) {
93
+ return {
94
+ "--un-gradient-shape": v,
95
+ "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)"
96
+ };
97
+ }
79
98
  }],
80
99
  ["bg-none", { "background-image": "none" }],
81
100
  ["box-decoration-slice", { "box-decoration-break": "slice" }],
@@ -209,7 +228,6 @@ const containerShortcuts = [
209
228
  }]
210
229
  ];
211
230
 
212
- const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)";
213
231
  const filterBase = {
214
232
  "--un-blur": varEmpty,
215
233
  "--un-brightness": varEmpty,
@@ -220,10 +238,9 @@ const filterBase = {
220
238
  "--un-invert": varEmpty,
221
239
  "--un-saturate": varEmpty,
222
240
  "--un-sepia": varEmpty,
223
- "filter": filterContnet,
224
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
241
+ "--un-filter": "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)",
242
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
225
243
  };
226
- const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
227
244
  const backdropFilterBase = {
228
245
  "--un-backdrop-blur": varEmpty,
229
246
  "--un-backdrop-brightness": varEmpty,
@@ -234,12 +251,11 @@ const backdropFilterBase = {
234
251
  "--un-backdrop-opacity": varEmpty,
235
252
  "--un-backdrop-saturate": varEmpty,
236
253
  "--un-backdrop-sepia": varEmpty,
237
- "-webkit-backdrop-filter": backdropFilterContent,
238
- "backdrop-filter": backdropFilterContent,
239
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
254
+ "--un-backdrop-filter": "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)",
255
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
240
256
  };
241
257
  const percentWithDefault = (str) => {
242
- let v = handler.bracket(str || "");
258
+ let v = handler.bracket.cssvar(str || "");
243
259
  if (v != null)
244
260
  return v;
245
261
  v = str ? handler.percent(str) : "1";
@@ -249,38 +265,79 @@ const percentWithDefault = (str) => {
249
265
  const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
250
266
  const value = resolver(s, theme);
251
267
  if (value != null && value !== "") {
268
+ if (b) {
269
+ return [
270
+ backdropFilterBase,
271
+ {
272
+ [`--un-${b}${varName}`]: `${varName}(${value})`,
273
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
274
+ "backdrop-filter": "var(--un-backdrop-filter)"
275
+ }
276
+ ];
277
+ } else {
278
+ return [
279
+ filterBase,
280
+ {
281
+ [`--un-${varName}`]: `${varName}(${value})`,
282
+ filter: "var(--un-filter)"
283
+ }
284
+ ];
285
+ }
286
+ }
287
+ };
288
+ const dropShadowResolver = ([, s], { theme }) => {
289
+ let v = theme.dropShadow?.[s || "DEFAULT"];
290
+ if (v != null) {
291
+ const shadows = colorableShadows(v, "--un-drop-shadow-color");
252
292
  return [
253
- b ? backdropFilterBase : filterBase,
254
- { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
293
+ filterBase,
294
+ {
295
+ "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
296
+ "filter": "var(--un-filter)"
297
+ }
298
+ ];
299
+ }
300
+ v = handler.bracket.cssvar(s);
301
+ if (v != null) {
302
+ return [
303
+ filterBase,
304
+ {
305
+ "--un-drop-shadow": `drop-shadow(${v})`,
306
+ "filter": "var(--un-filter)"
307
+ }
255
308
  ];
256
309
  }
257
310
  };
258
311
  const filters = [
259
- ["filter", filterBase],
260
- ["backdrop-filter", backdropFilterBase],
261
- [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
262
- [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
263
- [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
264
- [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
265
- let v = theme.dropShadow?.[s || "DEFAULT"];
266
- if (v != null)
267
- return toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
268
- v = handler.bracket(s);
269
- if (v != null)
270
- return `drop-shadow(${v})`;
271
- })],
272
- [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
273
- [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
274
- [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
275
- [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
276
- [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
277
- [/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
312
+ [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.cssvar.px(s))],
313
+ [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.cssvar.percent(s))],
314
+ [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.cssvar.percent(s))],
315
+ [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
316
+ [/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
317
+ [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent(opacity) })],
318
+ [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
319
+ [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.cssvar.degree(s))],
320
+ [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
321
+ [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.cssvar.percent(s))],
322
+ [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.cssvar.percent(s))],
323
+ [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
324
+ [/^filter$/, () => [
325
+ filterBase,
326
+ { filter: "var(--un-filter)" }
327
+ ]],
328
+ [/^backdrop-filter$/, () => [
329
+ backdropFilterBase,
330
+ {
331
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
332
+ "backdrop-filter": "var(--un-backdrop-filter)"
333
+ }
334
+ ]],
278
335
  ["filter-none", { filter: "none" }],
279
336
  ["backdrop-filter-none", {
280
337
  "-webkit-backdrop-filter": "none",
281
338
  "backdrop-filter": "none"
282
339
  }],
283
- [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
340
+ [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
284
341
  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
285
342
  "-webkit-backdrop-filter": `${s}(0)`,
286
343
  "backdrop-filter": `${s}(0)`
@@ -288,21 +345,24 @@ const filters = [
288
345
  ];
289
346
 
290
347
  const spaces = [
291
- [/^space-?([xy])-?(-?.+)$/, (match) => {
292
- const [, direction] = match;
293
- const results = directionSize("margin")(match)?.map((item) => {
294
- const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
295
- return [item[0], value];
296
- });
297
- if (results) {
298
- return [
299
- [`--un-space-${direction}-reverse`, 0],
300
- ...results
301
- ];
302
- }
303
- }],
304
- [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
348
+ [/^space-?([xy])-?(-?.+)$/, handlerSpace],
349
+ [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
350
+ [/^space-(block|inline)-(-?.+)$/, handlerSpace],
351
+ [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
305
352
  ];
353
+ function handlerSpace(match) {
354
+ const [, direction] = match;
355
+ const results = directionSize("margin")(match)?.map((item) => {
356
+ const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
357
+ return [item[0], value];
358
+ });
359
+ if (results) {
360
+ return [
361
+ [`--un-space-${direction}-reverse`, 0],
362
+ ...results
363
+ ];
364
+ }
365
+ }
306
366
 
307
367
  const textTransforms = [
308
368
  ["uppercase", { "text-transform": "uppercase" }],
@@ -438,31 +498,35 @@ const tables = [
438
498
  ];
439
499
 
440
500
  const variablesAbbrMap = {
441
- "write": "writing-mode",
442
- "write-orient": "text-orientation",
443
501
  "bg-blend": "background-blend-mode",
444
502
  "bg-clip": "-webkit-background-clip",
445
503
  "bg-gradient": "linear-gradient",
446
- "bg-origin-border": "background-origin",
504
+ "bg-image": "background-image",
505
+ "bg-origin": "background-origin",
447
506
  "bg-position": "background-position",
448
507
  "bg-repeat": "background-repeat",
449
508
  "bg-size": "background-size",
450
509
  "mix-blend": "mix-blend-mode",
451
- "animate-speed": "animation-speed"
510
+ "object": "object-fit",
511
+ "object-position": "object-position",
512
+ "write": "writing-mode",
513
+ "write-orient": "text-orientation"
452
514
  };
453
- const cssVariables = [[
454
- /^(.+)-\$(.+)$/,
455
- ([, name, varname]) => {
456
- const prop = variablesAbbrMap[name];
515
+ const cssVariables = [
516
+ [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
517
+ const prop = variablesAbbrMap[name.slice(0, -1)];
457
518
  if (prop)
458
519
  return { [prop]: `var(--${varname})` };
459
- }
460
- ]];
520
+ }]
521
+ ];
461
522
 
462
523
  const divides = [
463
524
  [/^divide-?([xy])$/, handlerDivide],
464
525
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
465
526
  [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
527
+ [/^divide-(block|inline)$/, handlerDivide],
528
+ [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
529
+ [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
466
530
  [/^divide-(.+)$/, colorResolver("border-color", "divide")],
467
531
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
468
532
  ["divide-solid", { "border-style": "solid" }],
@@ -472,7 +536,7 @@ const divides = [
472
536
  ["divide-none", { "border-style": "none" }]
473
537
  ];
474
538
  function handlerDivide([, d, s = "1"]) {
475
- const v = handler.bracket.px(s);
539
+ const v = handler.bracket.cssvar.px(s);
476
540
  if (v != null) {
477
541
  const results = directionMap[d].map((item) => {
478
542
  const key = `border${item}-width`;
@@ -504,18 +568,25 @@ const fontVariantNumericBase = {
504
568
  "--un-numeric-figure": varEmpty,
505
569
  "--un-numeric-spacing": varEmpty,
506
570
  "--un-numeric-fraction": varEmpty,
507
- "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
508
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
571
+ "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
572
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
509
573
  };
574
+ const toEntries = (entry) => [
575
+ fontVariantNumericBase,
576
+ {
577
+ ...entry,
578
+ "font-variant-numeric": "var(--un-font-variant-numeric)"
579
+ }
580
+ ];
510
581
  const fontVariantNumeric = [
511
- [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
512
- [/^slashed-zero$/, () => [fontVariantNumericBase, { "--un-slashed-zero": "slashed-zero" }]],
513
- [/^lining-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "lining-nums" }]],
514
- [/^oldstyle-nums$/, () => [fontVariantNumericBase, { "--un-numeric-figure": "oldstyle-nums" }]],
515
- [/^proportional-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "proportional-nums" }]],
516
- [/^tabular-nums$/, () => [fontVariantNumericBase, { "--un-numeric-spacing": "tabular-nums" }]],
517
- [/^diagonal-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "diagonal-fractions" }]],
518
- [/^stacked-fractions$/, () => [fontVariantNumericBase, { "--un-numeric-fraction": "stacked-fractions" }]],
582
+ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
583
+ [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
584
+ [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
585
+ [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
586
+ [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
587
+ [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
588
+ [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
589
+ [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
519
590
  ["normal-nums", { "font-variant-numeric": "normal" }]
520
591
  ];
521
592
 
@@ -524,7 +595,7 @@ const touchActionBase = {
524
595
  "--un-pan-y": varEmpty,
525
596
  "--un-pinch-zoom": varEmpty,
526
597
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
527
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
598
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
528
599
  };
529
600
  const touchActions = [
530
601
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -557,7 +628,7 @@ const scrolls = [
557
628
  [/^snap-(x|y|both)$/, ([, d]) => [
558
629
  {
559
630
  "--un-scroll-snap-strictness": "proximity",
560
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
631
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
561
632
  },
562
633
  {
563
634
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -575,19 +646,24 @@ const scrolls = [
575
646
  [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin")],
576
647
  [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")],
577
648
  [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
649
+ [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")],
650
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")],
578
651
  [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
579
652
  [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
580
- [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
653
+ [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")],
654
+ [/^scroll-p-(block|inline)-(-?.+)$/, directionSize("scroll-padding")],
655
+ [/^scroll-p-?([bi][se])-?(-?.+)$/, directionSize("scroll-padding")]
581
656
  ];
582
657
 
583
658
  const placeholders = [
584
- [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
585
- [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
659
+ [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder")],
660
+ [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent(opacity) })]
586
661
  ];
587
662
 
588
663
  const rules = [
589
664
  cssVariables$1,
590
665
  cssVariables,
666
+ cssProperty,
591
667
  container,
592
668
  screenReadersAccess,
593
669
  pointerEvents,
@@ -841,12 +917,12 @@ const variantSpaceAndDivide = (matcher) => {
841
917
  };
842
918
 
843
919
  const placeholderModifier = (input, { theme }) => {
844
- const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
920
+ const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
845
921
  if (m) {
846
922
  const [, pre = "", p, body] = m;
847
923
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
848
924
  return {
849
- matcher: `${pre}${p}$-placeholder-${body}`
925
+ matcher: `${pre}placeholder-$ ${p}${body}`
850
926
  };
851
927
  }
852
928
  }
@@ -857,7 +933,7 @@ function hasColorValue(body, theme) {
857
933
  function hasOpacityValue(body) {
858
934
  const match = body.match(/^op(?:acity)?-?(.+)$/);
859
935
  if (match && match[1] != null)
860
- return handler.bracket.percent.cssvar(match[1]) != null;
936
+ return handler.bracket.percent(match[1]) != null;
861
937
  return false;
862
938
  }
863
939
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-wind",
3
- "version": "0.21.2",
3
+ "version": "0.22.3",
4
4
  "description": "Tailwind / Windi CSS compact preset for UnoCSS",
5
5
  "keywords": [
6
6
  "unocss",
@@ -35,8 +35,8 @@
35
35
  "*.css"
36
36
  ],
37
37
  "dependencies": {
38
- "@unocss/core": "0.21.2",
39
- "@unocss/preset-mini": "0.21.2"
38
+ "@unocss/core": "0.22.3",
39
+ "@unocss/preset-mini": "0.22.3"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",