only prefix animation names that are defined (#2641)

Author: RobinMalfait

__tests__/plugins/animation.test.js

@@ -80,13 +80,52 @@ test('defining animation and keyframes with prefix', () => {
         }
       }
     }
-    
+
     @layer utilities {
       @variants {
         .tw-animate-none { animation: none; }
         .tw-animate-spin { animation: tw-spin 1s linear infinite; }
         .tw-animate-ping { animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
       }
-    }  
+    }
+  `)
+})
+
+test('defining animation and keyframes with prefix (skip undefined animations)', () => {
+  const config = {
+    prefix: 'tw-',
+    theme: {
+      animation: {
+        none: 'none',
+        spin: 'spin 1s linear infinite',
+        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      },
+      keyframes: {
+        spin: { to: { transform: 'rotate(360deg)' } },
+      },
+    },
+    variants: {
+      animation: [],
+    },
+  }
+
+  const { utilities } = processPlugins([plugin()], config)
+
+  expect(css(utilities)).toMatchCss(`
+    @layer utilities {
+      @variants {
+        @keyframes tw-spin {
+          to { transform: rotate(360deg); }
+        }
+      }
+    }
+
+    @layer utilities {
+      @variants {
+        .tw-animate-none { animation: none; }
+        .tw-animate-spin { animation: tw-spin 1s linear infinite; }
+        .tw-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+      }
+    }
   `)
 })

src/plugins/animation.js

@@ -18,7 +18,7 @@ export default function () {
       _.mapKeys(animationConfig, (_animation, suffix) => nameClass('animate', suffix)),
       (animation) => {
         const { name } = parseAnimationValue(animation)
-        if (name === undefined) return { animation }
+        if (name === undefined || keyframesConfig[name] === undefined) return { animation }
         return { animation: animation.replace(name, prefixName(name)) }
       }
     )