Support applying important utilities in JIT (#4260)

Author: adamwathan

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

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

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

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>

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 {