@unocss/preset-wind 0.20.1 → 0.21.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 +177 -172
  2. package/dist/index.mjs +173 -168
  3. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -2,14 +2,20 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ const variants = require('@unocss/preset-mini/variants');
5
6
  const core = require('@unocss/core');
6
7
  const theme$1 = require('@unocss/preset-mini/theme');
7
8
  const presetMini = require('@unocss/preset-mini');
8
9
  const rules$1 = require('@unocss/preset-mini/rules');
9
10
  const utils = require('@unocss/preset-mini/utils');
10
- const variants$1 = require('@unocss/preset-mini/variants');
11
11
 
12
12
  const animations = [
13
+ [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
14
+ const kf = theme.animation?.keyframes?.[name];
15
+ if (kf)
16
+ return `@keyframes ${name}${kf}
17
+ ${constructCSS({ animation: `${name}` })}`;
18
+ }],
13
19
  [/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
14
20
  const kf = theme.animation?.keyframes?.[name];
15
21
  if (kf) {
@@ -20,15 +26,15 @@ const animations = [
20
26
  ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
21
27
  }
22
28
  }],
23
- [/^animate(?:-duration)?-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d.replace(/-duration/, "")) })],
24
- [/^animate-delay-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
29
+ [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d) })],
30
+ [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
25
31
  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
26
32
  ["animate-mode-none", { "animation-fill-mode": "none" }],
27
33
  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
28
34
  [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
29
35
  ["animate-normal", { "animation-direction": "normal" }],
30
36
  ["animate-direction-normal", { "animation-direction": "normal" }],
31
- [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": d.replace(/\-/g, ", ") })],
37
+ [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": utils.handler.bracket(d) ?? d.replace(/\-/g, ",") })],
32
38
  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
33
39
  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
34
40
  ["animate-none", { animation: "none" }]
@@ -38,18 +44,15 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
38
44
  const data = utils.parseColor(body, theme);
39
45
  if (!data)
40
46
  return;
41
- const { opacity, color, rgba } = data;
47
+ const { alpha, color, rgba } = data;
42
48
  if (!color)
43
49
  return;
44
50
  let colorString = color;
45
51
  if (rgba) {
46
- const a = opacity ? opacity[0] === "[" ? utils.handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba[3];
47
- if (a != null && !Number.isNaN(a)) {
48
- rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
52
+ if (alpha != null)
49
53
  colorString = `rgba(${rgba.join(",")})`;
50
- } else {
51
- colorString = `rgba(${rgba.slice(0, 3).join(",")}, var(--un-${mode}-opacity, 1))`;
52
- }
54
+ else
55
+ colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
53
56
  }
54
57
  switch (mode) {
55
58
  case "from":
@@ -67,107 +70,64 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
67
70
  };
68
71
  }
69
72
  };
70
- const bgGradientDirections = {
71
- t: "top",
72
- tr: "top right",
73
- r: "right",
74
- br: "bottom right",
75
- b: "bottom",
76
- bl: "bottom left",
77
- l: "left",
78
- tl: "top left"
79
- };
80
73
  const backgroundStyles = [
81
- ["bg-fixed", { "background-attachment": "fixed" }],
82
- ["bg-local", { "background-attachment": "local" }],
83
- ["bg-scroll", { "background-attachment": "scroll" }],
84
- ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
85
- ["bg-blend-screen", { "background-blend-mode": "screen" }],
86
- ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
87
- ["bg-blend-darken", { "background-blend-mode": "darken" }],
88
- ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
89
- ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
90
- ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
91
- ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
92
- ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
93
- ["bg-blend-difference", { "background-blend-mode": "difference" }],
94
- ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
95
- ["bg-blend-hue", { "background-blend-mode": "hue" }],
96
- ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
97
- ["bg-blend-color", { "background-blend-mode": "color" }],
98
- ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
99
- ["bg-blend-normal", { "background-blend-mode": "normal" }],
100
- ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
101
- ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
102
- ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
103
- ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
104
74
  [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
105
75
  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
106
76
  [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
107
77
  [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
108
78
  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
109
79
  [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
110
- [/^bg-gradient-to-([trbl]{1,2})$/, ([, d]) => {
111
- const v = bgGradientDirections[d];
112
- if (v)
113
- return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
80
+ [/^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))` };
114
83
  }],
115
84
  ["bg-none", { "background-image": "none" }],
116
- ["bg-origin-border", { "background-origin": "border-box" }],
117
- ["bg-origin-padding", { "background-origin": "padding-box" }],
118
- ["bg-origin-content", { "background-origin": "content-box" }],
119
- ["bg-bottom", { "background-position": "bottom" }],
120
- ["bg-center", { "background-position": "center" }],
121
- ["bg-left", { "background-position": "left" }],
122
- ["bg-left-bottom", { "background-position": "left bottom" }],
123
- ["bg-left-top", { "background-position": "left top" }],
124
- ["bg-right", { "background-position": "right" }],
125
- ["bg-right-bottom", { "background-position": "right bottom" }],
126
- ["bg-right-top", { "background-position": "right top" }],
127
- ["bg-top", { "background-position": "top" }],
85
+ ["box-decoration-slice", { "box-decoration-break": "slice" }],
86
+ ["box-decoration-clone", { "box-decoration-break": "clone" }],
87
+ ["bg-auto", { "background-size": "auto" }],
88
+ ["bg-cover", { "background-size": "cover" }],
89
+ ["bg-contain", { "background-size": "contain" }],
90
+ ["bg-fixed", { "background-attachment": "fixed" }],
91
+ ["bg-local", { "background-attachment": "local" }],
92
+ ["bg-scroll", { "background-attachment": "scroll" }],
93
+ ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
94
+ ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
95
+ ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
96
+ ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
97
+ [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": utils.positionMap[s] })],
128
98
  ["bg-repeat", { "background-repeat": "repeat" }],
129
99
  ["bg-no-repeat", { "background-repeat": "no-repeat" }],
130
100
  ["bg-repeat-x", { "background-position": "repeat-x" }],
131
101
  ["bg-repeat-y", { "background-position": "repeat-y" }],
132
102
  ["bg-repeat-round", { "background-position": "round" }],
133
103
  ["bg-repeat-space", { "background-position": "space" }],
134
- ["bg-auto", { "background-size": "auto" }],
135
- ["bg-cover", { "background-size": "cover" }],
136
- ["bg-contain", { "background-size": "contain" }]
104
+ ["bg-origin-border", { "background-origin": "border-box" }],
105
+ ["bg-origin-padding", { "background-origin": "padding-box" }],
106
+ ["bg-origin-content", { "background-origin": "content-box" }]
137
107
  ];
138
108
 
139
- const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
140
109
  const listStyle = [
141
- [new RegExp(`^list-((?:${listStyleProps.join("|")})(?:-outside|-inside)?)$`), ([, value]) => {
142
- const style = value.split(/-outside|-inside/)[0];
143
- const position = /outside|inside/.exec(value) ?? [];
144
- if (position.length) {
110
+ [/^list-(disc|circle|square|decimal|zero-decimal|greek|roman|upper-roman|alpha|upper-alpha)(?:-(outside|inside))?$/, ([, style, position]) => {
111
+ if (position != null) {
145
112
  return {
146
- "list-style-position": `${position[0]}`,
113
+ "list-style-position": position,
147
114
  "list-style-type": style
148
115
  };
149
116
  }
150
117
  return { "list-style-type": style };
151
118
  }],
152
- [/^list-(outside|inside)$/, ([, value]) => ({ "list-style-position": value })],
119
+ ["list-outside", { "list-style-position": "outside" }],
120
+ ["list-inside", { "list-style-position": "inside" }],
153
121
  ["list-none", { "list-style-type": "none" }]
154
122
  ];
155
- const boxDecorationBreaks = [
156
- ["decoration-slice", { "box-decoration-break": "slice" }],
157
- ["decoration-clone", { "box-decoration-break": "clone" }]
158
- ];
159
- const accentOpacity = [
123
+ const accents = [
124
+ [/^accent-(.+)$/, utils.colorResolver("accent-color", "accent")],
160
125
  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.handler.bracket.percent(d) })]
161
126
  ];
162
- const accentColors = [
163
- [/^accent-(.+)$/, utils.colorResolver("accent-color", "accent")]
164
- ];
165
- const caretOpacity = [
127
+ const carets = [
128
+ [/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")],
166
129
  [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.handler.bracket.percent(d) })]
167
130
  ];
168
- const caretColors = [
169
- [/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")]
170
- ];
171
131
  const imageRenderings = [
172
132
  ["image-render-auto", { "image-rendering": "auto" }],
173
133
  ["image-render-edge", { "image-rendering": "crisp-edges" }],
@@ -179,18 +139,15 @@ const imageRenderings = [
179
139
  ["image-rendering", "pixelated"]
180
140
  ]]
181
141
  ];
182
- const overflowValues = [
183
- "auto",
184
- "hidden",
185
- "visible",
186
- "scroll",
187
- "contain"
188
- ];
189
142
  const overscrolls = [
190
- [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
143
+ ["overscroll-auto", { "overscroll-behavior": "auto" }],
144
+ ["overscroll-contain", { "overscroll-behavior": "contain" }],
191
145
  ["overscroll-none", { "overscroll-behavior": "none" }],
192
- [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0],
146
+ ["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
147
+ ["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
193
148
  ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
149
+ ["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
150
+ ["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
194
151
  ["overscroll-y-none", { "overscroll-behavior-y": "none" }]
195
152
  ];
196
153
  const scrollBehaviors = [
@@ -256,21 +213,21 @@ const containerShortcuts = [
256
213
  }]
257
214
  ];
258
215
 
259
- const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) var(--un-drop-shadow)";
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)";
260
217
  const filterBase = {
261
218
  "--un-blur": rules$1.varEmpty,
262
219
  "--un-brightness": rules$1.varEmpty,
263
220
  "--un-contrast": rules$1.varEmpty,
221
+ "--un-drop-shadow": rules$1.varEmpty,
264
222
  "--un-grayscale": rules$1.varEmpty,
265
223
  "--un-hue-rotate": rules$1.varEmpty,
266
224
  "--un-invert": rules$1.varEmpty,
267
225
  "--un-saturate": rules$1.varEmpty,
268
226
  "--un-sepia": rules$1.varEmpty,
269
- "--un-drop-shadow": rules$1.varEmpty,
270
227
  "filter": filterContnet,
271
- [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
228
+ [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
272
229
  };
273
- 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-saturate) var(--un-backdrop-sepia)";
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)";
274
231
  const backdropFilterBase = {
275
232
  "--un-backdrop-blur": rules$1.varEmpty,
276
233
  "--un-backdrop-brightness": rules$1.varEmpty,
@@ -278,19 +235,24 @@ const backdropFilterBase = {
278
235
  "--un-backdrop-grayscale": rules$1.varEmpty,
279
236
  "--un-backdrop-hue-rotate": rules$1.varEmpty,
280
237
  "--un-backdrop-invert": rules$1.varEmpty,
238
+ "--un-backdrop-opacity": rules$1.varEmpty,
281
239
  "--un-backdrop-saturate": rules$1.varEmpty,
282
240
  "--un-backdrop-sepia": rules$1.varEmpty,
283
241
  "-webkit-backdrop-filter": backdropFilterContent,
284
242
  "backdrop-filter": backdropFilterContent,
285
- [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
243
+ [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
286
244
  };
287
- const percentWithDefault = (defaultValue = "1") => (str) => {
288
- const v = str ? utils.handler.bracket.percent(str) : defaultValue;
289
- return v && parseFloat(v) <= 1 ? v : void 0;
245
+ const percentWithDefault = (str) => {
246
+ let v = utils.handler.bracket(str || "");
247
+ if (v != null)
248
+ return v;
249
+ v = str ? utils.handler.percent(str) : "1";
250
+ if (v != null && parseFloat(v) <= 1)
251
+ return v;
290
252
  };
291
253
  const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
292
254
  const value = resolver(s, theme);
293
- if (value) {
255
+ if (value != null && value !== "") {
294
256
  return [
295
257
  b ? backdropFilterBase : filterBase,
296
258
  { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
@@ -301,49 +263,37 @@ const filters = [
301
263
  ["filter", filterBase],
302
264
  ["backdrop-filter", backdropFilterBase],
303
265
  [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
304
- [/^(backdrop-)?brightness-(\d+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
305
- [/^(backdrop-)?contrast-(\d+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
266
+ [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
267
+ [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
306
268
  [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
307
- const v = utils.handler.bracket(s) || theme.dropShadow?.[s || "DEFAULT"];
308
- if (v)
269
+ let v = theme.dropShadow?.[s || "DEFAULT"];
270
+ if (v != null)
309
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})`;
310
275
  })],
311
- [/^(backdrop-)?grayscale(?:-(\d+))?$/, toFilter("grayscale", percentWithDefault())],
312
- [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${utils.handler.bracket.number(s)}deg`)],
313
- [/^(backdrop-)?invert(?:-(\d+))?$/, toFilter("invert", percentWithDefault())],
314
- [/^(backdrop-)?saturate(?:-(\d+))?$/, toFilter("saturate", percentWithDefault("0"))],
315
- [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())],
276
+ [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
277
+ [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => utils.handler.bracket.degree(s))],
278
+ [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
279
+ [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => utils.handler.bracket.percent(s))],
280
+ [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => utils.handler.bracket.percent(s))],
281
+ [/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
316
282
  ["filter-none", { filter: "none" }],
317
283
  ["backdrop-filter-none", {
318
284
  "-webkit-backdrop-filter": "none",
319
285
  "backdrop-filter": "none"
320
- }]
321
- ];
322
-
323
- const mixBlendModes = [
324
- ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
325
- ["mix-blend-screen", { "mix-blend-mode": "screen" }],
326
- ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
327
- ["mix-blend-darken", { "mix-blend-mode": "darken" }],
328
- ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
329
- ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
330
- ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
331
- ["mix-blend-color-light", { "mix-blend-mode": "color-light" }],
332
- ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
333
- ["mix-blend-difference", { "mix-blend-mode": "difference" }],
334
- ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
335
- ["mix-blend-hue", { "mix-blend-mode": "hue" }],
336
- ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
337
- ["mix-blend-color", { "mix-blend-mode": "color" }],
338
- ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
339
- ["mix-blend-normal", { "mix-blend-mode": "normal" }]
286
+ }],
287
+ [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
288
+ [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
289
+ "-webkit-backdrop-filter": `${s}(0)`,
290
+ "backdrop-filter": `${s}(0)`
291
+ })]
340
292
  ];
341
293
 
342
294
  const spaces = [
343
295
  [/^space-?([xy])-?(-?.+)$/, (match) => {
344
- const [, direction, size] = match;
345
- if (size === "reverse")
346
- return { [`--un-space-${direction}-reverse`]: 1 };
296
+ const [, direction] = match;
347
297
  const results = utils.directionSize("margin")(match)?.map((item) => {
348
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)))`;
349
299
  return [item[0], value];
@@ -354,7 +304,8 @@ const spaces = [
354
304
  ...results
355
305
  ];
356
306
  }
357
- }]
307
+ }],
308
+ [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
358
309
  ];
359
310
 
360
311
  const textTransforms = [
@@ -421,7 +372,8 @@ const screenReadersAccess = [
421
372
  ];
422
373
  const isolations = [
423
374
  ["isolate", { isolation: "isolate" }],
424
- ["isolate-auto", { isolation: "auto" }]
375
+ ["isolate-auto", { isolation: "auto" }],
376
+ ["isolation-auto", { isolation: "auto" }]
425
377
  ];
426
378
  const objectPositions = [
427
379
  ["object-cover", { "object-fit": "cover" }],
@@ -429,17 +381,43 @@ const objectPositions = [
429
381
  ["object-fill", { "object-fit": "fill" }],
430
382
  ["object-scale-down", { "object-fit": "scale-down" }],
431
383
  ["object-none", { "object-fit": "none" }],
432
- ["object-center", { "object-position": "center" }],
433
- ["object-bottom", { "object-position": "bottom" }],
434
- ["object-top", { "object-position": "top" }],
435
- ["object-right", { "object-position": "right" }],
436
- ["object-left", { "object-position": "left" }],
437
- ["object-lb", { "object-position": "left bottom" }],
438
- ["object-lt", { "object-position": "left top" }],
439
- ["object-rb", { "object-position": "right bottom" }],
440
- ["object-rt", { "object-position": "right top" }],
441
- ["object-cb", { "object-position": "center bottom" }],
442
- ["object-ct", { "object-position": "center top" }]
384
+ [/^object-([-\w]+)$/, ([, s]) => ({ "object-position": utils.positionMap[s] })]
385
+ ];
386
+ const backgroundBlendModes = [
387
+ ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
388
+ ["bg-blend-screen", { "background-blend-mode": "screen" }],
389
+ ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
390
+ ["bg-blend-darken", { "background-blend-mode": "darken" }],
391
+ ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
392
+ ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
393
+ ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
394
+ ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
395
+ ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
396
+ ["bg-blend-difference", { "background-blend-mode": "difference" }],
397
+ ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
398
+ ["bg-blend-hue", { "background-blend-mode": "hue" }],
399
+ ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
400
+ ["bg-blend-color", { "background-blend-mode": "color" }],
401
+ ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
402
+ ["bg-blend-normal", { "background-blend-mode": "normal" }]
403
+ ];
404
+ const mixBlendModes = [
405
+ ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
406
+ ["mix-blend-screen", { "mix-blend-mode": "screen" }],
407
+ ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
408
+ ["mix-blend-darken", { "mix-blend-mode": "darken" }],
409
+ ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
410
+ ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
411
+ ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
412
+ ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
413
+ ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
414
+ ["mix-blend-difference", { "mix-blend-mode": "difference" }],
415
+ ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
416
+ ["mix-blend-hue", { "mix-blend-mode": "hue" }],
417
+ ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
418
+ ["mix-blend-color", { "mix-blend-mode": "color" }],
419
+ ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
420
+ ["mix-blend-normal", { "mix-blend-mode": "normal" }]
443
421
  ];
444
422
 
445
423
  const tables = [
@@ -485,25 +463,19 @@ const cssVariables = [[
485
463
  }
486
464
  ]];
487
465
 
488
- const divideColors = [
489
- [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
490
- [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })]
491
- ];
492
- const divideSizes = [
466
+ const divides = [
493
467
  [/^divide-?([xy])$/, handlerDivide],
494
468
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
495
- [/^divide-?([xy])-reverse$/, ([, d]) => [[`--un-divide-${d}-reverse`, 1]]]
496
- ];
497
- const divideStyles = [
469
+ [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
470
+ [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
471
+ [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })],
498
472
  ["divide-solid", { "border-style": "solid" }],
499
473
  ["divide-dashed", { "border-style": "dashed" }],
500
474
  ["divide-dotted", { "border-style": "dotted" }],
501
475
  ["divide-double", { "border-style": "double" }],
502
476
  ["divide-none", { "border-style": "none" }]
503
477
  ];
504
- const divides = [divideSizes, divideColors, divideStyles].flat(1);
505
- function handlerDivide([, a, b]) {
506
- const [d, s = "1"] = utils.directionMap[a] ? [a, b] : ["", a];
478
+ function handlerDivide([, d, s = "1"]) {
507
479
  const v = utils.handler.bracket.px(s);
508
480
  if (v != null) {
509
481
  const results = utils.directionMap[d].map((item) => {
@@ -537,7 +509,7 @@ const fontVariantNumericBase = {
537
509
  "--un-numeric-spacing": rules$1.varEmpty,
538
510
  "--un-numeric-fraction": rules$1.varEmpty,
539
511
  "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
540
- [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
512
+ [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
541
513
  };
542
514
  const fontVariantNumeric = [
543
515
  [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -556,7 +528,7 @@ const touchActionBase = {
556
528
  "--un-pan-y": rules$1.varEmpty,
557
529
  "--un-pinch-zoom": rules$1.varEmpty,
558
530
  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
559
- [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
531
+ [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
560
532
  };
561
533
  const touchActions = [
562
534
  [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -586,10 +558,10 @@ const touchActions = [
586
558
  ];
587
559
 
588
560
  const scrolls = [
589
- [/^snap-(x|y|base)$/, ([, d]) => [
561
+ [/^snap-(x|y|both)$/, ([, d]) => [
590
562
  {
591
563
  "--un-scroll-snap-strictness": "proximity",
592
- [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
564
+ [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
593
565
  },
594
566
  {
595
567
  "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -612,6 +584,11 @@ const scrolls = [
612
584
  [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
613
585
  ];
614
586
 
587
+ const placeholders = [
588
+ [/^\$-placeholder-(.+)$/, utils.colorResolver("color", "placeholder")],
589
+ [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": utils.handler.bracket.percent.cssvar(opacity) })]
590
+ ];
591
+
615
592
  const rules = [
616
593
  rules$1.cssVariables,
617
594
  cssVariables,
@@ -658,7 +635,6 @@ const rules = [
658
635
  rules$1.breaks,
659
636
  rules$1.borders,
660
637
  rules$1.bgColors,
661
- boxDecorationBreaks,
662
638
  backgroundStyles,
663
639
  rules$1.svgUtilities,
664
640
  objectPositions,
@@ -679,11 +655,10 @@ const rules = [
679
655
  hyphens,
680
656
  writingModes,
681
657
  writingOrientations,
682
- caretColors,
683
- caretOpacity,
684
- accentColors,
685
- accentOpacity,
658
+ carets,
659
+ accents,
686
660
  rules$1.opacity,
661
+ backgroundBlendModes,
687
662
  mixBlendModes,
688
663
  rules$1.boxShadows,
689
664
  rules$1.outline,
@@ -693,6 +668,7 @@ const rules = [
693
668
  rules$1.transitions,
694
669
  rules$1.willChange,
695
670
  rules$1.contents,
671
+ placeholders,
696
672
  rules$1.questionMark
697
673
  ].flat(1);
698
674
 
@@ -857,13 +833,37 @@ const variantColorsScheme = [
857
833
  utils.variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
858
834
  ];
859
835
 
860
- const variantFilePseudoElement = utils.variantMatcher("file", (input) => `${input}::file-selector-button`);
836
+ const variantSpaceAndDivide = (matcher) => {
837
+ if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
838
+ return {
839
+ matcher,
840
+ selector: (input) => {
841
+ return `${input}>:not([hidden])~:not([hidden])`;
842
+ }
843
+ };
844
+ }
845
+ };
861
846
 
862
- const variants = [
863
- ...variants$1.variants,
864
- variantFilePseudoElement,
865
- ...variantColorsScheme
866
- ];
847
+ const placeholderModifier = (input, { theme }) => {
848
+ const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
849
+ if (m) {
850
+ const [, pre = "", p, body] = m;
851
+ if (hasColorValue(body, theme) || hasOpacityValue(body)) {
852
+ return {
853
+ matcher: `${pre}${p}$-placeholder-${body}`
854
+ };
855
+ }
856
+ }
857
+ };
858
+ function hasColorValue(body, theme) {
859
+ return !!utils.parseColor(body, theme)?.color;
860
+ }
861
+ function hasOpacityValue(body) {
862
+ const match = body.match(/^op(?:acity)?-?(.+)$/);
863
+ if (match && match[1] != null)
864
+ return utils.handler.bracket.percent.cssvar(match[1]) != null;
865
+ return false;
866
+ }
867
867
 
868
868
  const presetWind = (options = {}) => {
869
869
  options.dark = options.dark ?? "class";
@@ -875,7 +875,12 @@ const presetWind = (options = {}) => {
875
875
  shortcuts: [
876
876
  ...containerShortcuts
877
877
  ],
878
- variants,
878
+ variants: [
879
+ placeholderModifier,
880
+ variantSpaceAndDivide,
881
+ ...variants.variants(options),
882
+ ...variantColorsScheme
883
+ ],
879
884
  options
880
885
  };
881
886
  };
package/dist/index.mjs CHANGED
@@ -1,11 +1,17 @@
1
+ import { CONTROL_BYPASS_PSEUDO_CLASS, variants } from '@unocss/preset-mini/variants';
1
2
  import { toArray } from '@unocss/core';
2
3
  import { theme as theme$1 } from '@unocss/preset-mini/theme';
3
4
  export { colors } from '@unocss/preset-mini';
4
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 { handler, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
6
- import { CONTROL_BYPASS_PSEUDO_CLASS, variants as variants$1 } from '@unocss/preset-mini/variants';
6
+ import { handler, positionMap, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
7
7
 
8
8
  const animations = [
9
+ [/^keyframes-(.+)$/, ([, name], { theme, constructCSS }) => {
10
+ const kf = theme.animation?.keyframes?.[name];
11
+ if (kf)
12
+ return `@keyframes ${name}${kf}
13
+ ${constructCSS({ animation: `${name}` })}`;
14
+ }],
9
15
  [/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
10
16
  const kf = theme.animation?.keyframes?.[name];
11
17
  if (kf) {
@@ -16,15 +22,15 @@ const animations = [
16
22
  ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
17
23
  }
18
24
  }],
19
- [/^animate(?:-duration)?-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d.replace(/-duration/, "")) })],
20
- [/^animate-delay-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
25
+ [/^animate-(?:duration-)?(.+)$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d) })],
26
+ [/^animate-delay-(.+)$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
21
27
  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
22
28
  ["animate-mode-none", { "animation-fill-mode": "none" }],
23
29
  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
24
30
  [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
25
31
  ["animate-normal", { "animation-direction": "normal" }],
26
32
  ["animate-direction-normal", { "animation-direction": "normal" }],
27
- [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": d.replace(/\-/g, ", ") })],
33
+ [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": handler.bracket(d) ?? d.replace(/\-/g, ",") })],
28
34
  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
29
35
  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
30
36
  ["animate-none", { animation: "none" }]
@@ -34,18 +40,15 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
34
40
  const data = parseColor(body, theme);
35
41
  if (!data)
36
42
  return;
37
- const { opacity, color, rgba } = data;
43
+ const { alpha, color, rgba } = data;
38
44
  if (!color)
39
45
  return;
40
46
  let colorString = color;
41
47
  if (rgba) {
42
- const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba[3];
43
- if (a != null && !Number.isNaN(a)) {
44
- rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
48
+ if (alpha != null)
45
49
  colorString = `rgba(${rgba.join(",")})`;
46
- } else {
47
- colorString = `rgba(${rgba.slice(0, 3).join(",")}, var(--un-${mode}-opacity, 1))`;
48
- }
50
+ else
51
+ colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
49
52
  }
50
53
  switch (mode) {
51
54
  case "from":
@@ -63,107 +66,64 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
63
66
  };
64
67
  }
65
68
  };
66
- const bgGradientDirections = {
67
- t: "top",
68
- tr: "top right",
69
- r: "right",
70
- br: "bottom right",
71
- b: "bottom",
72
- bl: "bottom left",
73
- l: "left",
74
- tl: "top left"
75
- };
76
69
  const backgroundStyles = [
77
- ["bg-fixed", { "background-attachment": "fixed" }],
78
- ["bg-local", { "background-attachment": "local" }],
79
- ["bg-scroll", { "background-attachment": "scroll" }],
80
- ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
81
- ["bg-blend-screen", { "background-blend-mode": "screen" }],
82
- ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
83
- ["bg-blend-darken", { "background-blend-mode": "darken" }],
84
- ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
85
- ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
86
- ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
87
- ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
88
- ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
89
- ["bg-blend-difference", { "background-blend-mode": "difference" }],
90
- ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
91
- ["bg-blend-hue", { "background-blend-mode": "hue" }],
92
- ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
93
- ["bg-blend-color", { "background-blend-mode": "color" }],
94
- ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
95
- ["bg-blend-normal", { "background-blend-mode": "normal" }],
96
- ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
97
- ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
98
- ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
99
- ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
100
70
  [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
101
71
  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
102
72
  [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
103
73
  [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
104
74
  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
105
75
  [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
106
- [/^bg-gradient-to-([trbl]{1,2})$/, ([, d]) => {
107
- const v = bgGradientDirections[d];
108
- if (v)
109
- return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
76
+ [/^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))` };
110
79
  }],
111
80
  ["bg-none", { "background-image": "none" }],
112
- ["bg-origin-border", { "background-origin": "border-box" }],
113
- ["bg-origin-padding", { "background-origin": "padding-box" }],
114
- ["bg-origin-content", { "background-origin": "content-box" }],
115
- ["bg-bottom", { "background-position": "bottom" }],
116
- ["bg-center", { "background-position": "center" }],
117
- ["bg-left", { "background-position": "left" }],
118
- ["bg-left-bottom", { "background-position": "left bottom" }],
119
- ["bg-left-top", { "background-position": "left top" }],
120
- ["bg-right", { "background-position": "right" }],
121
- ["bg-right-bottom", { "background-position": "right bottom" }],
122
- ["bg-right-top", { "background-position": "right top" }],
123
- ["bg-top", { "background-position": "top" }],
81
+ ["box-decoration-slice", { "box-decoration-break": "slice" }],
82
+ ["box-decoration-clone", { "box-decoration-break": "clone" }],
83
+ ["bg-auto", { "background-size": "auto" }],
84
+ ["bg-cover", { "background-size": "cover" }],
85
+ ["bg-contain", { "background-size": "contain" }],
86
+ ["bg-fixed", { "background-attachment": "fixed" }],
87
+ ["bg-local", { "background-attachment": "local" }],
88
+ ["bg-scroll", { "background-attachment": "scroll" }],
89
+ ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
90
+ ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
91
+ ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
92
+ ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
93
+ [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })],
124
94
  ["bg-repeat", { "background-repeat": "repeat" }],
125
95
  ["bg-no-repeat", { "background-repeat": "no-repeat" }],
126
96
  ["bg-repeat-x", { "background-position": "repeat-x" }],
127
97
  ["bg-repeat-y", { "background-position": "repeat-y" }],
128
98
  ["bg-repeat-round", { "background-position": "round" }],
129
99
  ["bg-repeat-space", { "background-position": "space" }],
130
- ["bg-auto", { "background-size": "auto" }],
131
- ["bg-cover", { "background-size": "cover" }],
132
- ["bg-contain", { "background-size": "contain" }]
100
+ ["bg-origin-border", { "background-origin": "border-box" }],
101
+ ["bg-origin-padding", { "background-origin": "padding-box" }],
102
+ ["bg-origin-content", { "background-origin": "content-box" }]
133
103
  ];
134
104
 
135
- const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
136
105
  const listStyle = [
137
- [new RegExp(`^list-((?:${listStyleProps.join("|")})(?:-outside|-inside)?)$`), ([, value]) => {
138
- const style = value.split(/-outside|-inside/)[0];
139
- const position = /outside|inside/.exec(value) ?? [];
140
- if (position.length) {
106
+ [/^list-(disc|circle|square|decimal|zero-decimal|greek|roman|upper-roman|alpha|upper-alpha)(?:-(outside|inside))?$/, ([, style, position]) => {
107
+ if (position != null) {
141
108
  return {
142
- "list-style-position": `${position[0]}`,
109
+ "list-style-position": position,
143
110
  "list-style-type": style
144
111
  };
145
112
  }
146
113
  return { "list-style-type": style };
147
114
  }],
148
- [/^list-(outside|inside)$/, ([, value]) => ({ "list-style-position": value })],
115
+ ["list-outside", { "list-style-position": "outside" }],
116
+ ["list-inside", { "list-style-position": "inside" }],
149
117
  ["list-none", { "list-style-type": "none" }]
150
118
  ];
151
- const boxDecorationBreaks = [
152
- ["decoration-slice", { "box-decoration-break": "slice" }],
153
- ["decoration-clone", { "box-decoration-break": "clone" }]
154
- ];
155
- const accentOpacity = [
119
+ const accents = [
120
+ [/^accent-(.+)$/, colorResolver("accent-color", "accent")],
156
121
  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": handler.bracket.percent(d) })]
157
122
  ];
158
- const accentColors = [
159
- [/^accent-(.+)$/, colorResolver("accent-color", "accent")]
160
- ];
161
- const caretOpacity = [
123
+ const carets = [
124
+ [/^caret-(.+)$/, colorResolver("caret-color", "caret")],
162
125
  [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": handler.bracket.percent(d) })]
163
126
  ];
164
- const caretColors = [
165
- [/^caret-(.+)$/, colorResolver("caret-color", "caret")]
166
- ];
167
127
  const imageRenderings = [
168
128
  ["image-render-auto", { "image-rendering": "auto" }],
169
129
  ["image-render-edge", { "image-rendering": "crisp-edges" }],
@@ -175,18 +135,15 @@ const imageRenderings = [
175
135
  ["image-rendering", "pixelated"]
176
136
  ]]
177
137
  ];
178
- const overflowValues = [
179
- "auto",
180
- "hidden",
181
- "visible",
182
- "scroll",
183
- "contain"
184
- ];
185
138
  const overscrolls = [
186
- [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
139
+ ["overscroll-auto", { "overscroll-behavior": "auto" }],
140
+ ["overscroll-contain", { "overscroll-behavior": "contain" }],
187
141
  ["overscroll-none", { "overscroll-behavior": "none" }],
188
- [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0],
142
+ ["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
143
+ ["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
189
144
  ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
145
+ ["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
146
+ ["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
190
147
  ["overscroll-y-none", { "overscroll-behavior-y": "none" }]
191
148
  ];
192
149
  const scrollBehaviors = [
@@ -252,21 +209,21 @@ const containerShortcuts = [
252
209
  }]
253
210
  ];
254
211
 
255
- const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) var(--un-drop-shadow)";
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)";
256
213
  const filterBase = {
257
214
  "--un-blur": varEmpty,
258
215
  "--un-brightness": varEmpty,
259
216
  "--un-contrast": varEmpty,
217
+ "--un-drop-shadow": varEmpty,
260
218
  "--un-grayscale": varEmpty,
261
219
  "--un-hue-rotate": varEmpty,
262
220
  "--un-invert": varEmpty,
263
221
  "--un-saturate": varEmpty,
264
222
  "--un-sepia": varEmpty,
265
- "--un-drop-shadow": varEmpty,
266
223
  "filter": filterContnet,
267
224
  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
268
225
  };
269
- 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-saturate) var(--un-backdrop-sepia)";
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)";
270
227
  const backdropFilterBase = {
271
228
  "--un-backdrop-blur": varEmpty,
272
229
  "--un-backdrop-brightness": varEmpty,
@@ -274,19 +231,24 @@ const backdropFilterBase = {
274
231
  "--un-backdrop-grayscale": varEmpty,
275
232
  "--un-backdrop-hue-rotate": varEmpty,
276
233
  "--un-backdrop-invert": varEmpty,
234
+ "--un-backdrop-opacity": varEmpty,
277
235
  "--un-backdrop-saturate": varEmpty,
278
236
  "--un-backdrop-sepia": varEmpty,
279
237
  "-webkit-backdrop-filter": backdropFilterContent,
280
238
  "backdrop-filter": backdropFilterContent,
281
239
  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
282
240
  };
283
- const percentWithDefault = (defaultValue = "1") => (str) => {
284
- const v = str ? handler.bracket.percent(str) : defaultValue;
285
- return v && parseFloat(v) <= 1 ? v : void 0;
241
+ const percentWithDefault = (str) => {
242
+ let v = handler.bracket(str || "");
243
+ if (v != null)
244
+ return v;
245
+ v = str ? handler.percent(str) : "1";
246
+ if (v != null && parseFloat(v) <= 1)
247
+ return v;
286
248
  };
287
249
  const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
288
250
  const value = resolver(s, theme);
289
- if (value) {
251
+ if (value != null && value !== "") {
290
252
  return [
291
253
  b ? backdropFilterBase : filterBase,
292
254
  { [`--un-${b || ""}${varName}`]: `${varName}(${value})` }
@@ -297,49 +259,37 @@ const filters = [
297
259
  ["filter", filterBase],
298
260
  ["backdrop-filter", backdropFilterBase],
299
261
  [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
300
- [/^(backdrop-)?brightness-(\d+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
301
- [/^(backdrop-)?contrast-(\d+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
262
+ [/^(backdrop-)?brightness-(.+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
263
+ [/^(backdrop-)?contrast-(.+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
302
264
  [/^()?drop-shadow(?:-(.+))?$/, toFilter("drop-shadow", (s, theme) => {
303
- const v = handler.bracket(s) || theme.dropShadow?.[s || "DEFAULT"];
304
- if (v)
265
+ let v = theme.dropShadow?.[s || "DEFAULT"];
266
+ if (v != null)
305
267
  return toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
268
+ v = handler.bracket(s);
269
+ if (v != null)
270
+ return `drop-shadow(${v})`;
306
271
  })],
307
- [/^(backdrop-)?grayscale(?:-(\d+))?$/, toFilter("grayscale", percentWithDefault())],
308
- [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${handler.bracket.number(s)}deg`)],
309
- [/^(backdrop-)?invert(?:-(\d+))?$/, toFilter("invert", percentWithDefault())],
310
- [/^(backdrop-)?saturate(?:-(\d+))?$/, toFilter("saturate", percentWithDefault("0"))],
311
- [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())],
272
+ [/^(backdrop-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault)],
273
+ [/^(backdrop-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => handler.bracket.degree(s))],
274
+ [/^(backdrop-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault)],
275
+ [/^(backdrop-)opacity-(.+)$/, toFilter("opacity", (s) => handler.bracket.percent(s))],
276
+ [/^(backdrop-)?saturate-(.+)$/, toFilter("saturate", (s) => handler.bracket.percent(s))],
277
+ [/^(backdrop-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault)],
312
278
  ["filter-none", { filter: "none" }],
313
279
  ["backdrop-filter-none", {
314
280
  "-webkit-backdrop-filter": "none",
315
281
  "backdrop-filter": "none"
316
- }]
317
- ];
318
-
319
- const mixBlendModes = [
320
- ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
321
- ["mix-blend-screen", { "mix-blend-mode": "screen" }],
322
- ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
323
- ["mix-blend-darken", { "mix-blend-mode": "darken" }],
324
- ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
325
- ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
326
- ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
327
- ["mix-blend-color-light", { "mix-blend-mode": "color-light" }],
328
- ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
329
- ["mix-blend-difference", { "mix-blend-mode": "difference" }],
330
- ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
331
- ["mix-blend-hue", { "mix-blend-mode": "hue" }],
332
- ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
333
- ["mix-blend-color", { "mix-blend-mode": "color" }],
334
- ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
335
- ["mix-blend-normal", { "mix-blend-mode": "normal" }]
282
+ }],
283
+ [/^(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|saturate|sepia)-none$/, ([, s]) => ({ filter: `${s}(0)` })],
284
+ [/^backdrop-(blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)-none$/, ([, s]) => ({
285
+ "-webkit-backdrop-filter": `${s}(0)`,
286
+ "backdrop-filter": `${s}(0)`
287
+ })]
336
288
  ];
337
289
 
338
290
  const spaces = [
339
291
  [/^space-?([xy])-?(-?.+)$/, (match) => {
340
- const [, direction, size] = match;
341
- if (size === "reverse")
342
- return { [`--un-space-${direction}-reverse`]: 1 };
292
+ const [, direction] = match;
343
293
  const results = directionSize("margin")(match)?.map((item) => {
344
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)))`;
345
295
  return [item[0], value];
@@ -350,7 +300,8 @@ const spaces = [
350
300
  ...results
351
301
  ];
352
302
  }
353
- }]
303
+ }],
304
+ [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })]
354
305
  ];
355
306
 
356
307
  const textTransforms = [
@@ -417,7 +368,8 @@ const screenReadersAccess = [
417
368
  ];
418
369
  const isolations = [
419
370
  ["isolate", { isolation: "isolate" }],
420
- ["isolate-auto", { isolation: "auto" }]
371
+ ["isolate-auto", { isolation: "auto" }],
372
+ ["isolation-auto", { isolation: "auto" }]
421
373
  ];
422
374
  const objectPositions = [
423
375
  ["object-cover", { "object-fit": "cover" }],
@@ -425,17 +377,43 @@ const objectPositions = [
425
377
  ["object-fill", { "object-fit": "fill" }],
426
378
  ["object-scale-down", { "object-fit": "scale-down" }],
427
379
  ["object-none", { "object-fit": "none" }],
428
- ["object-center", { "object-position": "center" }],
429
- ["object-bottom", { "object-position": "bottom" }],
430
- ["object-top", { "object-position": "top" }],
431
- ["object-right", { "object-position": "right" }],
432
- ["object-left", { "object-position": "left" }],
433
- ["object-lb", { "object-position": "left bottom" }],
434
- ["object-lt", { "object-position": "left top" }],
435
- ["object-rb", { "object-position": "right bottom" }],
436
- ["object-rt", { "object-position": "right top" }],
437
- ["object-cb", { "object-position": "center bottom" }],
438
- ["object-ct", { "object-position": "center top" }]
380
+ [/^object-([-\w]+)$/, ([, s]) => ({ "object-position": positionMap[s] })]
381
+ ];
382
+ const backgroundBlendModes = [
383
+ ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
384
+ ["bg-blend-screen", { "background-blend-mode": "screen" }],
385
+ ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
386
+ ["bg-blend-darken", { "background-blend-mode": "darken" }],
387
+ ["bg-blend-lighten", { "background-blend-mode": "lighten" }],
388
+ ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }],
389
+ ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }],
390
+ ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }],
391
+ ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }],
392
+ ["bg-blend-difference", { "background-blend-mode": "difference" }],
393
+ ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }],
394
+ ["bg-blend-hue", { "background-blend-mode": "hue" }],
395
+ ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
396
+ ["bg-blend-color", { "background-blend-mode": "color" }],
397
+ ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
398
+ ["bg-blend-normal", { "background-blend-mode": "normal" }]
399
+ ];
400
+ const mixBlendModes = [
401
+ ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
402
+ ["mix-blend-screen", { "mix-blend-mode": "screen" }],
403
+ ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
404
+ ["mix-blend-darken", { "mix-blend-mode": "darken" }],
405
+ ["mix-blend-lighten", { "mix-blend-mode": "lighten" }],
406
+ ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }],
407
+ ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }],
408
+ ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }],
409
+ ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }],
410
+ ["mix-blend-difference", { "mix-blend-mode": "difference" }],
411
+ ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }],
412
+ ["mix-blend-hue", { "mix-blend-mode": "hue" }],
413
+ ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
414
+ ["mix-blend-color", { "mix-blend-mode": "color" }],
415
+ ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
416
+ ["mix-blend-normal", { "mix-blend-mode": "normal" }]
439
417
  ];
440
418
 
441
419
  const tables = [
@@ -481,25 +459,19 @@ const cssVariables = [[
481
459
  }
482
460
  ]];
483
461
 
484
- const divideColors = [
485
- [/^divide-(.+)$/, colorResolver("border-color", "divide")],
486
- [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })]
487
- ];
488
- const divideSizes = [
462
+ const divides = [
489
463
  [/^divide-?([xy])$/, handlerDivide],
490
464
  [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
491
- [/^divide-?([xy])-reverse$/, ([, d]) => [[`--un-divide-${d}-reverse`, 1]]]
492
- ];
493
- const divideStyles = [
465
+ [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })],
466
+ [/^divide-(.+)$/, colorResolver("border-color", "divide")],
467
+ [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })],
494
468
  ["divide-solid", { "border-style": "solid" }],
495
469
  ["divide-dashed", { "border-style": "dashed" }],
496
470
  ["divide-dotted", { "border-style": "dotted" }],
497
471
  ["divide-double", { "border-style": "double" }],
498
472
  ["divide-none", { "border-style": "none" }]
499
473
  ];
500
- const divides = [divideSizes, divideColors, divideStyles].flat(1);
501
- function handlerDivide([, a, b]) {
502
- const [d, s = "1"] = directionMap[a] ? [a, b] : ["", a];
474
+ function handlerDivide([, d, s = "1"]) {
503
475
  const v = handler.bracket.px(s);
504
476
  if (v != null) {
505
477
  const results = directionMap[d].map((item) => {
@@ -582,7 +554,7 @@ const touchActions = [
582
554
  ];
583
555
 
584
556
  const scrolls = [
585
- [/^snap-(x|y|base)$/, ([, d]) => [
557
+ [/^snap-(x|y|both)$/, ([, d]) => [
586
558
  {
587
559
  "--un-scroll-snap-strictness": "proximity",
588
560
  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
@@ -608,6 +580,11 @@ const scrolls = [
608
580
  [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
609
581
  ];
610
582
 
583
+ const placeholders = [
584
+ [/^\$-placeholder-(.+)$/, colorResolver("color", "placeholder")],
585
+ [/^\$-placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": handler.bracket.percent.cssvar(opacity) })]
586
+ ];
587
+
611
588
  const rules = [
612
589
  cssVariables$1,
613
590
  cssVariables,
@@ -654,7 +631,6 @@ const rules = [
654
631
  breaks,
655
632
  borders,
656
633
  bgColors,
657
- boxDecorationBreaks,
658
634
  backgroundStyles,
659
635
  svgUtilities,
660
636
  objectPositions,
@@ -675,11 +651,10 @@ const rules = [
675
651
  hyphens,
676
652
  writingModes,
677
653
  writingOrientations,
678
- caretColors,
679
- caretOpacity,
680
- accentColors,
681
- accentOpacity,
654
+ carets,
655
+ accents,
682
656
  opacity,
657
+ backgroundBlendModes,
683
658
  mixBlendModes,
684
659
  boxShadows,
685
660
  outline,
@@ -689,6 +664,7 @@ const rules = [
689
664
  transitions,
690
665
  willChange,
691
666
  contents,
667
+ placeholders,
692
668
  questionMark
693
669
  ].flat(1);
694
670
 
@@ -853,13 +829,37 @@ const variantColorsScheme = [
853
829
  variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
854
830
  ];
855
831
 
856
- const variantFilePseudoElement = variantMatcher("file", (input) => `${input}::file-selector-button`);
832
+ const variantSpaceAndDivide = (matcher) => {
833
+ if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
834
+ return {
835
+ matcher,
836
+ selector: (input) => {
837
+ return `${input}>:not([hidden])~:not([hidden])`;
838
+ }
839
+ };
840
+ }
841
+ };
857
842
 
858
- const variants = [
859
- ...variants$1,
860
- variantFilePseudoElement,
861
- ...variantColorsScheme
862
- ];
843
+ const placeholderModifier = (input, { theme }) => {
844
+ const m = input.match(/^(.*)\b(placeholder-)(.+?)$/);
845
+ if (m) {
846
+ const [, pre = "", p, body] = m;
847
+ if (hasColorValue(body, theme) || hasOpacityValue(body)) {
848
+ return {
849
+ matcher: `${pre}${p}$-placeholder-${body}`
850
+ };
851
+ }
852
+ }
853
+ };
854
+ function hasColorValue(body, theme) {
855
+ return !!parseColor(body, theme)?.color;
856
+ }
857
+ function hasOpacityValue(body) {
858
+ const match = body.match(/^op(?:acity)?-?(.+)$/);
859
+ if (match && match[1] != null)
860
+ return handler.bracket.percent.cssvar(match[1]) != null;
861
+ return false;
862
+ }
863
863
 
864
864
  const presetWind = (options = {}) => {
865
865
  options.dark = options.dark ?? "class";
@@ -871,7 +871,12 @@ const presetWind = (options = {}) => {
871
871
  shortcuts: [
872
872
  ...containerShortcuts
873
873
  ],
874
- variants,
874
+ variants: [
875
+ placeholderModifier,
876
+ variantSpaceAndDivide,
877
+ ...variants(options),
878
+ ...variantColorsScheme
879
+ ],
875
880
  options
876
881
  };
877
882
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-wind",
3
- "version": "0.20.1",
3
+ "version": "0.21.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.20.1",
39
- "@unocss/preset-mini": "0.20.1"
38
+ "@unocss/core": "0.21.1",
39
+ "@unocss/preset-mini": "0.21.1"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",