From f9dff3b29a53648072ac36dc1c78d12ecc7cf751 Mon Sep 17 00:00:00 2001
From: mojtaba ghasemzadeh <mqtstbh@gmail.com>
Date: Sun, 14 Aug 2022 13:52:51 +0430
Subject: [PATCH 1/3] perf(transformer-compile-class): generate same class for
 different orders of classes

---
 packages/transformer-compile-class/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/transformer-compile-class/src/index.ts b/packages/transformer-compile-class/src/index.ts
index 682a5f1fa0..780d7692c9 100644
--- a/packages/transformer-compile-class/src/index.ts
+++ b/packages/transformer-compile-class/src/index.ts
@@ -61,6 +61,7 @@ export default function transformerCompileClass(options: CompileClassOptions = {
           body = known.join(' ')
         }
         if (body) {
+          body = body.split(/\s+/).sort().join(' ')
           const hash = hashFn(body)
           const className = `${classPrefix}${hash}`
           replacements.unshift(className)

From 4b2ed665a14b473ceb13e269a4728dee0cc4bcf7 Mon Sep 17 00:00:00 2001
From: mojtaba ghasemzadeh <mqtstbh@gmail.com>
Date: Mon, 15 Aug 2022 09:48:07 +0430
Subject: [PATCH 2/3] test(transformer-compile-class): fix test file

---
 test/transformer-compile-class.test.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts
index 3b2f03811f..dde0005eb9 100644
--- a/test/transformer-compile-class.test.ts
+++ b/test/transformer-compile-class.test.ts
@@ -36,21 +36,21 @@ describe('transformer-compile-class', () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "code": "
-          <div class=\\"uno-qe05lz\\">
+          <div class=\\"uno-pe1esh\\">
           <div class=\\"foo bar\\">
 
-          <div class=\\"uno-qlmcrp foo\\">
-            <div class=\\"uno-0qw2gr\\"/>
+          <div class=\\"uno-cbgd7b foo\\">
+            <div class=\\"uno-s9yxer\\"/>
           </div>
           ",
         "css": "/* layer: shortcuts */
-      .uno-qe05lz{--un-scale-x:0.05;--un-scale-y:0.05;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));border-width:1px;border-style:solid;--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;}
-      .dark .uno-qe05lz:hover{--un-bg-opacity:1;background-color:rgba(34,197,94,var(--un-bg-opacity));}
-      .uno-qlmcrp{text-align:center;}
-      .uno-0qw2gr{font-size:0.875rem;line-height:1.25rem;font-weight:700;}
-      .uno-0qw2gr:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+      .uno-pe1esh{--un-scale-x:0.05;--un-scale-y:0.05;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));border-width:1px;border-style:solid;--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;}
+      .dark .uno-pe1esh:hover{--un-bg-opacity:1;background-color:rgba(34,197,94,var(--un-bg-opacity));}
+      .uno-cbgd7b{text-align:center;}
+      .uno-s9yxer{font-size:0.875rem;line-height:1.25rem;font-weight:700;}
+      .uno-s9yxer:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
       @media (min-width: 640px){
-      .uno-qlmcrp{text-align:left;}
+      .uno-cbgd7b{text-align:left;}
       }",
       }
     `)

From e4808b1b83ad7d0a69dc4214c0e32268c585c303 Mon Sep 17 00:00:00 2001
From: mojtaba ghasemzadeh <mqtstbh@gmail.com>
Date: Mon, 15 Aug 2022 14:59:20 +0430
Subject: [PATCH 3/3] test(transformer-compile-class): test different sequence
 of same utility classes

---
 test/transformer-compile-class.test.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts
index dde0005eb9..e2f10f498c 100644
--- a/test/transformer-compile-class.test.ts
+++ b/test/transformer-compile-class.test.ts
@@ -55,4 +55,12 @@ describe('transformer-compile-class', () => {
       }
     `)
   })
+
+  test('different sequence of utility classes', async () => {
+    const order1 = await transform('<div class=":uno: flex bg-blue-400 my-awesome-class font-bold"></div>')
+    const order2 = await transform('<div class=":uno: my-awesome-class bg-blue-400  font-bold flex"></div>')
+
+    expect(order1.css).toBe(order2.css)
+    expect(order1.code).toBe(order2.code)
+  })
 })