diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts index b922549a5e..edd44cb56c 100644 --- a/packages/core/src/generator/index.ts +++ b/packages/core/src/generator/index.ts @@ -394,7 +394,7 @@ export class UnoGenerator { return cssBody } - async parseUtil(input: string | VariantMatchedResult, context: RuleContext, internal = false): Promise<(ParsedUtil | RawUtil)[] | undefined> { + async parseUtil(input: string | VariantMatchedResult, context: RuleContext, internal = false, shortcutPrefix: string | undefined = undefined): Promise<(ParsedUtil | RawUtil)[] | undefined> { const [raw, processed, variantHandlers] = isString(input) ? this.matchVariants(input) : input @@ -432,10 +432,15 @@ export class UnoGenerator { // match prefix let unprefixed = processed if (meta?.prefix) { - if (!processed.startsWith(meta.prefix)) - continue - - unprefixed = processed.slice(meta.prefix.length) + if (shortcutPrefix) { + if (shortcutPrefix !== meta.prefix) + continue + } + else { + if (!processed.startsWith(meta.prefix)) + continue + unprefixed = processed.slice(meta.prefix.length) + } } // match rule @@ -555,7 +560,7 @@ export class UnoGenerator { .map(async (i) => { const result = isString(i) // rule - ? await this.parseUtil(i, context, true) as ParsedUtil[] + ? await this.parseUtil(i, context, true, meta.prefix) as ParsedUtil[] // inline CSS value in shortcut : [[Infinity, '{inline}', normalizeCSSEntries(i), undefined, []] as ParsedUtil] diff --git a/test/__snapshots__/prefix.test.ts.snap b/test/__snapshots__/prefix.test.ts.snap index f5af671697..f894da85f9 100644 --- a/test/__snapshots__/prefix.test.ts.snap +++ b/test/__snapshots__/prefix.test.ts.snap @@ -2,8 +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));} .bar-bar, -.bar-shortcut{color:bar;}" +.bar-shortcut{color:bar;} +@media (min-width: 640px){ +.foo-container{max-width:640px;} +} +@media (min-width: 768px){ +.foo-container{max-width:768px;} +} +@media (min-width: 1024px){ +.foo-container{max-width:1024px;} +} +@media (min-width: 1280px){ +.foo-container{max-width:1280px;} +} +@media (min-width: 1024px){@media (min-width: 1536px){ +.\\\\32 xl\\\\:foo-container{max-width:1024px;} +}} +@media (min-width: 1280px){@media (min-width: 1536px){ +.\\\\32 xl\\\\:foo-container{max-width:1280px;} +}} +@media (min-width: 1536px){ +.\\\\32 xl\\\\:foo-container{max-width:100%;} +.foo-container{max-width:1536px;} +} +@media (min-width: 1536px){@media (min-width: 1536px){ +.\\\\32 xl\\\\:foo-container{max-width:1536px;} +}} +@media (min-width: 640px){@media (min-width: 1536px){ +.\\\\32 xl\\\\:foo-container{max-width:640px;} +}} +@media (min-width: 768px){@media (min-width: 1536px){ +.\\\\32 xl\\\\:foo-container{max-width:768px;} +}}" `; diff --git a/test/prefix.test.ts b/test/prefix.test.ts index 0455adb6cd..5fc5975783 100644 --- a/test/prefix.test.ts +++ b/test/prefix.test.ts @@ -1,12 +1,12 @@ import { createGenerator } from '@unocss/core' import { describe, expect, test } from 'vitest' -import presetMini from '@unocss/preset-mini' +import presetUno from '@unocss/preset-uno' describe('prefix', () => { test('preset prefix', async () => { const uno = createGenerator({ presets: [ - presetMini({ prefix: 'foo-' }), + presetUno({ prefix: 'foo-' }), ], rules: [ ['bar', { color: 'bar' }, { prefix: 'bar-' }], @@ -26,6 +26,8 @@ describe('prefix', () => { 'hover:foo-p4', 'bar-bar', 'bar-shortcut', + 'foo-container', + '2xl:foo-container', ]), { preflights: false }) expect(matched).toMatchInlineSnapshot(` @@ -34,6 +36,8 @@ describe('prefix', () => { "foo-text-red", "hover:foo-p4", "bar-shortcut", + "foo-container", + "2xl:foo-container", } `)