ensure we don't override the name (#5602)

Keep track of unknown values (like css variables) in an unknown section.
Currently we only need to know the name, so this will be good enough for now.

Author: RobinMalfait

src/util/parseAnimationValue.js

@@ -54,7 +54,13 @@ export default function parseAnimationValue(input) {
       } else if (!seen.has('DELAY') && TIME.test(part)) {
         result.delay = part
         seen.add('DELAY')
-      } else result.name = part
+      } else if (!seen.has('NAME')) {
+        result.name = part
+        seen.add('NAME')
+      } else {
+        if (!result.unknown) result.unknown = []
+        result.unknown.push(part)
+      }
     }
 
     return result

tests/parseAnimationValue.test.js

@@ -38,6 +38,19 @@ describe('Tailwind Defaults', () => {
   })
 })
 
+describe('css variables', () => {
+  it('should be possible to use css variables', () => {
+    let parsed = parseAnimationValue('jump var(--animation-duration, 10s) linear infinite')
+    expect(parsed[0]).toEqual({
+      value: 'jump var(--animation-duration, 10s) linear infinite',
+      name: 'jump',
+      timingFunction: 'linear',
+      iterationCount: 'infinite',
+      unknown: ['var(--animation-duration, 10s)'],
+    })
+  })
+})
+
 describe('MDN Examples', () => {
   it.each([
     [