fix(core): sort original selector to properly sort shortcuts (#2223)

unocss · Feb 22, 2023 · 022a76f · 022a76f
1 parent 092ce4c
commit 022a76f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts
@@ -214,7 +214,14 @@ export class UnoGenerator<Theme extends {} = {}> {
           const size = items.length
           const sorted: PreparedRule[] = items
             .filter(i => (i[4]?.layer || LAYER_DEFAULT) === layer)
-            .sort((a, b) => a[0] - b[0] || (a[4]?.sort || 0) - (b[4]?.sort || 0) || a[1]?.localeCompare(b[1] || '') || a[2]?.localeCompare(b[2] || '') || 0)
+            .sort((a, b) =>
+              a[0] - b[0] // rule index
+              || (a[4]?.sort || 0) - (b[4]?.sort || 0) // sort context
+              || a[5]?.currentSelector?.localeCompare(b[5]?.currentSelector ?? '') // shortcuts
+              || a[1]?.localeCompare(b[1] || '') // selector
+              || a[2]?.localeCompare(b[2] || '') // body
+              || 0,
+            )
             .map(([, selector, body,, meta,, variantNoMerge]) => {
               const scopedSelector = selector ? applyScope(selector, scope) : selector
               return [

diff --git a/test/__snapshots__/layer.test.ts.snap b/test/__snapshots__/layer.test.ts.snap
@@ -10,8 +10,8 @@ exports[`layers > static 1`] = `
 /* layer: c */
 .c5{name:5;}
 /* layer: d */
-/* RAW 3 */
 /* RAW 4 */
+/* RAW 3 */
 /* layer: s */
 .abcd{name:bar1;name:bar2;name:2;}"
 `;
diff --git a/test/__snapshots__/shortcuts.test.ts.snap b/test/__snapshots__/shortcuts.test.ts.snap
@@ -82,6 +82,12 @@ exports[`shortcuts > shortcut of nested pseudo 1`] = `
 .hover\\\\:btn3:hover:hover{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;}"
 `;
 
+exports[`shortcuts > shortcut order 1`] = `
+"/* layer: shortcuts */
+.test:focus{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
+.test-last:focus{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}"
+`;
+
 exports[`shortcuts > shortcut with inline body 1`] = `
 "/* layer: shortcuts */
 .hover\\\\:shortcut-inline-body:hover,

diff --git a/test/shortcuts.test.ts b/test/shortcuts.test.ts
@@ -31,6 +31,10 @@ describe('shortcuts', () => {
       ['loading', 'animate-spin duration-1000'],
       ['shortcut-inline-body', ['p2', { margin: '3px' }]],
       [/^shortcut-inline-dynamic-(\d)$/, ([,d]) => [`p${d}`, { margin: `${d}px` }]],
+      {
+        'test': 'focus:text-green',
+        'test-last': 'focus:text-blue',
+      },
     ],
     presets: [
       presetUno(),
@@ -122,4 +126,11 @@ describe('shortcuts', () => {
     `, { preflights: false })
     expect(css).toMatchSnapshot()
   })
+
+  test('shortcut order', async () => {
+    const { css } = await uno.generate(`
+      test test-last
+    `, { preflights: false })
+    expect(css).toMatchSnapshot()
+  })
 })