fix(core): shortcuts ordering

unocss · Jan 24, 2023 · d1e3e67 · d1e3e67 · leomp12 · Jan 30, 2023
1 parent 507303b
commit d1e3e67
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',