diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts index edd44cb56c..071feadd6f 100644 --- 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 index 9915e9c16f..e717d75d46 100644 --- 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 index f894da85f9..db2bea5960 100644 --- 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 index 5fc5975783..889c15da36 100644 --- 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", } `)