From e5bc48c6150636756d9e4b558fba75d38c5dd807 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 21 Dec 2023 11:35:23 -0500
Subject: [PATCH 1/3] Don't remove keyframe stops when using important
 utilities

---
 src/lib/generateRules.js         | 10 ++++++++++
 tests/important-modifier.test.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index ac9fbb11926e..89f8515d061b 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -118,10 +118,20 @@ function applyImportant(matches, classCandidate) {
 
   let result = []
 
+  function isInKeyframes(rule) {
+    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
+  }
+
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
 
     container.walkRules((r) => {
+      // Declarations inside keyframes cannot be marked as important
+      // They will be ignored by the browser
+      if (isInKeyframes(r)) {
+        return
+      }
+
       let ast = selectorParser().astSync(r.selector)
 
       // Remove extraneous selectors that do not include the base candidate
diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
index fe4e14b335fe..e54495b5067b 100644
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -147,3 +147,32 @@ test('the important modifier works on utilities using :where()', () => {
     `)
   })
 })
+
+test('the important modifier does not break keyframes', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="!animate-pulse"></div> `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @keyframes pulse {
+        50% {
+          opacity: .5;
+        }
+      }
+
+      .\!animate-pulse {
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+      }
+    `)
+  })
+})

From 44b1d5cd1fbe3bf23dd24990a835af2be3f5c3d4 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 21 Dec 2023 11:50:18 -0500
Subject: [PATCH 2/3] Fix test

---
 tests/important-modifier.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
index e54495b5067b..a7298f9e1642 100644
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -171,7 +171,7 @@ test('the important modifier does not break keyframes', () => {
       }
 
       .\!animate-pulse {
-        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+        animation: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse !important;
       }
     `)
   })

From e81b6a1938e90a15cc5df22de55560d6a7fabd55 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 21 Dec 2023 12:01:53 -0500
Subject: [PATCH 3/3] fix linting

---
 tests/important-modifier.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
index a7298f9e1642..da5ac5d7d4e6 100644
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -166,7 +166,7 @@ test('the important modifier does not break keyframes', () => {
     expect(result.css).toMatchFormattedCss(css`
       @keyframes pulse {
         50% {
-          opacity: .5;
+          opacity: 0.5;
         }
       }