squash adjacent css nodes with the same selector

Author: RobinMalfait

src/index.test.css

@@ -11,8 +11,6 @@
 }
 .apply-test {
   margin-top: 1.5rem;
-}
-.apply-test {
   --tw-bg-opacity: 1;
   background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
 }
@@ -105,14 +103,10 @@
 }
 .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 {

src/lib/collapseAdjacentRules.js

@@ -1,8 +1,14 @@
+let types = new Set(['atrule', 'rule'])
+let comparisonMap = {
+  atrule: 'params',
+  rule: 'selector',
+}
+
 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 {