fix(core): support shortcut prefix (#1807)

Co-authored-by: Chris <1633711653@qq.com>
unocss · Oct 27, 2022 · fa50490 · fa50490
1 parent f52689b
commit fa50490
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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",
       }
     `)