diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js index d6b2eee..b969074 100644 --- a/src/lib/expandApplyAtRules.js +++ b/src/lib/expandApplyAtRules.js @@ -102,8 +102,15 @@ function expandApplyAtRules(context) { .join(', ') } + /** @type {Map} */ + let perParentApplies = new Map() + + // Collect all apply candidates and their rules for (let apply of applies) { - let siblings = [] + let candidates = perParentApplies.get(apply.parent) || [] + + perParentApplies.set(apply.parent, candidates) + let [applyCandidates, important] = extractApplyCandidates(apply.params) for (let applyCandidate of applyCandidates) { @@ -115,13 +122,22 @@ function expandApplyAtRules(context) { let rules = applyClassCache.get(applyCandidate) + candidates.push([applyCandidate, important, rules]) + } + } + + for (const [parent, candidates] of perParentApplies) { + let siblings = [] + + for (let [applyCandidate, important, rules] of candidates) { for (let [meta, node] of rules) { let root = postcss.root({ nodes: [node.clone()] }) - let canRewriteSelector = node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes'); + let canRewriteSelector = + node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes') if (canRewriteSelector) { root.walkRules((rule) => { - rule.selector = replaceSelector(apply.parent.selector, rule.selector, applyCandidate) + rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate) rule.walkDecls((d) => { d.important = important @@ -134,11 +150,13 @@ function expandApplyAtRules(context) { } // Inject the rules, sorted, correctly - const nodes = siblings.sort(([a], [z]) => bigSign(a.sort - z.sort)).map(s => s[1]) + const nodes = siblings.sort(([a], [z]) => bigSign(a.sort - z.sort)).map((s) => s[1]) - // `apply.parent` is referring to the node at `.abc` in: .abc { @apply mt-2 } - apply.parent.after(nodes) + // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 } + parent.after(nodes) + } + for (let apply of applies) { // If there are left-over declarations, just remove the @apply if (apply.parent.nodes.length > 1) { apply.remove() diff --git a/tests/10-apply.test.css b/tests/10-apply.test.css index cccd8b4..dd7ee96 100644 --- a/tests/10-apply.test.css +++ b/tests/10-apply.test.css @@ -265,6 +265,38 @@ color: green; font-weight: 700; } +h1 { + font-size: 1.5rem; + line-height: 2rem; +} +@media (min-width: 640px) { + h1 { + font-size: 1.875rem; + line-height: 2.25rem; + } +} +@media (min-width: 1024px) { + h1 { + font-size: 1.5rem; + line-height: 2rem; + } +} +h2 { + font-size: 1.5rem; + line-height: 2rem; +} +@media (min-width: 640px) { + h2 { + font-size: 1.5rem; + line-height: 2rem; + } +} +@media (min-width: 1024px) { + h2 { + font-size: 1.5rem; + line-height: 2rem; + } +} @keyframes spin { to { transform: rotate(360deg); diff --git a/tests/10-apply.test.js b/tests/10-apply.test.js index 8e0c3e0..a9fa533 100644 --- a/tests/10-apply.test.js +++ b/tests/10-apply.test.js @@ -99,6 +99,15 @@ test('@apply', () => { .use-with-other-properties-component { @apply use-with-other-properties-base; } + + h1 { + @apply text-2xl lg:text-2xl sm:text-3xl; + } + h2 { + @apply text-2xl; + @apply lg:text-2xl; + @apply sm:text-2xl; + } } @layer utilities {