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-

Author: thecrypticace

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) {

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;

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));