Merge pull request #69 from tailwindlabs/fix-important-atrules

Don't apply !important to direct children of at-rules or in keyframes

Author: adamwathan

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 {

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]
   })

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;
 }

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>

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': {

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;
 }

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 {