From 11bab861ec8214f53d4d958398a4cb50f71e085e Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 2 May 2024 14:53:40 +0200
Subject: [PATCH] fix: fix sorting of buckets in sortCSSRules() (#550)

---
 ...ugin-6ce6c02b-7add-4430-8e51-b247db585301.json |  7 +++++++
 .../src/sortCSSRules.test.ts                      | 15 ++++++++++++---
 .../webpack-extraction-plugin/src/sortCSSRules.ts |  2 +-
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 change/@griffel-webpack-extraction-plugin-6ce6c02b-7add-4430-8e51-b247db585301.json

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
new file mode 100644
index 000000000..6d4e82476
--- /dev/null
+++ 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
index ac91867b1..f3f5569af 100644
--- 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
index 5a93b309f..ffa12b496 100644
--- 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('');