fix(core): slice prefix correctly in expandShortcut (#1813)

unocss · Oct 31, 2022 · 420c6e9 · 420c6e9
1 parent 4d0b1fd
commit 420c6e9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 24 deletions.
diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts
@@ -502,7 +502,12 @@ export class UnoGenerator {
     let meta: RuleMeta | undefined
     let result: string | ShortcutValue[] | undefined
     for (const s of this.config.shortcuts) {
-      const unprefixed = s[2]?.prefix ? input.slice(s[2].prefix.length) : input
+      let unprefixed = input
+      if (s[2]?.prefix) {
+        if (!input.startsWith(s[2].prefix))
+          continue
+        unprefixed = input.slice(s[2].prefix.length)
+      }
       if (isStaticShortcut(s)) {
         if (s[0] === unprefixed) {
           meta = meta || s[2]

diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
@@ -219,6 +219,7 @@ declare global {
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']

diff --git a/test/__snapshots__/prefix.test.ts.snap b/test/__snapshots__/prefix.test.ts.snap
@@ -2,40 +2,40 @@
 
 exports[`prefix > preset prefix 2`] = `
 "/* layer: default */
-.foo-container{max-width:100%;}
-.hover\\\\:foo-p4:hover{padding:1rem;}
-.foo-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+.h-container{max-width:100%;}
+.hover\\\\:h-p4:hover{padding:1rem;}
+.h-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 .bar-bar,
 .bar-shortcut{color:bar;}
 @media (min-width: 640px){
-.foo-container{max-width:640px;}
+.h-container{max-width:640px;}
 }
 @media (min-width: 768px){
-.foo-container{max-width:768px;}
+.h-container{max-width:768px;}
 }
 @media (min-width: 1024px){
-.foo-container{max-width:1024px;}
+.h-container{max-width:1024px;}
 }
 @media (min-width: 1280px){
-.foo-container{max-width:1280px;}
+.h-container{max-width:1280px;}
 }
 @media (min-width: 1024px){@media (min-width: 1536px){
-.\\\\32 xl\\\\:foo-container{max-width:1024px;}
+.\\\\32 xl\\\\:h-container{max-width:1024px;}
 }}
 @media (min-width: 1280px){@media (min-width: 1536px){
-.\\\\32 xl\\\\:foo-container{max-width:1280px;}
+.\\\\32 xl\\\\:h-container{max-width:1280px;}
 }}
 @media (min-width: 1536px){
-.\\\\32 xl\\\\:foo-container{max-width:100%;}
-.foo-container{max-width:1536px;}
+.\\\\32 xl\\\\:h-container{max-width:100%;}
+.h-container{max-width:1536px;}
 }
 @media (min-width: 1536px){@media (min-width: 1536px){
-.\\\\32 xl\\\\:foo-container{max-width:1536px;}
+.\\\\32 xl\\\\:h-container{max-width:1536px;}
 }}
 @media (min-width: 640px){@media (min-width: 1536px){
-.\\\\32 xl\\\\:foo-container{max-width:640px;}
+.\\\\32 xl\\\\:h-container{max-width:640px;}
 }}
 @media (min-width: 768px){@media (min-width: 1536px){
-.\\\\32 xl\\\\:foo-container{max-width:768px;}
+.\\\\32 xl\\\\:h-container{max-width:768px;}
 }}"
 `;
diff --git a/test/prefix.test.ts b/test/prefix.test.ts
@@ -6,7 +6,7 @@ describe('prefix', () => {
   test('preset prefix', async () => {
     const uno = createGenerator({
       presets: [
-        presetUno({ prefix: 'foo-' }),
+        presetUno({ prefix: 'h-' }),
       ],
       rules: [
         ['bar', { color: 'bar' }, { prefix: 'bar-' }],
@@ -22,22 +22,22 @@ describe('prefix', () => {
       'bar',
       'shortcut',
       // expected
-      'foo-text-red',
-      'hover:foo-p4',
+      'h-text-red',
+      'hover:h-p4',
       'bar-bar',
       'bar-shortcut',
-      'foo-container',
-      '2xl:foo-container',
+      'h-container',
+      '2xl:h-container',
     ]), { preflights: false })
 
     expect(matched).toMatchInlineSnapshot(`
       Set {
         "bar-bar",
-        "foo-text-red",
-        "hover:foo-p4",
+        "h-text-red",
+        "hover:h-p4",
         "bar-shortcut",
-        "foo-container",
-        "2xl:foo-container",
+        "h-container",
+        "2xl:h-container",
       }
     `)