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} */ 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 @@
+
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 {