Add step-start and step-and to timings constant (#4795)

Co-authored-by: Tim Kleyersburg <tk@wacg.de>
tailwindlabs · Jun 24, 2021 · fdfecf3 · fdfecf3
1 parent b3d5b4e
commit fdfecf3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git 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.

diff --git 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; }
       }
     }
   `)