@unocss/preset-wind 0.22.0 → 0.22.4

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 +106 -57
  2. package/dist/index.mjs +107 -58
  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" }],
@@ -156,7 +175,7 @@ const scrollBehaviors = [
156
175
  ];
157
176
 
158
177
  const columns = [
159
- [/^columns-(.+)$/, ([, v]) => ({ column: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
178
+ [/^columns-(.+)$/, ([, v]) => ({ columns: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
160
179
  ["break-before-auto", { "break-before": "auto" }],
161
180
  ["break-before-avoid", { "break-before": "avoid" }],
162
181
  ["break-before-all", { "break-before": "all" }],
@@ -240,7 +259,7 @@ const backdropFilterBase = {
240
259
  [core.CONTROL_SHORTCUT_NO_MERGE]: ""
241
260
  };
242
261
  const percentWithDefault = (str) => {
243
- let v = utils.handler.bracket(str || "");
262
+ let v = utils.handler.bracket.cssvar(str || "");
244
263
  if (v != null)
245
264
  return v;
246
265
  v = str ? utils.handler.percent(str) : "1";
@@ -270,24 +289,42 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
270
289
  }
271
290
  }
272
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");
296
+ return [
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
+ }
312
+ ];
313
+ }
314
+ };
273
315
  const filters = [
274
- [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
275
- [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
276
- [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
277
- [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
278
- let v = theme.dropShadow?.[s || "DEFAULT"];
279
- if (v != null)
280
- return core.toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
281
- v = utils.handler.bracket(s);
282
- if (v != null)
283
- return `drop-shadow(${v})`;
284
- })],
285
- [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
286
- [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
287
- [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
288
- [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
289
- [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
290
- [/^(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)],
291
328
  [/^filter$/, () => [
292
329
  filterBase,
293
330
  { filter: "var(--un-filter)" }
@@ -304,7 +341,7 @@ const filters = [
304
341
  "-webkit-backdrop-filter": "none",
305
342
  "backdrop-filter": "none"
306
343
  }],
307
- [/^(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)` })],
308
345
  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
309
346
  "-webkit-backdrop-filter": `${s}(0)`,
310
347
  "backdrop-filter": `${s}(0)`
@@ -312,21 +349,24 @@ const filters = [
312
349
  ];
313
350
 
314
351
  const spaces = [
315
- [/^space-?([xy])-?(-?.+)$/, (match) => {
316
- const [, direction] = match;
317
- const results = utils.directionSize("margin")(match)?.map((item) => {
318
- 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)))`;
319
- return [item[0], value];
320
- });
321
- if (results) {
322
- return [
323
- [`--un-space-${direction}-reverse`, 0],
324
- ...results
325
- ];
326
- }
327
- }],
328
- [/^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 })]
329
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
+ }
330
370
 
331
371
  const textTransforms = [
332
372
  ["uppercase", { "text-transform": "uppercase" }],
@@ -462,31 +502,35 @@ const tables = [
462
502
  ];
463
503
 
464
504
  const variablesAbbrMap = {
465
- "write": "writing-mode",
466
- "write-orient": "text-orientation",
467
505
  "bg-blend": "background-blend-mode",
468
506
  "bg-clip": "-webkit-background-clip",
469
507
  "bg-gradient": "linear-gradient",
470
- "bg-origin-border": "background-origin",
508
+ "bg-image": "background-image",
509
+ "bg-origin": "background-origin",
471
510
  "bg-position": "background-position",
472
511
  "bg-repeat": "background-repeat",
473
512
  "bg-size": "background-size",
474
513
  "mix-blend": "mix-blend-mode",
475
- "animate-speed": "animation-speed"
514
+ "object": "object-fit",
515
+ "object-position": "object-position",
516
+ "write": "writing-mode",
517
+ "write-orient": "text-orientation"
476
518
  };
477
- const cssVariables = [[
478
- /^(.+)-\$(.+)$/,
479
- ([, name, varname]) => {
480
- const prop = variablesAbbrMap[name];
519
+ const cssVariables = [
520
+ [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
521
+ const prop = variablesAbbrMap[name.slice(0, -1)];
481
522
  if (prop)
482
523
  return { [prop]: `var(--${varname})` };
483
- }
484
- ]];
524
+ }]
525
+ ];
485
526
 
486
527
  const divides = [
487
528
  [/^divide-?([xy])$/, handlerDivide],
488
529
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
489
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 })],
490
534
  [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
491
535
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
492
536
  ["divide-solid", { "border-style": "solid" }],
@@ -496,7 +540,7 @@ const divides = [
496
540
  ["divide-none", { "border-style": "none" }]
497
541
  ];
498
542
  function handlerDivide([, d, s = "1"]) {
499
- const v = utils.handler.bracket.px(s);
543
+ const v = utils.handler.bracket.cssvar.px(s);
500
544
  if (v != null) {
501
545
  const results = utils.directionMap[d].map((item) => {
502
546
  const key = `border${item}-width`;
@@ -606,19 +650,24 @@ const scrolls = [
606
650
  [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
607
651
  [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
608
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")],
609
655
  [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
610
656
  [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
611
- [/^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")]
612
660
  ];
613
661
 
614
662
  const placeholders = [
615
- [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
616
- [/^\$-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) })]
617
665
  ];
618
666
 
619
667
  const rules = [
620
668
  rules$1.cssVariables,
621
669
  cssVariables,
670
+ rules$1.cssProperty,
622
671
  container,
623
672
  screenReadersAccess,
624
673
  rules$1.pointerEvents,
@@ -872,12 +921,12 @@ const variantSpaceAndDivide = (matcher) => {
872
921
  };
873
922
 
874
923
  const placeholderModifier = (input, { theme }) => {
875
- const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
924
+ const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
876
925
  if (m) {
877
926
  const [, pre = "", p, body] = m;
878
927
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
879
928
  return {
880
- matcher: `${pre}${p}$-placeholder-${body}`
929
+ matcher: `${pre}placeholder-$ ${p}${body}`
881
930
  };
882
931
  }
883
932
  }
@@ -888,7 +937,7 @@ function hasColorValue(body, theme) {
888
937
  function hasOpacityValue(body) {
889
938
  const match = body.match(/^op(?:acity)?-?(.+)$/);
890
939
  if (match && match[1] != null)
891
- return utils.handler.bracket.percent.cssvar(match[1]) != null;
940
+ return utils.handler.bracket.percent(match[1]) != null;
892
941
  return false;
893
942
  }
894
943
 
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@ import { variants } from '@unocss/preset-mini/variants';
2
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" }],
@@ -152,7 +171,7 @@ const scrollBehaviors = [
152
171
  ];
153
172
 
154
173
  const columns = [
155
- [/^columns-(.+)$/, ([, v]) => ({ column: handler.bracket.global.number.auto.numberWithUnit(v) })],
174
+ [/^columns-(.+)$/, ([, v]) => ({ columns: handler.bracket.global.number.auto.numberWithUnit(v) })],
156
175
  ["break-before-auto", { "break-before": "auto" }],
157
176
  ["break-before-avoid", { "break-before": "avoid" }],
158
177
  ["break-before-all", { "break-before": "all" }],
@@ -236,7 +255,7 @@ const backdropFilterBase = {
236
255
  [CONTROL_SHORTCUT_NO_MERGE]: ""
237
256
  };
238
257
  const percentWithDefault = (str) => {
239
- let v = handler.bracket(str || "");
258
+ let v = handler.bracket.cssvar(str || "");
240
259
  if (v != null)
241
260
  return v;
242
261
  v = str ? handler.percent(str) : "1";
@@ -266,24 +285,42 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
266
285
  }
267
286
  }
268
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");
292
+ return [
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
+ }
308
+ ];
309
+ }
310
+ };
269
311
  const filters = [
270
- [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
271
- [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
272
- [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
273
- [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
274
- let v = theme.dropShadow?.[s || "DEFAULT"];
275
- if (v != null)
276
- return toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
277
- v = handler.bracket(s);
278
- if (v != null)
279
- return `drop-shadow(${v})`;
280
- })],
281
- [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
282
- [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
283
- [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
284
- [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
285
- [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
286
- [/^(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)],
287
324
  [/^filter$/, () => [
288
325
  filterBase,
289
326
  { filter: "var(--un-filter)" }
@@ -300,7 +337,7 @@ const filters = [
300
337
  "-webkit-backdrop-filter": "none",
301
338
  "backdrop-filter": "none"
302
339
  }],
303
- [/^(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)` })],
304
341
  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
305
342
  "-webkit-backdrop-filter": `${s}(0)`,
306
343
  "backdrop-filter": `${s}(0)`
@@ -308,21 +345,24 @@ const filters = [
308
345
  ];
309
346
 
310
347
  const spaces = [
311
- [/^space-?([xy])-?(-?.+)$/, (match) => {
312
- const [, direction] = match;
313
- const results = directionSize("margin")(match)?.map((item) => {
314
- 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)))`;
315
- return [item[0], value];
316
- });
317
- if (results) {
318
- return [
319
- [`--un-space-${direction}-reverse`, 0],
320
- ...results
321
- ];
322
- }
323
- }],
324
- [/^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 })]
325
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
+ }
326
366
 
327
367
  const textTransforms = [
328
368
  ["uppercase", { "text-transform": "uppercase" }],
@@ -458,31 +498,35 @@ const tables = [
458
498
  ];
459
499
 
460
500
  const variablesAbbrMap = {
461
- "write": "writing-mode",
462
- "write-orient": "text-orientation",
463
501
  "bg-blend": "background-blend-mode",
464
502
  "bg-clip": "-webkit-background-clip",
465
503
  "bg-gradient": "linear-gradient",
466
- "bg-origin-border": "background-origin",
504
+ "bg-image": "background-image",
505
+ "bg-origin": "background-origin",
467
506
  "bg-position": "background-position",
468
507
  "bg-repeat": "background-repeat",
469
508
  "bg-size": "background-size",
470
509
  "mix-blend": "mix-blend-mode",
471
- "animate-speed": "animation-speed"
510
+ "object": "object-fit",
511
+ "object-position": "object-position",
512
+ "write": "writing-mode",
513
+ "write-orient": "text-orientation"
472
514
  };
473
- const cssVariables = [[
474
- /^(.+)-\$(.+)$/,
475
- ([, name, varname]) => {
476
- const prop = variablesAbbrMap[name];
515
+ const cssVariables = [
516
+ [/^([^$]+)(?<=-)\$(.+)$/, ([, name, varname]) => {
517
+ const prop = variablesAbbrMap[name.slice(0, -1)];
477
518
  if (prop)
478
519
  return { [prop]: `var(--${varname})` };
479
- }
480
- ]];
520
+ }]
521
+ ];
481
522
 
482
523
  const divides = [
483
524
  [/^divide-?([xy])$/, handlerDivide],
484
525
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
485
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 })],
486
530
  [/^divide-(.+)$/, colorResolver("border-color", "divide")],
487
531
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
488
532
  ["divide-solid", { "border-style": "solid" }],
@@ -492,7 +536,7 @@ const divides = [
492
536
  ["divide-none", { "border-style": "none" }]
493
537
  ];
494
538
  function handlerDivide([, d, s = "1"]) {
495
- const v = handler.bracket.px(s);
539
+ const v = handler.bracket.cssvar.px(s);
496
540
  if (v != null) {
497
541
  const results = directionMap[d].map((item) => {
498
542
  const key = `border${item}-width`;
@@ -602,19 +646,24 @@ const scrolls = [
602
646
  [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin")],
603
647
  [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")],
604
648
  [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
649
+ [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")],
650
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")],
605
651
  [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
606
652
  [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
607
- [/^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")]
608
656
  ];
609
657
 
610
658
  const placeholders = [
611
- [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
612
- [/^\$-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) })]
613
661
  ];
614
662
 
615
663
  const rules = [
616
664
  cssVariables$1,
617
665
  cssVariables,
666
+ cssProperty,
618
667
  container,
619
668
  screenReadersAccess,
620
669
  pointerEvents,
@@ -868,12 +917,12 @@ const variantSpaceAndDivide = (matcher) => {
868
917
  };
869
918
 
870
919
  const placeholderModifier = (input, { theme }) => {
871
- const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
920
+ const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
872
921
  if (m) {
873
922
  const [, pre = "", p, body] = m;
874
923
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
875
924
  return {
876
- matcher: `${pre}${p}$-placeholder-${body}`
925
+ matcher: `${pre}placeholder-$ ${p}${body}`
877
926
  };
878
927
  }
879
928
  }
@@ -884,7 +933,7 @@ function hasColorValue(body, theme) {
884
933
  function hasOpacityValue(body) {
885
934
  const match = body.match(/^op(?:acity)?-?(.+)$/);
886
935
  if (match && match[1] != null)
887
- return handler.bracket.percent.cssvar(match[1]) != null;
936
+ return handler.bracket.percent(match[1]) != null;
888
937
  return false;
889
938
  }
890
939
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-wind",
3
- "version": "0.22.0",
3
+ "version": "0.22.4",
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.22.0",
39
- "@unocss/preset-mini": "0.22.0"
38
+ "@unocss/core": "0.22.4",
39
+ "@unocss/preset-mini": "0.22.4"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",