Repository: tailwindlabs/tailwindcss-jit (js)

Issue:
Animation not working with important: true
Hey! Thanks for making this, it's awesome.

I'm having issues using animation with `important: true` in my config file. Seems like `!important` is added to `@keyframes` which breaks the animation.

Pull request:
Don't apply !important to direct children of at-rules or in keyframes
Resolves #64 

Patch:
diff --git a/src/lib/collapseAdjacentRules.js b/src/lib/collapseAdjacentRules.js
index e2ad015..ad5d40b 100644
--- a/src/lib/collapseAdjacentRules.js
+++ b/src/lib/collapseAdjacentRules.js
@@ -1,6 +1,6 @@
 let comparisonMap = {
-  atrule: 'params',
-  rule: 'selector',
+  atrule: ['name', 'params'],
+  rule: ['selector'],
 }
 let types = new Set(Object.keys(comparisonMap))
 
@@ -18,11 +18,11 @@ function collapseAdjacentRules(context) {
         return
       }
 
-      let property = comparisonMap[node.type]
+      let properties = comparisonMap[node.type]
 
       if (node.type === 'atrule' && node.name === 'font-face') {
         currentRule = node
-      } else if (node[property] === currentRule[property]) {
+      } else if (properties.every((property) => node[property] === currentRule[property])) {
         currentRule.append(node.nodes)
         node.remove()
       } else {
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index d07a976..f64f90c 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -213,6 +213,20 @@ function* resolveMatches(candidate, context) {
   }
 }
 
+function inKeyframes(d) {
+  return (
+    d.parent.parent && d.parent.parent.type === 'atrule' && d.parent.parent.name === 'keyframes'
+  )
+}
+
+function makeImportant(rule) {
+  rule.walkDecls((d) => {
+    if (d.parent.type === 'rule' && !inKeyframes(d)) {
+      d.important = true
+    }
+  })
+}
+
 function generateRules(candidates, context) {
   let allRules = []
 
@@ -239,9 +253,7 @@ function generateRules(candidates, context) {
 
   return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
     if (context.tailwindConfig.important === true && options.respectImportant) {
-      rule.walkDecls((d) => {
-        d.important = true
-      })
+      makeImportant(rule)
     }
     return [sort | context.layerOrder[layer], rule]
   })


Test patch:
diff --git a/tests/04-important-boolean.test.css b/tests/04-important-boolean.test.css
index f427f18..82113b5 100644
--- a/tests/04-important-boolean.test.css
+++ b/tests/04-important-boolean.test.css
@@ -38,12 +38,26 @@
 .btn {
   button: yes !important;
 }
+@font-face {
+  font-family: Inter;
+}
+@page {
+  margin: 1cm;
+}
 .custom-component {
   font-weight: 700;
 }
 .custom-important-component {
   text-align: center !important;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite !important;
+}
 .font-bold {
   font-weight: 700 !important;
 }
diff --git a/tests/04-important-boolean.test.html b/tests/04-important-boolean.test.html
index 5dfa917..5668043 100644
--- a/tests/04-important-boolean.test.html
+++ b/tests/04-important-boolean.test.html
@@ -1,5 +1,6 @@
 <div class="container"></div>
 <div class="btn"></div>
+<div class="animate-spin"></div>
 <div class="custom-util"></div>
 <div class="custom-component"></div>
 <div class="custom-important-component"></div>
diff --git a/tests/04-important-boolean.test.js b/tests/04-important-boolean.test.js
index 4169d92..4ccb4cf 100644
--- a/tests/04-important-boolean.test.js
+++ b/tests/04-important-boolean.test.js
@@ -24,6 +24,17 @@ test('important boolean', () => {
           },
           { respectImportant: true }
         )
+        addComponents(
+          {
+            '@font-face': {
+              'font-family': 'Inter',
+            },
+            '@page': {
+              margin: '1cm',
+            },
+          },
+          { respectImportant: true }
+        )
         addUtilities(
           {
             '.custom-util': {
diff --git a/tests/09-collapse-adjacent-rules.test.css b/tests/09-collapse-adjacent-rules.test.css
index a9672f9..ceda37e 100644
--- a/tests/09-collapse-adjacent-rules.test.css
+++ b/tests/09-collapse-adjacent-rules.test.css
@@ -24,6 +24,9 @@
   font-family: 'Gilroy';
   src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
 }
+@page {
+  margin: 1cm;
+}
 .font-bold {
   font-weight: 700;
 }
diff --git a/tests/09-collapse-adjacent-rules.test.js b/tests/09-collapse-adjacent-rules.test.js
index e9c3589..70ac178 100644
--- a/tests/09-collapse-adjacent-rules.test.js
+++ b/tests/09-collapse-adjacent-rules.test.js
@@ -27,6 +27,9 @@ test('collapse adjacent rules', () => {
       src: url("/fonts/Gilroy.woff2") format("woff2"),
             url("/fonts/Gilroy.woff") format("woff");
     }
+    @page {
+      margin: 1cm;
+    }
     @tailwind components;
     @tailwind utilities;
     @layer base {