diff --git a/src/jit/lib/generateRules.js b/src/jit/lib/generateRules.js index 8089984c80b6..10b5f64df96c 100644 --- a/src/jit/lib/generateRules.js +++ b/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) } } diff --git a/tests/jit/apply.test.css b/tests/jit/apply.test.css index d53c8f6d7bf1..3c6df8f9808f 100644 --- a/tests/jit/apply.test.css +++ b/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); diff --git a/tests/jit/apply.test.html b/tests/jit/apply.test.html index 5d5bfe8f0c58..3d0d68169645 100644 --- a/tests/jit/apply.test.html +++ b/tests/jit/apply.test.html @@ -33,6 +33,7 @@
+
diff --git a/tests/jit/apply.test.js b/tests/jit/apply.test.js index f58bafba347f..b8b66d212cd8 100644 --- a/tests/jit/apply.test.js +++ b/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 {