From 579ae607adfc60abb83b9ea59c75d9eac7581866 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sun, 26 Sep 2021 13:11:23 +0200
Subject: [PATCH] ensure we don't override the `name`

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.
---
 src/util/parseAnimationValue.js   |  8 +++++++-
 tests/parseAnimationValue.test.js | 13 +++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/util/parseAnimationValue.js b/src/util/parseAnimationValue.js
index 94c77ff3e44a..990e7aa8c8bc 100644
--- a/src/util/parseAnimationValue.js
+++ b/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
diff --git a/tests/parseAnimationValue.test.js b/tests/parseAnimationValue.test.js
index 8fd211d2fb21..293d6fbec60a 100644
--- a/tests/parseAnimationValue.test.js
+++ b/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([
     [