Compare adjacent rules ignoring whitespace

tailwindlabs · May 30, 2021 · 15642fb · 15642fb
1 parent 8845d11
commit 15642fb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/src/jit/lib/collapseAdjacentRules.js b/src/jit/lib/collapseAdjacentRules.js
@@ -22,7 +22,13 @@ export default function collapseAdjacentRules() {
 
       if (node.type === 'atrule' && node.name === 'font-face') {
         currentRule = node
-      } else if (properties.every((property) => node[property] === currentRule[property])) {
+      } else if (
+        properties.every(
+          (property) =>
+            (node[property] ?? '').replace(/\s+/g, ' ') ===
+            (currentRule[property] ?? '').replace(/\s+/g, ' ')
+        )
+      ) {
         currentRule.append(node.nodes)
         node.remove()
       } else {

diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/jit/collapse-adjacent-rules.test.css
@@ -36,6 +36,11 @@
 .font-bold {
   font-weight: 700;
 }
+.foo,
+.bar {
+  color: black;
+  font-weight: 700;
+}
 @media (min-width: 640px) {
   .sm\:text-center {
     text-align: center;

diff --git a/tests/jit/collapse-adjacent-rules.test.js b/tests/jit/collapse-adjacent-rules.test.js
@@ -47,6 +47,13 @@ test('collapse adjacent rules', () => {
               url("/fonts/ProximaNova.woff") format("woff");
       }
     }
+    .foo, .bar {
+      color: black;
+    }
+    .foo,
+    .bar {
+      font-weight: 700;
+    }
   `
 
   return run(css, config).then((result) => {