From 9745935b1bd28b02ee7c19d9195883e8454f0810 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 2 May 2024 15:00:19 +0200
Subject: [PATCH] fix: fix sorting of buckets in sortCSSRules() (#515)

---
 e2e/nextjs/src/assets/pages/index.tsx  | 10 ++--
 e2e/nextjs/src/snapshots/output.css    | 79 ++++----------------------
 e2e/rspack/src/assets/src/Component.js | 10 ++--
 e2e/rspack/src/snapshots/output.css    | 78 ++++---------------------
 4 files changed, 34 insertions(+), 143 deletions(-)

diff --git a/e2e/nextjs/src/assets/pages/index.tsx b/e2e/nextjs/src/assets/pages/index.tsx
index 25db75e15..a6b06e71e 100644
--- a/e2e/nextjs/src/assets/pages/index.tsx
+++ b/e2e/nextjs/src/assets/pages/index.tsx
@@ -1,4 +1,4 @@
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles } from '@griffel/react';
 import Head from 'next/head';
 import * as React from 'react';
 
@@ -10,10 +10,10 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     width: '200px',
 
-    ...shorthands.border('2px', 'dashed', 'magenta'),
-    ...shorthands.borderRadius('5px'),
-    ...shorthands.gap('5px'),
-    ...shorthands.padding('10px'),
+    border: '2px dashed magenta',
+    borderRadius: '5px',
+    gap: '5px',
+    padding: '10px',
   },
 });
 
diff --git a/e2e/nextjs/src/snapshots/output.css b/e2e/nextjs/src/snapshots/output.css
index 2be23d67c..6f7a4fb01 100644
--- a/e2e/nextjs/src/snapshots/output.css
+++ b/e2e/nextjs/src/snapshots/output.css
@@ -1,3 +1,15 @@
+.frolweh {
+  border: 2px dashed #f0f;
+}
+.f4khpsj {
+  border-radius: 5px;
+}
+.f165xgdd {
+  gap: 5px;
+}
+.fbhmu18 {
+  padding: 10px;
+}
 .f22iagw {
   display: flex;
 }
@@ -7,70 +19,3 @@
 .f45u8dm {
   width: 200px;
 }
-.ftac7j7 {
-  border-top-width: 2px;
-}
-.f1w0yd9v {
-  border-right-width: 2px;
-}
-.f1h0xgbp {
-  border-left-width: 2px;
-}
-.fdwcyh7 {
-  border-bottom-width: 2px;
-}
-.fntkm7k {
-  border-top-style: dashed;
-}
-.f1oq6gla {
-  border-right-style: dashed;
-}
-.flpbmyi {
-  border-left-style: dashed;
-}
-.fjbf411 {
-  border-bottom-style: dashed;
-}
-.f1vtfyy1 {
-  border-top-color: #f0f;
-}
-.f1g7g05w {
-  border-right-color: #f0f;
-}
-.f10ibvnv {
-  border-left-color: #f0f;
-}
-.fa31z3g {
-  border-bottom-color: #f0f;
-}
-.f19gwsd {
-  border-bottom-right-radius: 5px;
-}
-.f3xzbnz {
-  border-bottom-left-radius: 5px;
-}
-.f1cxotgb {
-  border-top-right-radius: 5px;
-}
-.fxymw9n {
-  border-top-left-radius: 5px;
-}
-.fl0tjuq {
-  -moz-column-gap: 5px;
-  column-gap: 5px;
-}
-.ffmv8ov {
-  row-gap: 5px;
-}
-.f1809wu7 {
-  padding-top: 10px;
-}
-.f81rol6 {
-  padding-right: 10px;
-}
-.frdkuqy {
-  padding-left: 10px;
-}
-.f1fow5ox {
-  padding-bottom: 10px;
-}
diff --git a/e2e/rspack/src/assets/src/Component.js b/e2e/rspack/src/assets/src/Component.js
index 52ca05014..3fa3da096 100644
--- a/e2e/rspack/src/assets/src/Component.js
+++ b/e2e/rspack/src/assets/src/Component.js
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles } from '@griffel/react';
 // @ts-expect-error It's a fake module resolved via aliases
 import { colors } from 'fake-colors';
 
@@ -16,10 +16,10 @@ const useClasses = makeStyles({
     },
   },
   slot: {
-    ...shorthands.border('2px', 'dashed', 'magenta'),
-    ...shorthands.borderRadius('5px'),
-    ...shorthands.gap('5px'),
-    ...shorthands.padding('10px'),
+    border: '2px dashed magenta',
+    borderRadius: '5px',
+    gap: '5px',
+    padding: '10px',
   },
 });
 
diff --git a/e2e/rspack/src/snapshots/output.css b/e2e/rspack/src/snapshots/output.css
index 669953bbf..6d28da929 100644
--- a/e2e/rspack/src/snapshots/output.css
+++ b/e2e/rspack/src/snapshots/output.css
@@ -3,77 +3,23 @@
   flex-direction: column;
   width: 200px;
 }
-.f1bh81bl {
-  background-color: blue;
-}
-.fe3e8s9 {
-  color: red;
-}
-.ftac7j7 {
-  border-top-width: 2px;
-}
-.f1w0yd9v {
-  border-right-width: 2px;
-}
-.f1h0xgbp {
-  border-left-width: 2px;
-}
-.fdwcyh7 {
-  border-bottom-width: 2px;
-}
-.fntkm7k {
-  border-top-style: dashed;
-}
-.f1oq6gla {
-  border-right-style: dashed;
-}
-.flpbmyi {
-  border-left-style: dashed;
-}
-.fjbf411 {
-  border-bottom-style: dashed;
+.frolweh {
+  border: 2px dashed magenta;
 }
-.f1vtfyy1 {
-  border-top-color: magenta;
+.f4khpsj {
+  border-radius: 5px;
 }
-.f1g7g05w {
-  border-right-color: magenta;
+.f165xgdd {
+  gap: 5px;
 }
-.f10ibvnv {
-  border-left-color: magenta;
+.fbhmu18 {
+  padding: 10px;
 }
-.fa31z3g {
-  border-bottom-color: magenta;
-}
-.f19gwsd {
-  border-bottom-right-radius: 5px;
-}
-.f3xzbnz {
-  border-bottom-left-radius: 5px;
-}
-.f1cxotgb {
-  border-top-right-radius: 5px;
-}
-.fxymw9n {
-  border-top-left-radius: 5px;
-}
-.fl0tjuq {
-  column-gap: 5px;
-}
-.ffmv8ov {
-  row-gap: 5px;
-}
-.f1809wu7 {
-  padding-top: 10px;
-}
-.f81rol6 {
-  padding-right: 10px;
-}
-.frdkuqy {
-  padding-left: 10px;
+.f1bh81bl {
+  background-color: blue;
 }
-.f1fow5ox {
-  padding-bottom: 10px;
+.fe3e8s9 {
+  color: red;
 }
 .f1ir1d6m:focus {
   outline-offset: 5px;