@unocss/preset-wind 0.37.4 → 0.38.0

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 +29 -10
  2. package/dist/index.mjs +29 -10
  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 {
@@ -973,6 +984,14 @@ const theme = {
973
984
  "zoom-out-left": { "transform-origin": "left center" },
974
985
  "zoom-out-right": { "transform-origin": "right center" },
975
986
  "zoom-out-up": { "transform-origin": "center bottom" }
987
+ },
988
+ counts: {
989
+ "spin": "infinite",
990
+ "ping": "infinite",
991
+ "pulse": "infinite",
992
+ "pulse-alt": "infinite",
993
+ "bounce": "infinite",
994
+ "bounce-alt": "infinite"
976
995
  }
977
996
  },
978
997
  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 {
@@ -970,6 +981,14 @@ const theme = {
970
981
  "zoom-out-left": { "transform-origin": "left center" },
971
982
  "zoom-out-right": { "transform-origin": "right center" },
972
983
  "zoom-out-up": { "transform-origin": "center bottom" }
984
+ },
985
+ counts: {
986
+ "spin": "infinite",
987
+ "ping": "infinite",
988
+ "pulse": "infinite",
989
+ "pulse-alt": "infinite",
990
+ "bounce": "infinite",
991
+ "bounce-alt": "infinite"
973
992
  }
974
993
  },
975
994
  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.0",
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.0",
39
+ "@unocss/preset-mini": "0.38.0"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",