@unocss/preset-wind 0.37.4 → 0.38.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 +35 -11
  2. package/dist/index.mjs +35 -11
  3. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -22,8 +22,9 @@ ${constructCSS({ animation: `${name}` })}`;
22
22
  const duration = theme.animation?.durations?.[name] ?? "1s";
23
23
  const timing = theme.animation?.timingFns?.[name] ?? "linear";
24
24
  const props = theme.animation?.properties?.[name];
25
+ const count = theme.animation?.counts?.[name] ?? 1;
25
26
  return `@keyframes ${name}${kf}
26
- ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
27
+ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} ${count}` }, props))}`;
27
28
  }
28
29
  return { animation: utils.handler.bracket.cssvar(name) };
29
30
  }, { autocomplete: "animate-$animation.keyframes" }],
@@ -68,6 +69,20 @@ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinit
68
69
  ["animate-none", { animation: "none" }]
69
70
  ];
70
71
 
72
+ const bgGradientToValue = (cssColor) => {
73
+ if (cssColor)
74
+ return utils.colorToString(cssColor, 0);
75
+ return "rgba(255,255,255,0)";
76
+ };
77
+ const bgGradientColorValue = (mode, cssColor, color, alpha) => {
78
+ if (cssColor) {
79
+ if (alpha != null)
80
+ return utils.colorToString(cssColor, alpha);
81
+ else
82
+ return utils.colorToString(cssColor, `var(--un-${mode}-opacity, ${utils.colorOpacityToString(cssColor)})`);
83
+ }
84
+ return utils.colorToString(color, alpha);
85
+ };
71
86
  const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
72
87
  const data = utils.parseColor(body, theme);
73
88
  if (!data)
@@ -75,22 +90,18 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
75
90
  const { alpha, color, cssColor } = data;
76
91
  if (!color)
77
92
  return;
78
- let colorString = color;
79
- if (cssColor) {
80
- if (alpha != null)
81
- colorString = utils.colorToString(cssColor, alpha);
82
- else
83
- colorString = utils.colorToString(cssColor, `var(--un-${mode}-opacity, ${utils.colorOpacityToString(cssColor)})`);
84
- }
93
+ const colorString = bgGradientColorValue(mode, cssColor, color, alpha);
85
94
  switch (mode) {
86
95
  case "from":
87
96
  return {
88
97
  "--un-gradient-from": colorString,
89
- "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0))"
98
+ "--un-gradient-to": bgGradientToValue(cssColor),
99
+ "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)"
90
100
  };
91
101
  case "via":
92
102
  return {
93
- "--un-gradient-stops": `var(--un-gradient-from), ${colorString}, var(--un-gradient-to, rgba(255, 255, 255, 0))`
103
+ "--un-gradient-to": bgGradientToValue(cssColor),
104
+ "--un-gradient-stops": `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`
94
105
  };
95
106
  case "to":
96
107
  return {
@@ -490,7 +501,12 @@ const objectPositions = [
490
501
  ["object-fill", { "object-fit": "fill" }],
491
502
  ["object-scale-down", { "object-fit": "scale-down" }],
492
503
  ["object-none", { "object-fit": "none" }],
493
- [/^object-([-\w]+)$/, ([, s]) => ({ "object-position": utils.positionMap[s] }), { autocomplete: `object-(${Object.keys(utils.positionMap).join("|")})` }]
504
+ [/^object-(.+)$/, ([, d]) => {
505
+ if (utils.positionMap[d])
506
+ return { "object-position": utils.positionMap[d] };
507
+ if (utils.handler.bracketOfPosition(d) != null)
508
+ return { "object-position": utils.handler.bracketOfPosition(d).split(" ").map((e) => utils.handler.position.fraction.auto.px.cssvar(e)).join(" ") };
509
+ }, { autocomplete: `object-(${Object.keys(utils.positionMap).join("|")})` }]
494
510
  ];
495
511
  const backgroundBlendModes = [
496
512
  ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
@@ -973,6 +989,14 @@ const theme = {
973
989
  "zoom-out-left": { "transform-origin": "left center" },
974
990
  "zoom-out-right": { "transform-origin": "right center" },
975
991
  "zoom-out-up": { "transform-origin": "center bottom" }
992
+ },
993
+ counts: {
994
+ "spin": "infinite",
995
+ "ping": "infinite",
996
+ "pulse": "infinite",
997
+ "pulse-alt": "infinite",
998
+ "bounce": "infinite",
999
+ "bounce-alt": "infinite"
976
1000
  }
977
1001
  },
978
1002
  media: {
package/dist/index.mjs CHANGED
@@ -19,8 +19,9 @@ ${constructCSS({ animation: `${name}` })}`;
19
19
  const duration = theme.animation?.durations?.[name] ?? "1s";
20
20
  const timing = theme.animation?.timingFns?.[name] ?? "linear";
21
21
  const props = theme.animation?.properties?.[name];
22
+ const count = theme.animation?.counts?.[name] ?? 1;
22
23
  return `@keyframes ${name}${kf}
23
- ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`;
24
+ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} ${count}` }, props))}`;
24
25
  }
25
26
  return { animation: handler.bracket.cssvar(name) };
26
27
  }, { autocomplete: "animate-$animation.keyframes" }],
@@ -65,6 +66,20 @@ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinit
65
66
  ["animate-none", { animation: "none" }]
66
67
  ];
67
68
 
69
+ const bgGradientToValue = (cssColor) => {
70
+ if (cssColor)
71
+ return colorToString(cssColor, 0);
72
+ return "rgba(255,255,255,0)";
73
+ };
74
+ const bgGradientColorValue = (mode, cssColor, color, alpha) => {
75
+ if (cssColor) {
76
+ if (alpha != null)
77
+ return colorToString(cssColor, alpha);
78
+ else
79
+ return colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`);
80
+ }
81
+ return colorToString(color, alpha);
82
+ };
68
83
  const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
