From 3c4d97250230d1d402cbcd31f9119f86d57af393 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 23 Mar 2021 20:30:26 -0400 Subject: [PATCH 1/3] Fix order of applied properties These are now in the order of the apply declaration but still obey the cascade order so pt-/pb- still wins over py- and py still wins over p- --- src/lib/expandApplyAtRules.js | 8 ++++---- tests/00-kitchen-sink.test.css | 2 +- tests/10-apply.test.css | 24 ++++++++++++------------ 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js index d0a46fe..1d9a75b 100644 --- a/src/lib/expandApplyAtRules.js +++ b/src/lib/expandApplyAtRules.js @@ -130,10 +130,10 @@ function expandApplyAtRules(context) { } // Inject the rules, sorted, correctly - for (let [, sibling] of siblings.sort(([a], [z]) => bigSign(z.sort - a.sort))) { - // `apply.parent` is referring to the node at `.abc` in: .abc { @apply mt-2 } - apply.parent.after(sibling) - } + 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) // If there are left-over declarations, just remove the @apply if (apply.parent.nodes.length > 1) { diff --git a/tests/00-kitchen-sink.test.css b/tests/00-kitchen-sink.test.css index cab8b2c..d43ebaa 100644 --- a/tests/00-kitchen-sink.test.css +++ b/tests/00-kitchen-sink.test.css @@ -243,8 +243,8 @@ div { --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); - --tw-numeric-spacing: tabular-nums; --tw-ordinal: ordinal; + --tw-numeric-spacing: tabular-nums; } .custom-component { background: #123456; diff --git a/tests/10-apply.test.css b/tests/10-apply.test.css index ddf73cf..5a9fe41 100644 --- a/tests/10-apply.test.css +++ b/tests/10-apply.test.css @@ -11,19 +11,19 @@ border-radius: 0.375rem; --tw-bg-opacity: 1; background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); - padding-top: 0.5rem; - padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .class-order { padding: 2rem; - padding-top: 1.75rem; - padding-bottom: 1.75rem; padding-left: 0.75rem; padding-right: 0.75rem; - padding-right: 0.25rem; + padding-top: 1.75rem; + padding-bottom: 1.75rem; padding-top: 1rem; + padding-right: 0.25rem; } .with-additional-properties { font-weight: 500; @@ -104,10 +104,10 @@ border-radius: 0.375rem; --tw-bg-opacity: 1; background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); - padding-top: 0.5rem; - padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .multiple-variants:hover, .selectors-variants:hover { @@ -149,8 +149,8 @@ --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); - --tw-numeric-spacing: tabular-nums; --tw-ordinal: ordinal; + --tw-numeric-spacing: tabular-nums; --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -187,18 +187,18 @@ } .btn { border-radius: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; font-weight: 700; } .btn-blue { border-radius: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; font-weight: 700; --tw-bg-opacity: 1; background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); From a89913547fac35cb51e8e1a2f2c61b5a4c64fac5 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 23 Mar 2021 20:33:23 -0400 Subject: [PATCH 2/3] =?UTF-8?q?Don=E2=80=99t=20rewrite=20selections=20in?= =?UTF-8?q?=20keyframe=20at=20rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I think this logic is too specific but it seems to work for now --- src/lib/expandApplyAtRules.js | 6 +++++- tests/10-apply.test.css | 8 ++++++++ tests/10-apply.test.html | 1 + tests/10-apply.test.js | 4 ++++ 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js index 1d9a75b..1097820 100644 --- a/src/lib/expandApplyAtRules.js +++ b/src/lib/expandApplyAtRules.js @@ -117,9 +117,13 @@ function expandApplyAtRules(context) { for (let [meta, node] of rules) { let root = postcss.root({ nodes: [node.clone()] }) + let canRewriteSelector = node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes'); root.walkRules((rule) => { - rule.selector = replaceSelector(apply.parent.selector, rule.selector, applyCandidate) + if (canRewriteSelector) { + rule.selector = replaceSelector(apply.parent.selector, rule.selector, applyCandidate) + } + rule.walkDecls((d) => { d.important = important }) diff --git a/tests/10-apply.test.css b/tests/10-apply.test.css index 5a9fe41..934ac86 100644 --- a/tests/10-apply.test.css +++ b/tests/10-apply.test.css @@ -265,3 +265,11 @@ color: green; font-weight: 700; } +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.foo { + animation: spin 1s linear infinite; +} diff --git a/tests/10-apply.test.html b/tests/10-apply.test.html index d355412..e118ee2 100644 --- a/tests/10-apply.test.html +++ b/tests/10-apply.test.html @@ -32,5 +32,6 @@
+
diff --git a/tests/10-apply.test.js b/tests/10-apply.test.js index 732ed03..481b86b 100644 --- a/tests/10-apply.test.js +++ b/tests/10-apply.test.js @@ -105,6 +105,10 @@ test('@apply', () => { .custom-util { custom: stuff; } + + .foo { + @apply animate-spin; + } } ` From ff28f2ffc6d5b028e1cd52276e5571a4f79bb880 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 24 Mar 2021 08:37:19 -0400 Subject: [PATCH 3/3] =?UTF-8?q?Don=E2=80=99t=20add=20important=20to=20keyf?= =?UTF-8?q?rame=20declarations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/expandApplyAtRules.js | 12 ++++++------ tests/10-apply.test.css | 8 ++++++++ tests/10-apply.test.html | 1 + tests/10-apply.test.js | 4 ++++ 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js index 1097820..d6b2eee 100644 --- a/src/lib/expandApplyAtRules.js +++ b/src/lib/expandApplyAtRules.js @@ -119,15 +119,15 @@ function expandApplyAtRules(context) { let root = postcss.root({ nodes: [node.clone()] }) let canRewriteSelector = node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes'); - root.walkRules((rule) => { - if (canRewriteSelector) { + if (canRewriteSelector) { + root.walkRules((rule) => { rule.selector = replaceSelector(apply.parent.selector, rule.selector, applyCandidate) - } - rule.walkDecls((d) => { - d.important = important + rule.walkDecls((d) => { + d.important = important + }) }) - }) + } siblings.push([meta, root.nodes[0]]) } diff --git a/tests/10-apply.test.css b/tests/10-apply.test.css index 934ac86..cccd8b4 100644 --- a/tests/10-apply.test.css +++ b/tests/10-apply.test.css @@ -273,3 +273,11 @@ .foo { animation: spin 1s linear infinite; } +@keyframes pulse { + 50% { + opacity: 0.5; + } +} +.bar { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; +} diff --git a/tests/10-apply.test.html b/tests/10-apply.test.html index e118ee2..b63cc4b 100644 --- a/tests/10-apply.test.html +++ b/tests/10-apply.test.html @@ -33,5 +33,6 @@
+
diff --git a/tests/10-apply.test.js b/tests/10-apply.test.js index 481b86b..8e0c3e0 100644 --- a/tests/10-apply.test.js +++ b/tests/10-apply.test.js @@ -109,6 +109,10 @@ test('@apply', () => { .foo { @apply animate-spin; } + + .bar { + @apply animate-pulse !important; + } } `