@unocss/preset-wind 0.21.1 → 0.22.2

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 +135 -60
  2. package/dist/index.mjs +138 -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,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,9 +255,8 @@ 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
262
  let v = utils.handler.bracket(str || "");
@@ -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");
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(s);
305
+ if (v != null) {
256
306
  return [
257
- b ? backdropFilterBase : filterBase,
258
- { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
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)],
316
+ [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
317
+ [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
318
+ [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.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.cssvar(opacity) })],
322
+ [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
323
+ [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
324
+ [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
279
325
  [/^(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)],
326
+ [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.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" }],
@@ -467,6 +527,9 @@ const divides = [
467
527
  [/^divide-?([xy])$/, handlerDivide],
468
528
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
469
529
  [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
530
+ [/^divide-(block|inline)$/, handlerDivide],
531
+ [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
532
+ [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
470
533
  [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
471
534
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
472
535
  ["divide-solid", { "border-style": "solid" }],
@@ -508,18 +571,25 @@ const fontVariantNumericBase = {
508
571
  "--un-numeric-figure": rules$1.varEmpty,
509
572
  "--un-numeric-spacing": rules$1.varEmpty,
510
573
  "--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]: ""
574
+ "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
575
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
513
576
  };
577
+ const toEntries = (entry) => [
578
+ fontVariantNumericBase,
579
+ {
580
+ ...entry,
581
+ "font-variant-numeric": "var(--un-font-variant-numeric)"
582
+ }
583
+ ];
514
584
  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" }]],
585
+ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
586
+ [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
587
+ [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
588
+ [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
589
+ [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
590
+ [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
591
+ [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
592
+ [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
523
593
  ["normal-nums", { "font-variant-numeric": "normal" }]
524
594
  ];
525
595
 
@@ -528,7 +598,7 @@ const touchActionBase = {
528
598
  "--un-pan-y": rules$1.varEmpty,
529
599
  "--un-pinch-zoom": rules$1.varEmpty,
530
600
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
531
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
601
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
532
602
  };
533
603
  const touchActions = [
534
604
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -561,7 +631,7 @@ const scrolls = [
561
631
  [/^snap-(x|y|both)$/, ([, d]) => [
562
632
  {
563
633
  "--un-scroll-snap-strictness": "proximity",
564
- [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
634
+ [core.CONTROL_SHORTCUT_NO_MERGE]: ""
565
635
  },
566
636
  {
567
637
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -579,19 +649,24 @@ const scrolls = [
579
649
  [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
580
650
  [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
581
651
  [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
652
+ [/^scroll-m-(block|inline)-(-?.+)$/, utils.directionSize("scroll-margin")],
653
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-margin")],
582
654
  [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
583
655
  [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
584
- [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
656
+ [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")],
657
+ [/^scroll-p-(block|inline)-(-?.+)$/, utils.directionSize("scroll-padding")],
658
+ [/^scroll-p-?([bi][se])-?(-?.+)$/, utils.directionSize("scroll-padding")]
585
659
  ];
586
660
 
587
661
  const placeholders = [
588
- [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
589
- [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
662
+ [/^\$ placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
663
+ [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
590
664
  ];
591
665
 
592
666
  const rules = [
593
667
  rules$1.cssVariables,
594
668
  cssVariables,
669
+ rules$1.cssProperty,
595
670
  container,
596
671
  screenReadersAccess,
597
672
  rules$1.pointerEvents,
@@ -850,7 +925,7 @@ const placeholderModifier = (input, { theme }) => {
850
925
  const [, pre = "", p, body] = m;
851
926
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
852
927
  return {
853
- matcher: `${pre}${p}$-placeholder-${body}`
928
+ matcher: `${pre}placeholder-$ ${p}${body}`
854
929
  };
855
930
  }
856
931
  }
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 = [
@@ -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,9 +251,8 @@ 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
258
  let v = handler.bracket(str || "");
@@ -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");
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(s);
301
+ if (v != null) {
252
302
  return [
253
- b ? backdropFilterBase : filterBase,
254
- { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
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)],
312
+ [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
313
+ [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
314
+ [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.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.cssvar(opacity) })],
318
+ [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
319
+ [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
320
+ [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
275
321
  [/^(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)],
322
+ [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.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" }],
@@ -463,6 +523,9 @@ const divides = [
463
523
  [/^divide-?([xy])$/, handlerDivide],
464
524
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
465
525
  [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
526
+ [/^divide-(block|inline)$/, handlerDivide],
527
+ [/^divide-(block|inline)-(-?.+)$/, handlerDivide],
528
+ [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
466
529
  [/^divide-(.+)$/, colorResolver("border-color", "divide")],
467
530
  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
468
531
  ["divide-solid", { "border-style": "solid" }],
@@ -504,18 +567,25 @@ const fontVariantNumericBase = {
504
567
  "--un-numeric-figure": varEmpty,
505
568
  "--un-numeric-spacing": varEmpty,
506
569
  "--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]: ""
570
+ "--un-font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
571
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
509
572
  };
573
+ const toEntries = (entry) => [
574
+ fontVariantNumericBase,
575
+ {
576
+ ...entry,
577
+ "font-variant-numeric": "var(--un-font-variant-numeric)"
578
+ }
579
+ ];
510
580
  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" }]],
581
+ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" })],
582
+ [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" })],
583
+ [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" })],
584
+ [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" })],
585
+ [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" })],
586
+ [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" })],
587
+ [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" })],
588
+ [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" })],
519
589
  ["normal-nums", { "font-variant-numeric": "normal" }]
520
590
  ];
521
591
 
@@ -524,7 +594,7 @@ const touchActionBase = {
524
594
  "--un-pan-y": varEmpty,
525
595
  "--un-pinch-zoom": varEmpty,
526
596
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
527
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
597
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
528
598
  };
529
599
  const touchActions = [
530
600
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -557,7 +627,7 @@ const scrolls = [
557
627
  [/^snap-(x|y|both)$/, ([, d]) => [
558
628
  {
559
629
  "--un-scroll-snap-strictness": "proximity",
560
- [CONTROL_BYPASS_PSEUDO_CLASS]: ""
630
+ [CONTROL_SHORTCUT_NO_MERGE]: ""
561
631
  },
562
632
  {
563
633
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -575,19 +645,24 @@ const scrolls = [
575
645
  [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin")],
576
646
  [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")],
577
647
  [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
648
+ [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")],
649
+ [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")],
578
650
  [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
579
651
  [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
580
- [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
652
+ [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")],
653
+ [/^scroll-p-(block|inline)-(-?.+)$/, directionSize("scroll-padding")],
654
+ [/^scroll-p-?([bi][se])-?(-?.+)$/, directionSize("scroll-padding")]
581
655
  ];
582
656
 
583
657
  const placeholders = [
584
- [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
585
- [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
658
+ [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder")],
659
+ [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
586
660
  ];
587
661
 
588
662
  const rules = [
589
663
  cssVariables$1,
590
664
  cssVariables,
665
+ cssProperty,
591
666
  container,
592
667
  screenReadersAccess,
593
668
  pointerEvents,
@@ -846,7 +921,7 @@ const placeholderModifier = (input, { theme }) => {
846
921
  const [, pre = "", p, body] = m;
847
922
  if (hasColorValue(body, theme) || hasOpacityValue(body)) {
848
923
  return {
849
- matcher: `${pre}${p}$-placeholder-${body}`
924
+ matcher: `${pre}placeholder-$ ${p}${body}`
850
925
  };
851
926
  }
852
927
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-wind",
3
- "version": "0.21.1",
3
+ "version": "0.22.2",
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.1",
39
- "@unocss/preset-mini": "0.21.1"
38
+ "@unocss/core": "0.22.2",
39
+ "@unocss/preset-mini": "0.22.2"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",