fix: fix sorting of buckets in sortCSSRules() (#550)

microsoft · May 2, 2024 · 11bab86 · 11bab86
1 parent e7e8d06
commit 11bab86
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/change/@griffel-webpack-extraction-plugin-6ce6c02b-7add-4430-8e51-b247db585301.json b/change/@griffel-webpack-extraction-plugin-6ce6c02b-7add-4430-8e51-b247db585301.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: fix sorting of buckets in sortCSSRules()",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts b/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts
@@ -110,8 +110,10 @@ describe('sortCSSRules', () => {
     const setA: CSSRulesByBucket = {
       d: ['.prio0 { color: orange; }', ['.prio-1 { margin: 0; }', { p: -1 }]],
       f: ['.prio0:focus { color: pink; }'],
+      h: [['.prio-1:hover { padding: 0; }', { p: -1 }]],
     };
     const setB: CSSRulesByBucket = {
+      r: ['.reset { margin: 0; padding: 0 }'],
       d: [
         ['.prio-3 { border: 3px solid red; }', { p: -3 }],
         ['.prio-2 { background: green; }', { p: -2 }],
@@ -120,24 +122,31 @@ describe('sortCSSRules', () => {
     };
 
     expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(`
+      .reset {
+        margin: 0;
+        padding: 0;
+      }
       .prio-3 {
         border: 3px solid red;
       }
       .prio-2 {
         background: green;
       }
-      .prio-1:focus {
-        padding: 0;
-      }
       .prio-1 {
         margin: 0;
       }
       .prio0 {
         color: orange;
       }
+      .prio-1:focus {
+        padding: 0;
+      }
       .prio0:focus {
         color: pink;
       }
+      .prio-1:hover {
+        padding: 0;
+      }
     `);
   });
 

diff --git a/packages/webpack-extraction-plugin/src/sortCSSRules.ts b/packages/webpack-extraction-plugin/src/sortCSSRules.ts
@@ -35,11 +35,11 @@ export function sortCSSRules(
   compareMediaQueries: GriffelRenderer['compareMediaQueries'],
 ): string {
   return getUniqueRulesFromSets(setOfCSSRules)
+    .sort((entryA, entryB) => entryA.priority - entryB.priority)
     .sort(
       (entryA, entryB) =>
         styleBucketOrderingMap[entryA.styleBucketName] - styleBucketOrderingMap[entryB.styleBucketName],
     )
-    .sort((entryA, entryB) => entryA.priority - entryB.priority)
     .sort((entryA, entryB) => compareMediaQueries(entryA.media, entryB.media))
     .map(entry => entry.cssRule)
     .join('');