From d1e3e67cd04884c50d3cd858e3304478dbc89a04 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 Jan 2023 15:48:22 +0100
Subject: [PATCH] fix(core): shortcuts ordering

---
 packages/core/src/config.ts               | 2 +-
 packages/core/src/types.ts                | 6 +++++-
 test/__snapshots__/shortcuts.test.ts.snap | 6 +++---
 test/shortcuts.test.ts                    | 1 +
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
index 92902c41f3..f95eb6ef1a 100644
--- a/packages/core/src/config.ts
+++ b/packages/core/src/config.ts
@@ -114,7 +114,7 @@ export function resolveConfig<Theme extends {} = {}>(
     preflights: mergePresets('preflights'),
     autocomplete,
     variants: mergePresets('variants').map(normalizeVariant),
-    shortcuts: resolveShortcuts(mergePresets('shortcuts')),
+    shortcuts: resolveShortcuts(mergePresets('shortcuts')).reverse(),
     extractors,
     safelist: mergePresets('safelist'),
   }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 4e679338c4..65c42210e3 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -303,7 +303,9 @@ export type ThemeExtender<T> = (theme: T) => void
 
 export interface ConfigBase<Theme extends {} = {}> {
   /**
-   * Rules to generate CSS utilities
+   * Rules to generate CSS utilities.
+   *
+   * Later entries have higher priority.
    */
   rules?: Rule<Theme>[]
 
@@ -316,6 +318,8 @@ export interface ConfigBase<Theme extends {} = {}> {
   /**
    * Similar to Windi CSS's shortcuts,
    * allows you have create new utilities by combining existing ones.
+   *
+   * Later entries have higher priority.
    */
   shortcuts?: UserShortcuts<Theme>
 
diff --git a/test/__snapshots__/shortcuts.test.ts.snap b/test/__snapshots__/shortcuts.test.ts.snap
index 03e32c61f0..32afb518ec 100644
--- a/test/__snapshots__/shortcuts.test.ts.snap
+++ b/test/__snapshots__/shortcuts.test.ts.snap
@@ -51,9 +51,9 @@ exports[`shortcuts > merge transform-duplicated 1`] = `
 
 exports[`shortcuts > nesting static 1`] = `
 "/* layer: shortcuts */
-.btn2{margin:0.75rem;margin-left:2.5rem;margin-right:2.5rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;}
-.btn{margin-right:2.5rem;}
-.btn1{margin-left:2.5rem;margin-right:2.5rem;}
+.btn2{margin:0.75rem;margin-left:2.5rem;margin-right:2rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;}
+.btn{margin-right:2rem;}
+.btn1{margin-left:2.5rem;margin-right:2rem;}
 @media (min-width: 640px){
 .btn2{margin:0.5rem;}
 }"
diff --git a/test/shortcuts.test.ts b/test/shortcuts.test.ts
index 02bbd0afb0..fd1c9cea01 100644
--- a/test/shortcuts.test.ts
+++ b/test/shortcuts.test.ts
@@ -18,6 +18,7 @@ describe('shortcuts', () => {
         btn2: 'sh1 btn1',
       },
       {
+        btn: 'mr-8',
         primary: 'text-orange-800 bg-white',
         accent: 'text-cyan-800 bg-black',
         btn3: 'primary hover:(accent underline) focus:border',