From 33fbad9ad63faa865266803d4fb6c0ec17ff9663 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 6 May 2021 13:52:26 -0400
Subject: [PATCH] Support applying important utilities in JIT (#4260)

---
 src/jit/lib/expandApplyAtRules.js | 4 +---
 src/jit/lib/generateRules.js      | 2 +-
 tests/jit/apply.test.css          | 5 +++++
 tests/jit/apply.test.html         | 1 +
 tests/jit/apply.test.js           | 4 ++++
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/jit/lib/expandApplyAtRules.js b/src/jit/lib/expandApplyAtRules.js
index 138819240c13..6e61495007c2 100644
--- a/src/jit/lib/expandApplyAtRules.js
+++ b/src/jit/lib/expandApplyAtRules.js
@@ -30,7 +30,6 @@ function buildApplyCache(applyCandidates, context) {
   return context.applyClassCache
 }
 
-// TODO: Apply `!important` stuff correctly instead of just skipping it
 function extractApplyCandidates(params) {
   let candidates = params.split(/[\s\t\n]+/g)
 
@@ -143,7 +142,6 @@ function processApply(root, context) {
         .join(', ')
     }
 
-    /** @type {Map<import('postcss').Node, [string, boolean, import('postcss').Node[]][]>} */
     let perParentApplies = new Map()
 
     // Collect all apply candidates and their rules
@@ -197,7 +195,7 @@ function processApply(root, context) {
               rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate)
 
               rule.walkDecls((d) => {
-                d.important = important
+                d.important = meta.important || important
               })
             })
           }
diff --git a/src/jit/lib/generateRules.js b/src/jit/lib/generateRules.js
index 79b701ab34a1..eaae34d81daf 100644
--- a/src/jit/lib/generateRules.js
+++ b/src/jit/lib/generateRules.js
@@ -79,7 +79,7 @@ function applyImportant(matches) {
       })
       r.walkDecls((d) => (d.important = true))
     })
-    result.push([meta, container.nodes[0]])
+    result.push([{ ...meta, important: true }, container.nodes[0]])
   }
 
   return result
diff --git a/tests/jit/apply.test.css b/tests/jit/apply.test.css
index 60b6f081a73f..7fe4ad6edc27 100644
--- a/tests/jit/apply.test.css
+++ b/tests/jit/apply.test.css
@@ -323,6 +323,11 @@ h2 {
     line-height: 2rem;
   }
 }
+.important-modifier {
+  border-radius: 0.375rem !important;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
diff --git a/tests/jit/apply.test.html b/tests/jit/apply.test.html
index 4cffa150eb79..5d5bfe8f0c58 100644
--- a/tests/jit/apply.test.html
+++ b/tests/jit/apply.test.html
@@ -32,6 +32,7 @@
     <div class="recursive-apply-c"></div>
     <div class="use-with-other-properties-base use-with-other-properties-component"></div>
     <div class="add-sibling-properties"></div>
+    <div class="important-modifier"></div>
     <div class="a b"></div>
     <div class="foo"></div>
     <div class="bar"></div>
diff --git a/tests/jit/apply.test.js b/tests/jit/apply.test.js
index e14268d815ab..0af26b4f6f4f 100644
--- a/tests/jit/apply.test.js
+++ b/tests/jit/apply.test.js
@@ -119,6 +119,10 @@ test('@apply', () => {
       @apply lg:text-2xl;
       @apply sm:text-2xl;
     }
+
+    .important-modifier {
+      @apply px-4 !rounded-md;
+    }
   }
 
   @layer utilities {