Group selectors with same content [publish]

CHANGELOG.md

@@ -2,8 +2,11 @@
 
 ## Unreleased
 
+## 0.7.1
+
 - Sort defaults to get a stable output
 - Internally consider media & supports variant as `atRule`s so that the nesting output is closer to Tailwind
+- Group selectors with same content. Pre 0.7 this optimization was done by Lightning CSS and esbuild does not support this optimization when minifying
 
 ## 0.7.0
 

package.json

@@ -3,7 +3,7 @@
   "description": "A bundler-first & PostCSS-independent implementation of Tailwind",
   "private": true,
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "scripts": {

src/index.ts

@@ -432,6 +432,11 @@ export const initDownwindWithConfig = ({
     return { cssLines, invalidateUtils };
   };
 
+  const getLines = (match: Match) =>
+    match.type === "Rule"
+      ? toCSS(match.ruleEntry, match.important)
+      : [arbitraryPropertyMatchToLine(match)];
+
   for (const token of config.safelist) {
     const match = parse(token);
     if (!match) {
@@ -525,7 +530,8 @@ export const initDownwindWithConfig = ({
           if (diff !== 0) return diff;
           return a.token.localeCompare(b.token);
         });
-        for (const match of group.matches) {
+        let nextLines: string[] | undefined = undefined;
+        for (const [idx, match] of group.matches.entries()) {
           const meta =
             match.type === "Rule"
               ? getRuleMeta(match.ruleEntry.rule)
@@ -542,13 +548,23 @@ export const initDownwindWithConfig = ({
             match.variants,
             meta,
           );
-          utilsOutput += printBlock(
-            selector,
-            match.type === "Rule"
-              ? toCSS(match.ruleEntry, match.important)
-              : [arbitraryPropertyMatchToLine(match)],
-            indentation,
-          );
+          const lines: string[] = nextLines ?? getLines(match);
+          const nextMatch = group.matches.at(idx + 1);
+          nextLines = nextMatch ? getLines(nextMatch) : undefined;
+          if (
+            lines.length === nextLines?.length &&
+            nextLines.every((l, i) => l === lines[i])
+          ) {
+            utilsOutput += `${indentation}${selector},\n`;
+          } else {
+            utilsOutput += printBlock(
+              selector,
+              match.type === "Rule"
+                ? toCSS(match.ruleEntry, match.important)
+                : [arbitraryPropertyMatchToLine(match)],
+              indentation,
+            );
+          }
         }
 
         group.atRules.sort((a, b) => {

tests/generate.test.ts

@@ -115,6 +115,7 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
     "text-slate-200 bg-orange-300 border-blue-100 border-black/20",
     { coreRules: { textOpacity: false, borderOpacity: false } },
   ],
+  ["group-rules", "first:p-2 p-2 last:p-2 before:mt-[3px] after:mt-[3px]"],
   ["custom-config", "p-4 p-6 m-4", { theme: { padding: { 4: "4px" } } }],
   [
     "extend-config",