@unocss/preset-wind 0.21.0 → 0.22.1

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 +146 -60
  2. package/dist/index.mjs +149 -63
  3. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -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,21 +232,20 @@ 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,
220
238
  "--un-contrast": rules$1.varEmpty,
221
239
  "--un-drop-shadow": rules$1.varEmpty,
240
+ "--un-drop-shadow-colored": rules$1.varEmpty,
222
241
  "--un-grayscale": rules$1.varEmpty,
223
242
  "--un-hue-rotate": rules$1.varEmpty,
224
243
  "--un-invert": rules$1.varEmpty,
225
244
  "--un-saturate": rules$1.varEmpty,
226
245
  "--un-sepia": rules$1.varEmpty,
227
- "filter": filterContnet,
228
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
246
+ "--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)",
247
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
229
248
  };
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
249
  const backdropFilterBase = {
232
250
  "--un-backdrop-blur": rules$1.varEmpty,
233
251
  "--un-backdrop-brightness": rules$1.varEmpty,
@@ -238,9 +256,8 @@ const backdropFilterBase = {
238
256
  "--un-backdrop-opacity": rules$1.varEmpty,
239
257
  "--un-backdrop-saturate": rules$1.varEmpty,
240
258
  "--un-backdrop-sepia": rules$1.varEmpty,
241
- "-webkit-backdrop-filter": backdropFilterContent,
242
- "backdrop-filter": backdropFilterContent,
243
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
259
+ "--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)",
260
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
244
261
  };
245
262
  const percentWithDefault = (str) => {
246
263
  let v = utils.handler.bracket(str || "");
@@ -253,38 +270,89 @@ const percentWithDefault = (str) => {
253
270
  const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
254
271
  const value = resolver(s, theme);
255
272
  if (value != null && value !== "") {
273
+ if (b) {
274
+ return [
275
+ backdropFilterBase,
276
+ {
277
+ [`--un-${b}${varName}`]: `${varName}(${value})`,
278
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
279
+ "backdrop-filter": "var(--un-backdrop-filter)"
280
+ }
281
+ ];
282
+ } else {
283
+ return [
284
+ filterBase,
285
+ {
286
+ [`--un-${varName}`]: `${varName}(${value})`,
287
+ filter: "var(--un-filter)"
288
+ }
289
+ ];
290
+ }
291
+ }
292
+ };
293
+ const dropShadowResolver = ([, s], { theme }) => {
294
+ let v = theme.dropShadow?.[s || "DEFAULT"];
295
+ if (v != null) {
296
+ const shadow = core.toArray(v);
297
+ const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-drop-shadow-color)"));
298
+ return [
299
+ filterBase,
300
+ {
301
+ "--un-drop-shadow": `drop-shadow(${shadow.join(") drop-shadow(")})`,
302
+ "--un-drop-shadow-colored": `drop-shadow(${colored.join(") drop-shadow(")})`,
303
+ "filter": "var(--un-filter)"
304
+ }
305
+ ];
306
+ }
307
+ v = utils.handler.bracket(s);
308
+ if (v != null) {
256
309
  return [
257
- b ? backdropFilterBase : filterBase,
258
- { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
310
+ filterBase,
311
+ {
312
+ "--un-drop-shadow": `drop-shadow(${v})`,
313
+ "filter": "var(--un-filter)"
314
+ }
259
315
  ];
260
316
  }
261
317
  };
262
318
  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)],
