simplify the @apply implementation

Creating multiple siblings for each utility guarantees the order. We can
optimize this by squashing adjacent rules with the same selector.

Author: RobinMalfait

src/index.test.css

@@ -11,6 +11,8 @@
 }
 .apply-test {
   margin-top: 1.5rem;
+}
+.apply-test {
   --tw-bg-opacity: 1;
   background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
 }
@@ -32,8 +34,6 @@
 }
 .apply-components {
   width: 100%;
-  margin-left: auto;
-  margin-right: auto;
 }
 @media (min-width: 640px) {
   .apply-components {
@@ -60,6 +60,10 @@
     max-width: 1536px;
   }
 }
+.apply-components {
+  margin-left: auto;
+  margin-right: auto;
+}
 .drop-empty-rules:hover {
   font-weight: 700;
 }
@@ -99,6 +103,26 @@
     font-weight: 400;
   }
 }
+.apply-order-a {
+  margin: 1.25rem;
+}
+.apply-order-a {
+  margin-top: 1.5rem;
+}
+.apply-order-b {
+  margin: 1.25rem;
+}
+.apply-order-b {
+  margin-top: 1.5rem;
+}
+.dark .dark\:group:hover .apply-dark-group-example-a {
+  --tw-bg-opacity: 1;
+  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
+}
+.group:hover .group-hover\:dark .apply-dark-group-example-b {
+  --tw-bg-opacity: 1;
+  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
+}
 @media (min-width: 640px) {
   @media (prefers-reduced-motion: no-preference) {
     .group:active .crazy-example:focus {

src/index.test.js

@@ -104,6 +104,18 @@ test('it works', () => {
       @apply font-bold hover:font-normal;
     }
   }
+  .apply-order-a {
+    @apply m-5 mt-6;
+  }
+  .apply-order-b {
+    @apply mt-6 m-5;
+  }
+  .apply-dark-group-example-a {
+    @apply dark:group-hover:bg-green-500;
+  }
+  .apply-dark-group-example-b {
+    @apply group-hover:dark:bg-green-500;
+  }
   .crazy-example {
     @apply sm:motion-safe:group-active:focus:opacity-10;
   }

src/lib/expandApplyAtRules.js

@@ -69,37 +69,21 @@ function expandApplyAtRules(context) {
 
           let [layerName, rules] = context.classCache.get(applyCandidate)
           for (let [sort, [selector, rule]] of rules) {
-            // Nested rules...
-            if (!isPlainObject(rule)) {
-              siblings.push([
-                sort,
-                toPostCssNode(
-                  [selector, updateSelectors(rule, apply, applyCandidate)],
-                  context.postCssNodeCache
-                ),
-              ])
-            } else {
-              let appliedSelector = replaceSelector(apply.parent.selector, selector, applyCandidate)
-
-              if (appliedSelector !== apply.parent.selector) {
-                siblings.push([
-                  sort,
-                  toPostCssNode([appliedSelector, rule], context.postCssNodeCache),
-                ])
-                continue
-              }
-
-              // Add declarations directly
-              for (let property in rule) {
-                apply.before(postcss.decl({ prop: property, value: rule[property] }))
-              }
-            }
+            siblings.push([
+              sort,
+              toPostCssNode(
+                !isPlainObject(rule)
+                  ? [selector, updateSelectors(rule, apply, applyCandidate)]
+                  : [replaceSelector(apply.parent.selector, selector, applyCandidate), rule],
+                context.postCssNodeCache
+              ),
+            ])
           }
         }
 
         // Inject the rules, sorted, correctly
         for (let [sort, sibling] of siblings.sort(([a], [z]) => bigSign(z - a))) {
-          // `apply.parent` is refering to the node at `.abc` in: .abc { @apply mt-2 }
+          // `apply.parent` is referring to the node at `.abc` in: .abc { @apply mt-2 }
           apply.parent.after(sibling)
         }