perf(transformer-compile-class): generate same class for different se…

…quence of same utilities (#1416)
unocss · Aug 15, 2022 · 20e8ebb · 20e8ebb
1 parent 7684f7a
commit 20e8ebb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git 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)

diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts
@@ -36,23 +36,31 @@ 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;}
       }",
       }
     `)
   })
+
+  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)
+  })
 })