feat(preset-mini): Support max breakpoint (#3029)

Author: onlyfortesting

packages/preset-mini/src/_variants/breakpoints.ts

@@ -20,7 +20,7 @@ export function variantBreakpoints(): VariantObject {
       = Object.entries(resolveBreakpoints(context) ?? {}).map(([point, size], idx) => [point, size, idx])
       for (const [point, size, idx] of variantEntries) {
         if (!regexCache[point])
-          regexCache[point] = new RegExp(`^((?:([al]t-|[<~]))?${point}(?:${context.generator.config.separators.join('|')}))`)
+          regexCache[point] = new RegExp(`^((?:([al]t-|[<~]|max-))?${point}(?:${context.generator.config.separators.join('|')}))`)
 
         const match = matcher.match(regexCache[point])
         if (!match)
@@ -35,7 +35,7 @@ export function variantBreakpoints(): VariantObject {
         if (m === 'container')
           continue
 
-        const isLtPrefix = pre.startsWith('lt-') || pre.startsWith('<')
+        const isLtPrefix = pre.startsWith('lt-') || pre.startsWith('<') || pre.startsWith('max-')
         const isAtPrefix = pre.startsWith('at-') || pre.startsWith('~')
 
         let order = 1000 // parseInt(size)
@@ -77,6 +77,6 @@ export function variantBreakpoints(): VariantObject {
       }
     },
     multiPass: true,
-    autocomplete: '(at-|lt-|)$breakpoints:',
+    autocomplete: '(at-|lt-|max-|)$breakpoints:',
   }
 }

test/assets/output/preset-mini-targets.css

@@ -1019,7 +1019,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 }
 @media (max-width: 639.9px){
 .\<sm\:m1,
-.lt-sm\:m1{margin:0.25rem;}
+.lt-sm\:m1,
+.max-sm\:m1{margin:0.25rem;}
 }
 @media (max-width: 1023.9px){@media (min-width: 640px){
 .sm\:lt-lg\:p-10{padding:2.5rem;}
@@ -1046,4 +1047,4 @@ unocss .scope-\[unocss\]\:block{display:block;}
 /* layer: uno css */
 .uno-layer-\[uno_css\]\:block{display:block;}
 /* layer: uno_css */
-.uno-layer-uno_css\:block{display:block;}
+.uno-layer-uno_css\:block{display:block;}

test/assets/preset-mini-targets.ts

@@ -948,6 +948,7 @@ export const presetMiniTargets: string[] = [
   'hover:p-5',
   'lt-lg:m2',
   'lt-sm:m1',
+  'max-sm:m1',
   '<sm:m1',
   'md:!hidden',
   'md:m-1',