escape hashed animation names (fixes #293)

tw-in-js · Dec 15, 2022 · 28b83c7 · 28b83c7
1 parent c64fb45
commit 28b83c7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/chatty-pants-march.md 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
@@ -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
@@ -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(' '),
       }
     }