Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Animations get purged if using step-start or step-end timing function
### What version of Tailwind CSS are you using?

v2.2.2

### What build tool (or framework if it abstracts the build tool) are you using?

@symfony/webpack-encore": ^1.3.0

### What version of Node.js are you using?

v12.0.0

### What browser are you using?

N/A

### What operating system are you using?

macOS

### Reproduction repository

https://play.tailwindcss.com/P8QHN8mDNy?file=config

### Describe your issue

When using `step-start` or `step-end` as animation-timing-function ([see MDN for possible built in values](https://developer.mozilla.org/de/docs/Web/CSS/animation-timing-function)) the animation won't work because `parseAnimationValue` won't return anything.

I'd be happy to provide a PR to fix this 👍🏻 


Hints:
Seems to be same issue as https://github.com/tailwindlabs/tailwindcss/issues/4737
@hug963 I saw your issue and I think it's kinda related. In case of `step-start` / `step-end` it should be as easy as updating the `timings` constant and add those values: https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/parseAnimationValue.js#L5

Your case needs to be handled a little different, I'd expect a new regex needs to be added to the function.

Patch:
diff --git a/src/util/parseAnimationValue.js b/src/util/parseAnimationValue.js
--- a/src/util/parseAnimationValue.js
+++ b/src/util/parseAnimationValue.js
@@ -2,7 +2,15 @@ const DIRECTIONS = new Set(['normal', 'reverse', 'alternate', 'alternate-reverse
 const PLAY_STATES = new Set(['running', 'paused'])
 const FILL_MODES = new Set(['none', 'forwards', 'backwards', 'both'])
 const ITERATION_COUNTS = new Set(['infinite'])
-const TIMINGS = new Set(['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'])
+const TIMINGS = new Set([
+  'linear',
+  'ease',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'step-start',
+  'step-end',
+])
 const TIMING_FNS = ['cubic-bezier', 'steps']
 
 const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.


Test patch:
diff --git a/tests/plugins/animation.test.js b/tests/plugins/animation.test.js
--- a/tests/plugins/animation.test.js
+++ b/tests/plugins/animation.test.js
@@ -13,10 +13,12 @@ test('defining animation and keyframes', () => {
         none: 'none',
         spin: 'spin 1s linear infinite',
         ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+        blink: 'blink 1s step-end infinite',
       },
       keyframes: {
         spin: { to: { transform: 'rotate(360deg)' } },
         ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
+        blink: { '50%': { transform: 'scale(2)' } },
       },
     },
     variants: {
@@ -43,11 +45,20 @@ test('defining animation and keyframes', () => {
       }
     }
 
+    @layer utilities {
+      @variants {
+        @keyframes blink {
+          50% { transform: scale(2); }
+        }
+      }
+    }
+
     @layer utilities {
       @variants {
         .animate-none { animation: none; }
         .animate-spin { animation: spin 1s linear infinite; }
         .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+        .animate-blink { animation: blink 1s step-end infinite; }
       }
     }
   `)