69
84
  const data = parseColor(body, theme);
70
85
  if (!data)
@@ -72,22 +87,18 @@ const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
72
87
  const { alpha, color, cssColor } = data;
73
88
  if (!color)
74
89
  return;
75
- let colorString = color;
76
- if (cssColor) {
77
- if (alpha != null)
78
- colorString = colorToString(cssColor, alpha);
79
- else
80
- colorString = colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`);
81
- }
90
+ const colorString = bgGradientColorValue(mode, cssColor, color, alpha);
82
91
  switch (mode) {
83
92
  case "from":
84
93
  return {
85
94
  "--un-gradient-from": colorString,
86
- "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0))"
95
+ "--un-gradient-to": bgGradientToValue(cssColor),
96
+ "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)"
87
97
  };
88
98
  case "via":
89
99
  return {
90
- "--un-gradient-stops": `var(--un-gradient-from), ${colorString}, var(--un-gradient-to, rgba(255, 255, 255, 0))`
100
+ "--un-gradient-to": bgGradientToValue(cssColor),
101
+ "--un-gradient-stops": `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`
91
102
  };
92
103
  case "to":
93
104
  return {
@@ -487,7 +498,12 @@ const objectPositions = [
487
498
  ["object-fill", { "object-fit": "fill" }],
488
499
  ["object-scale-down", { "object-fit": "scale-down" }],
489
500
  ["object-none", { "object-fit": "none" }],
490
- [/^object-([-\w]+)$/, ([, s]) => ({ "object-position": positionMap[s] }), { autocomplete: `object-(${Object.keys(positionMap).join("|")})` }]
501
+ [/^object-(.+)$/, ([, d]) => {
502
+ if (positionMap[d])
503
+ return { "object-position": positionMap[d] };
504
+ if (handler.bracketOfPosition(d) != null)
505
+ return { "object-position": handler.bracketOfPosition(d).split(" ").map((e) => handler.position.fraction.auto.px.cssvar(e)).join(" ") };
506
+ }, { autocomplete: `object-(${Object.keys(positionMap).join("|")})` }]
491
507
  ];
492
508
  const backgroundBlendModes = [
493
509
  ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
@@ -970,6 +986,14 @@ const theme = {
970
986
  "zoom-out-left": { "transform-origin": "left center" },
971
987
  "zoom-out-right": { "transform-origin": "right center" },
972
988
  "zoom-out-up": { "transform-origin": "center bottom" }
989
+ },
990
+ counts: {
991
+ "spin": "infinite",
992
+ "ping": "infinite",
993
+ "pulse": "infinite",
994
+ "pulse-alt": "infinite",
995
+ "bounce": "infinite",
996
+ "bounce-alt": "infinite"
973
997
  }
974
998
  },
975
999
  media: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-wind",
3
- "version": "0.37.4",
3
+ "version": "0.38.2",
4
4
  "description": "Tailwind / Windi CSS compact preset for UnoCSS",
5
5
  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
6
6
  "license": "MIT",
@@ -35,8 +35,8 @@
35
35
  "*.css"
36
36
  ],
37
37
  "dependencies": {
38
- "@unocss/core": "0.37.4",
39
- "@unocss/preset-mini": "0.37.4"
38
+ "@unocss/core": "0.38.2",
39
+ "@unocss/preset-mini": "0.38.2"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",