319
+ [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
320
+ [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
321
+ [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
322
+ [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
323
+ [/^(?:filter-)?drop-shadow-color-(.+)$/, (m, ctx) => {
324
+ const color = utils.colorResolver("--un-drop-shadow-color", "drop-shadow")(m, ctx);
325
+ if (color) {
326
+ return {
327
+ ...color,
328
+ "--un-drop-shadow": "var(--un-drop-shadow-colored)"
329
+ };
330
+ }
331
+ }],
332
+ [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": utils.handler.bracket.percent.cssvar(opacity) })],
333
+ [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
334
+ [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
335
+ [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
279
336
  [/^(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)],
337
+ [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
338
+ [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
339
+ [/^filter$/, () => [
340
+ filterBase,
341
+ { filter: "var(--un-filter)" }
342
+ ]],
343
+ [/^backdrop-filter$/, () => [
344
+ backdropFilterBase,
345
+ {
346
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
347
+ "backdrop-filter": "var(--un-backdrop-filter)"
348
+ }
349
+ ]],
282
350
  ["filter-none", { filter: "none" }],
283
351
  ["backdrop-filter-none", {
284
352
  "-webkit-backdrop-filter": "none",
285
353
  "backdrop-filter": "none"
286
354
  }],
287
- [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
355
+ [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
288
356
  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
289
357
  "-webkit-backdrop-filter": `${s}(0)`,
290
358
  "backdrop-filter": `${s}(0)`
@@ -292,21 +360,24 @@ const filters = [
292
360
  ];
293
361
 
294
362
  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 })]
363
+ [/^space-?([xy])-?(-?.+)$/, handlerSpace],
364
+ [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
365
+ [/^space-(block|inline)-(-?.+)$/, handlerSpace],
366
+ [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
309
367
  ];
368
+ function handlerSpace(match) {
369
+ const [, direction] = match;
370
+ const results = utils.directionSize("margin")(match)?.map((item) => {
371
+ 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)))`;
372
+ return [item[0], value];
373
+ });
374
+ if (results) {
375
+ return [
376
+ [`--un-space-${direction}-reverse`, 0],
377
+ ...results
378
+ ];
379
+ }
380
+ }
310
381
 
311
382
  const textTransforms = [
312
383
  ["uppercase", { "text-transform": "uppercase" }],
@@ -467,6 +538,9 @@ const divides = [
467
538
  [/^divide-?([xy])$/, handlerDivide],
468
539
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
469
540
  [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
541
+ [/^divide-(block|inline)$/, handlerDivide],
542
+ [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
543
+ [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
470
544
  [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
471
545
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
472
546
  ["divide-solid", { "border-style": "solid" }],
@@ -508,18 +582,25 @@ const fontVariantNumericBase = {
508
582
  "--un-numeric-figure": rules$1.varEmpty,
509
583
  "--un-numeric-spacing": rules$1.varEmpty,
510
584
  "--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]: ""
585
+ "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
586
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
513
587
  };
588
+ const toEntries = (entry) => [
589
+ fontVariantNumericBase,
590
+ {
591
+ ...entry,
592
+ "font-variant-numeric": "var(--un-font-variant-numeric)"
593
+ }
594
+ ];
514
595
  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" }]],
596
+ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
597
+ [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
598
+ [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
599
+ [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
600
+ [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
601
+ [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
602
+ [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
603
+ [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
523
604
  ["normal-nums", { "font-variant-numeric": "normal" }]
524
605
  ];
525
606
 
@@ -528,7 +609,7 @@ const touchActionBase = {
528
609
  "--un-pan-y": rules$1.varEmpty,
529
610
  "--un-pinch-zoom": rules$1.varEmpty,
530
611
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
531
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
612
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
532
613
  };
533
614
  const touchActions = [
534
615
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -561,7 +642,7 @@ const scrolls = [
561
642
  [/^snap-(x|y|both)$/, ([, d]) => [
562
643
  {
563
644
  "--un-scroll-snap-strictness": "proximity",
564
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
645
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
565
646
  },
566
647
  {
567
648
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -579,19 +660,24 @@ const scrolls = [
579
660
  [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
580
661
  [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
581
662
  [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
663
+ [/^scroll-m-(block|inline)-(-?.+)$/, utils.directionSize("scroll-margin")],
664
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-margin")],
582
665
  [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
583
666
  [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
584
- [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
667
+ [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")],
668
+ [/^scroll-p-(block|inline)-(-?.+)$/, utils.directionSize("scroll-padding")],
669
+ [/^scroll-p-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-padding")]
585
670
  ];
586
671
 
587
672
  const placeholders = [
588
- [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
589
- [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
673
+ [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
674
+ [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
590
675
  ];
591
676
 
592
677
  const rules = [
593
678
  rules$1.cssVariables,
594
679
  cssVariables,
680
+ rules$1.cssProperty,
595
681
  container,
596
682
  screenReadersAccess,
597
683
  rules$1.pointerEvents,
@@ -850,7 +936,7 @@ const placeholderModifier = (input, { theme }) => {
850
936
  const [, pre = "", p, body] = m;
851
937
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
852
938
  return {
853
- matcher: `${pre}${p}$-placeholder-${body}`
939
+ matcher: `${pre}placeholder-$ ${p}${body}`
854
940
  };
855
941
  }
856
942
  }
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, 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 = [
@@ -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,21 +228,20 @@ 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,
216
234
  "--un-contrast": varEmpty,
217
235
  "--un-drop-shadow": varEmpty,
236
+ "--un-drop-shadow-colored": varEmpty,
218
237
  "--un-grayscale": varEmpty,
219
238
  "--un-hue-rotate": varEmpty,
220
239
  "--un-invert": varEmpty,
221
240
  "--un-saturate": varEmpty,
222
241
  "--un-sepia": varEmpty,
223
- "filter": filterContnet,
224
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
242
+ "--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)",
243
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
225
244
  };
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
245
  const backdropFilterBase = {
228
246
  "--un-backdrop-blur": varEmpty,
229
247
  "--un-backdrop-brightness": varEmpty,
@@ -234,9 +252,8 @@ const backdropFilterBase = {
234
252
  "--un-backdrop-opacity": varEmpty,
235
253
  "--un-backdrop-saturate": varEmpty,
236
254
  "--un-backdrop-sepia": varEmpty,
237
- "-webkit-backdrop-filter": backdropFilterContent,
238
- "backdrop-filter": backdropFilterContent,
239
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
255
+ "--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)",
256
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
240
257
  };
241
258
  const percentWithDefault = (str) => {
242
259
  let v = handler.bracket(str || "");
@@ -249,38 +266,89 @@ const percentWithDefault = (str) => {
249
266
  const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
250
267
  const value = resolver(s, theme);
251
268
  if (value != null && value !== "") {
269
+ if (b) {
270
+ return [
271
+ backdropFilterBase,
272
+ {
273
+ [`--un-${b}${varName}`]: `${varName}(${value})`,
274
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
275
+ "backdrop-filter": "var(--un-backdrop-filter)"
276
+ }
277
+ ];
278
+ } else {
279
+ return [
280
+ filterBase,
281
+ {
282
+ [`--un-${varName}`]: `${varName}(${value})`,
283
+ filter: "var(--un-filter)"
284
+ }
285
+ ];
286
+ }
287
+ }
288
+ };
289
+ const dropShadowResolver = ([, s], { theme }) => {
290
+ let v = theme.dropShadow?.[s || "DEFAULT"];
291
+ if (v != null) {
292
+ const shadow = toArray(v);
293
+ const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-drop-shadow-color)"));
294
+ return [
295
+ filterBase,
296
+ {
297
+ "--un-drop-shadow": `drop-shadow(${shadow.join(") drop-shadow(")})`,
298
+ "--un-drop-shadow-colored": `drop-shadow(${colored.join(") drop-shadow(")})`,
299
+ "filter": "var(--un-filter)"
300
+ }
301
+ ];
302
+ }
303
+ v = handler.bracket(s);
304
+ if (v != null) {
252
305
  return [
253
- b ? backdropFilterBase : filterBase,
254
- { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
306
+ filterBase,
307
+ {
308
+ "--un-drop-shadow": `drop-shadow(${v})`,
309
+ "filter": "var(--un-filter)"
310
+ }
255
311
  ];
256
312
  }
257
313
  };
258
314
  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)],
315
+ [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
316
+ [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
317
+ [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
318
+ [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver],
319
+ [/^(?:filter-)?drop-shadow-color-(.+)$/, (m, ctx) => {
320
+ const color = colorResolver("--un-drop-shadow-color", "drop-shadow")(m, ctx);
321
+ if (color) {
322
+ return {
323
+ ...color,
324
+ "--un-drop-shadow": "var(--un-drop-shadow-colored)"
325
+ };
326
+ }
327
+ }],
328
+ [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
329
+ [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
330
+ [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
331
+ [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
275
332
  [/^(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)],
333
+ [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
334
+ [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
335
+ [/^filter$/, () => [
336
+ filterBase,
337
+ { filter: "var(--un-filter)" }
338
+ ]],
339
+ [/^backdrop-filter$/, () => [
340
+ backdropFilterBase,
341
+ {
342
+ "-webkit-backdrop-filter": "var(--un-backdrop-filter)",
343
+ "backdrop-filter": "var(--un-backdrop-filter)"
344
+ }
345
+ ]],
278
346
  ["filter-none", { filter: "none" }],
279
347
  ["backdrop-filter-none", {
280
348
  "-webkit-backdrop-filter": "none",
281
349
  "backdrop-filter": "none"
282
350
  }],
283
- [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
351
+ [/^(?:filter-)?(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
284
352
  [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
285
353
  "-webkit-backdrop-filter": `${s}(0)`,
286
354
  "backdrop-filter": `${s}(0)`
@@ -288,21 +356,24 @@ const filters = [
288
356
  ];
289
357
 
290
358
  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 })]
359
+ [/^space-?([xy])-?(-?.+)$/, handlerSpace],
360
+ [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
361
+ [/^space-(block|inline)-(-?.+)$/, handlerSpace],
362
+ [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
305
363
  ];
364
+ function handlerSpace(match) {
365
+ const [, direction] = match;
366
+ const results = directionSize("margin")(match)?.map((item) => {
367
+ 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)))`;
368
+ return [item[0], value];
369
+ });
370
+ if (results) {
371
+ return [
372
+ [`--un-space-${direction}-reverse`, 0],
373
+ ...results
374
+ ];
375
+ }
376
+ }
306
377
 
307
378
  const textTransforms = [
308
379
  ["uppercase", { "text-transform": "uppercase" }],
@@ -463,6 +534,9 @@ const divides = [
463
534
  [/^divide-?([xy])$/, handlerDivide],
464
535
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
465
536
  [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
537
+ [/^divide-(block|inline)$/, handlerDivide],
538
+ [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
539
+ [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
466
540
  [/^divide-(.+)$/, colorResolver("border-color", "divide")],
467
541
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
468
542
  ["divide-solid", { "border-style": "solid" }],
@@ -504,18 +578,25 @@ const fontVariantNumericBase = {
504
578
  "--un-numeric-figure": varEmpty,
505
579
  "--un-numeric-spacing": varEmpty,
506
580
  "--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]: ""
581
+ "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
582
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
509
583
  };
584
+ const toEntries = (entry) => [
585
+ fontVariantNumericBase,
586
+ {
587
+ ...entry,
588
+ "font-variant-numeric": "var(--un-font-variant-numeric)"
589
+ }
590
+ ];
510
591
  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" }]],
592
+ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
593
+ [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
594
+ [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
595
+ [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
596
+ [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
597
+ [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
598
+ [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
599
+ [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
519
600
  ["normal-nums", { "font-variant-numeric": "normal" }]
520
601
  ];
521
602
 
@@ -524,7 +605,7 @@ const touchActionBase = {
524
605
  "--un-pan-y": varEmpty,
525
606
  "--un-pinch-zoom": varEmpty,
526
607
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
527
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
608
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
528
609
  };
529
610
  const touchActions = [
530
611
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -557,7 +638,7 @@ const scrolls = [
557
638
  [/^snap-(x|y|both)$/, ([, d]) => [
558
639
  {
559
640
  "--un-scroll-snap-strictness": "proximity",
560
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
641
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
561
642
  },
562
643
  {
563
644
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -575,19 +656,24 @@ const scrolls = [
575
656
  [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin")],
576
657
  [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")],
577
658
  [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
659
+ [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")],
660
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")],
578
661
  [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
579
662
  [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
580
- [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
663
+ [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")],
664
+ [/^scroll-p-(block|inline)-(-?.+)$/, directionSize("scroll-padding")],
665
+ [/^scroll-p-?([bi][se])-?(-?.+)$/, directionSize("scroll-padding")]
581
666
  ];
582
667
 
583
668
  const placeholders = [
584
- [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
585
- [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
669
+ [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder")],
670
+ [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
586
671
  ];
587
672
 
588
673
  const rules = [
589
674
  cssVariables$1,
590
675
  cssVariables,
676
+ cssProperty,
591
677
  container,
592
678
  screenReadersAccess,
593
679
  pointerEvents,
@@ -846,7 +932,7 @@ const placeholderModifier = (input, { theme }) => {
846
932
  const [, pre = "", p, body] = m;
847
933
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
848
934
  return {
849
- matcher: `${pre}${p}$-placeholder-${body}`
935
+ matcher: `${pre}placeholder-$ ${p}${body}`
850
936
  };
851
937
  }
852
938
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-wind",
3
- "version": "0.21.0",
3
+ "version": "0.22.1",
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.0",
39
- "@unocss/preset-mini": "0.21.0"
38
+ "@unocss/core": "0.22.1",
39
+ "@unocss/preset-mini": "0.22.1"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",