Fix missing !important when using @apply (#4854)

* Add failing test for #4823

* Fix important variant `@apply`

Co-authored-by: Brad Cornes <[email protected]>

Author: adamwathan

src/jit/lib/generateRules.js

@@ -106,9 +106,9 @@ function applyVariant(variant, matches, context) {
     let variantFunctionTuples = context.variantMap.get(variant)
     let result = []
 
-    for (let [{ sort, layer, options }, rule] of matches) {
-      if (options.respectVariants === false) {
-        result.push([{ sort, layer, options }, rule])
+    for (let [meta, rule] of matches) {
+      if (meta.options.respectVariants === false) {
+        result.push([meta, rule])
         continue
       }
 
@@ -144,7 +144,7 @@ function applyVariant(variant, matches, context) {
           continue
         }
 
-        let withOffset = [{ sort: variantSort | sort, layer, options }, clone.nodes[0]]
+        let withOffset = [{ ...meta, sort: variantSort | meta.sort }, clone.nodes[0]]
         result.push(withOffset)
       }
     }

tests/jit/apply.test.css

@@ -323,6 +323,15 @@ h2 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+
+.important-modifier-variant {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.important-modifier-variant:hover {
+  border-radius: 0.375rem !important;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);

tests/jit/apply.test.html

@@ -33,6 +33,7 @@
     <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="important-modifier-variant"></div>
     <div class="a b"></div>
     <div class="foo"></div>
     <div class="bar"></div>

tests/jit/apply.test.js

@@ -122,6 +122,10 @@ test('@apply', () => {
     .important-modifier {
       @apply px-4 !rounded-md;
     }
+
+    .important-modifier-variant {
+      @apply px-4 hover:!rounded-md;
+    }
   }
 
   @layer utilities {