From 5708e511e618a4f2a10362657fe6d8e056e57622 Mon Sep 17 00:00:00 2001
From: Chris <1633711653@qq.com>
Date: Tue, 7 Jun 2022 12:01:13 +0800
Subject: [PATCH] fix(preset-wind): set animate count 1 by default (#1070)

---
 packages/preset-mini/src/theme/types.ts     | 1 +
 packages/preset-wind/src/rules/animation.ts | 3 ++-
 packages/preset-wind/src/theme.ts           | 8 ++++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/preset-mini/src/theme/types.ts b/packages/preset-mini/src/theme/types.ts
index 12e1e846be..736db43f6b 100644
--- a/packages/preset-mini/src/theme/types.ts
+++ b/packages/preset-mini/src/theme/types.ts
@@ -3,6 +3,7 @@ export interface ThemeAnimation {
   durations?: Record<string, string>
   timingFns?: Record<string, string>
   properties?: Record<string, object>
+  counts?: Record<string, string | number>
 }
 
 export interface Theme {
diff --git a/packages/preset-wind/src/rules/animation.ts b/packages/preset-wind/src/rules/animation.ts
index bf47fd21f5..7796336252 100644
--- a/packages/preset-wind/src/rules/animation.ts
+++ b/packages/preset-wind/src/rules/animation.ts
@@ -15,8 +15,9 @@ export const animations: Rule<Theme>[] = [
       const duration = theme.animation?.durations?.[name] ?? '1s'
       const timing = theme.animation?.timingFns?.[name] ?? 'linear'
       const props = theme.animation?.properties?.[name]
+      const count = theme.animation?.counts?.[name] ?? 1
       return `@keyframes ${name}${kf}\n${constructCSS(
-        Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}`
+        Object.assign({ animation: `${name} ${duration} ${timing} ${count}` }, props))}`
     }
     return { animation: h.bracket.cssvar(name) }
   }, { autocomplete: 'animate-$animation.keyframes' }],
diff --git a/packages/preset-wind/src/theme.ts b/packages/preset-wind/src/theme.ts
index 7c3c0e7f5b..b650099923 100644
--- a/packages/preset-wind/src/theme.ts
+++ b/packages/preset-wind/src/theme.ts
@@ -154,6 +154,14 @@ export const theme: Theme = {
       'zoom-out-right': { 'transform-origin': 'right center' },
       'zoom-out-up': { 'transform-origin': 'center bottom' },
     },
+    counts: {
+      'spin': 'infinite',
+      'ping': 'infinite',
+      'pulse': 'infinite',
+      'pulse-alt': 'infinite',
+      'bounce': 'infinite',
+      'bounce-alt': 'infinite',
+    },
   },
   media: {
     portrait: '(orientation: portrait)',