From 28b83c74b024ddc7f3fc736171b6e844dbcbbb86 Mon Sep 17 00:00:00 2001
From: Sascha Tandel <s.tandel@kenoxa.de>
Date: Thu, 15 Dec 2022 17:41:08 +0100
Subject: [PATCH] escape hashed animation names (fixes #293)

---
 .changeset/chatty-pants-march.md           |  5 +++++
 packages/preset-tailwind/src/rules.test.ts | 16 ++++++++++++++++
 packages/preset-tailwind/src/rules.ts      |  4 ++--
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chatty-pants-march.md

diff --git a/.changeset/chatty-pants-march.md b/.changeset/chatty-pants-march.md
new file mode 100644
index 000000000..9f4821e17
--- /dev/null
+++ b/.changeset/chatty-pants-march.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': patch
+---
+
+escape hashed animation names (fixes #293)
diff --git a/packages/preset-tailwind/src/rules.test.ts b/packages/preset-tailwind/src/rules.test.ts
index 11eb39205..55e94c9d4 100644
--- a/packages/preset-tailwind/src/rules.test.ts
+++ b/packages/preset-tailwind/src/rules.test.ts
@@ -443,6 +443,22 @@ test('hashed supports', () => {
   ])
 })
 
+test('hashed animate', () => {
+  const tw = twind(
+    {
+      presets: [tailwind({ disablePreflight: true })],
+      hash: true,
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('animate-spin'), '#1gsib12')
+  assert.deepEqual(tw.target, [
+    '@keyframes \\#1mm0hdv{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}',
+    '.\\#1gsib12{animation:\\#1mm0hdv 1s linear infinite}',
+  ])
+})
+
 test('font-family utilities can be defined as a string', () => {
   const tw = twind(
     {
diff --git a/packages/preset-tailwind/src/rules.ts b/packages/preset-tailwind/src/rules.ts
index cfd0b808a..9d2df5914 100644
--- a/packages/preset-tailwind/src/rules.ts
+++ b/packages/preset-tailwind/src/rules.ts
@@ -851,7 +851,7 @@ const rules: Rule<TailwindTheme>[] = [
   // Transition Delay
   matchTheme('delay(?:$|-)', 'transitionDelay', 'transitionDelay', join),
 
-  matchTheme('animate(?:$|-)', 'animation', (match, { theme, h }) => {
+  matchTheme('animate(?:$|-)', 'animation', (match, { theme, h, e }) => {
     const animation: string = join(match)
 
     // Try to auto inject keyframes
@@ -860,7 +860,7 @@ const rules: Rule<TailwindTheme>[] = [
 
     if (keyframeValues) {
       return {
-        [('@keyframes ' + (parts[0] = h(parts[0]))) as '@keyframes xxx']: keyframeValues,
+        [('@keyframes ' + (parts[0] = e(h(parts[0])))) as '@keyframes xxx']: keyframeValues,
         animation: parts.join(' '),
       }
     }