perf(preset-mini,preset-wind4): optimize support- variant

zyyv · zyyv · commit 8224a34d5bf5 · 2025-06-05T14:10:04.000+08:00
close #4704
diff --git a/packages-presets/preset-mini/src/_variants/supports.ts b/packages-presets/preset-mini/src/_variants/supports.ts
@@ -14,6 +14,10 @@ export const variantSupports: VariantObject = {
         supports = ctx.theme.supports?.[match] ?? ''
 
       if (supports) {
+        if (!(supports.startsWith('(') && supports.endsWith(')'))) {
+          supports = `(${supports})`
+        }
+
         return {
           matcher: rest,
           handle: (input, next) => next({
diff --git a/packages-presets/preset-wind4/src/variants/supports.ts b/packages-presets/preset-wind4/src/variants/supports.ts
@@ -14,6 +14,10 @@ export const variantSupports: VariantObject<Theme> = {
         supports = ctx.theme.supports?.[match] ?? ''
 
       if (supports) {
+        if (!(supports.startsWith('(') && supports.endsWith(')'))) {
+          supports = `(${supports})`
+        }
+
         return {
           matcher: rest,
           handle: (input, next) => next({
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -1134,6 +1134,9 @@ unocss .scope-\[unocss\]\:block{display:block;}
 @supports (display: grid){
 .supports-\[\(display\:_grid\)\]\:block{display:block;}
 }
+@supports (display:grid){
+.supports-\[display\:grid\]\:grid{display:grid;}
+}
 @supports(display:grid){
 .\[\@supports\(display\:grid\)\]\:bg-red\/33{background-color:rgb(248 113 113 / 0.33);}
 *+.\[\@supports\(display\:grid\)\]\:\[\*\+\&\]\:bg-red\/34{background-color:rgb(248 113 113 / 0.34);}
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -1627,6 +1627,9 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .supports-\[\(display\:_grid\)\]\:block,
 .supports-grid\:block{display:block;}
 }
+@supports (display:grid){
+.supports-\[display\:grid\]\:grid{display:grid;}
+}
 @supports(display:grid){
 .\[\@supports\(display\:grid\)\]\:bg-red\/33{background-color:color-mix(in oklch, var(--colors-red-DEFAULT) 33%, transparent) /* oklch(70.4% 0.191 22.216) */;}
 *+.\[\@supports\(display\:grid\)\]\:\[\*\+\&\]\:bg-red\/34{background-color:color-mix(in oklch, var(--colors-red-DEFAULT) 34%, transparent) /* oklch(70.4% 0.191 22.216) */;}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1117,6 +1117,7 @@ export const presetMiniTargets: string[] = [
 
   // variants supports
   'supports-[(display:_grid)]:block',
+  'supports-[display:grid]:grid',
 
   // variants media
   'media-mouse:block',
