Apply part 2

src/index.test.css

@@ -32,8 +32,6 @@
 }
 .apply-components {
   width: 100%;
-  margin-left: auto;
-  margin-right: auto;
 }
 @media (min-width: 640px) {
   .apply-components {
@@ -60,6 +58,10 @@
     max-width: 1536px;
   }
 }
+.apply-components {
+  margin-left: auto;
+  margin-right: auto;
+}
 .drop-empty-rules:hover {
   font-weight: 700;
 }
@@ -99,6 +101,22 @@
     font-weight: 400;
   }
 }
+.apply-order-a {
+  margin: 1.25rem;
+  margin-top: 1.5rem;
+}
+.apply-order-b {
+  margin: 1.25rem;
+  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

@@ -110,6 +110,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/collapseAdjacentRules.js

@@ -1,8 +1,14 @@
+let comparisonMap = {
+  atrule: 'params',
+  rule: 'selector',
+}
+let types = new Set(Object.keys(comparisonMap))
+
 function collapseAdjacentRules(context) {
   return (root) => {
     let currentRule = null
     root.each((node) => {
-      if (node.type !== 'atrule') {
+      if (!types.has(node.type)) {
         currentRule = null
         return
       }
@@ -12,7 +18,8 @@ function collapseAdjacentRules(context) {
         return
       }
 
-      if (node.params === currentRule.params) {
+      let property = comparisonMap[node.type]
+      if (node[property] === currentRule[property]) {
         currentRule.append(node.nodes)
         node.remove()
       } else {

src/lib/expandApplyAtRules.js

@@ -1,4 +1,3 @@
-const postcss = require('postcss')
 const generateRules = require('./generateRules')
 const { bigSign, toPostCssNode, isPlainObject } = require('./utils')
 const escape = require('tailwindcss/lib/util/escapeClassName').default
@@ -68,40 +67,22 @@ function expandApplyAtRules(context) {
           }
 
           let rules = context.classCache.get(applyCandidate)
-          for (let [{ sort, layer }, [selector, rule]] of rules) {
-            // Nested rules...
-            if (!isPlainObject(rule)) {
-              siblings.push([
-                { sort, layer },
-                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, layer },
-                  toPostCssNode([appliedSelector, rule], context.postCssNodeCache),
-                ])
-                continue
-              }
-
-              // Add declarations directly
-              for (let property in rule) {
-                apply.before(postcss.decl({ prop: property, value: rule[property] }))
-              }
-            }
+          for (let [meta, [selector, rule]] of rules) {
+            siblings.push([
+              meta,
+              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(([{ sort: a }], [{ sort: z }]) =>
-          bigSign(z - a)
-        )) {
-          // `apply.parent` is refering to the node at `.abc` in: .abc { @apply mt-2 }
+        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)
         }