feat(preset-mini,preset-wind): add @supports variant

packages/preset-mini/src/_theme/types.ts

@@ -43,6 +43,8 @@ export interface Theme {
   easing?: Record<string, string>
   // media queries
   media?: Record<string, string>
+  // supports queries
+  supports?: Record<string, string>
   // animation
   animation?: ThemeAnimation
   // grids

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

@@ -9,6 +9,7 @@ import { variantCssLayer, variantInternalLayer, variantScope, variantSelector, v
 import { variantNegative } from './negative'
 import { variantImportant } from './important'
 import { variantCustomMedia, variantPrint } from './media'
+import { variantSupports } from './supports'
 import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
 
 export const variants = (options: PresetMiniOptions): Variant<Theme>[] => [
@@ -19,6 +20,7 @@ export const variants = (options: PresetMiniOptions): Variant<Theme>[] => [
   variantInternalLayer,
   variantNegative,
   variantImportant,
+  variantSupports,
   variantPrint,
   variantCustomMedia,
   variantBreakpoints,

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

@@ -2,6 +2,7 @@
 export * from './breakpoints'
 export * from './combinators'
 export * from './media'
+export * from './supports'
 export * from './dark'
 export * from './default'
 export * from './directions'

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

@@ -0,0 +1,34 @@
+import type { VariantContext, VariantObject } from '@unocss/core'
+import type { Theme } from '../theme'
+import { getComponent, handler as h } from '../utils'
+
+export const variantSupports: VariantObject = {
+  name: 'supports',
+  match(matcher, { theme }: VariantContext<Theme>) {
+    if (matcher.startsWith('supports-')) {
+      const matcherValue = matcher.substring(9)
+
+      const [match, rest] = getComponent(matcherValue, '[', ']', ':') ?? []
+      if (!(match && rest && rest !== ''))
+        return
+
+      let supports = h.bracket(match) ?? ''
+      if (supports === '') {
+        const themeValue = theme.supports?.[match]
+        if (themeValue)
+          supports = themeValue
+      }
+
+      if (supports) {
+        return {
+          matcher: rest,
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ''}@supports ${supports}`,
+          }),
+        }
+      }
+    }
+  },
+  multiPass: true,
+}

packages/preset-wind/src/theme.ts

@@ -182,6 +182,9 @@ export const theme: Theme = {
     mouse: '(hover) and (pointer: fine)',
     hd_color: '(dynamic-range: high)',
   },
+  supports: {
+    grid: '(display: grid)',
+  },
   preflightBase: {
     ...transformBase,
     ...touchActionBase,

test/__snapshots__/preset-mini.test.ts.snap

@@ -917,6 +917,9 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .print\\\\:block{display:block;}
 .print\\\\:link\\\\:\\\\!underline:link{text-decoration-line:underline !important;}
 }
+@supports (display: grid){
+.supports-\\\\[\\\\(display\\\\:_grid\\\\)\\\\]\\\\:block{display:block;}
+}
 @supports(display:grid){
 .\\\\[\\\\@supports\\\\(display\\\\:grid\\\\)\\\\]\\\\:bg-red\\\\/33{background-color:rgba(248,113,113,0.33);}
 *+.\\\\[\\\\@supports\\\\(display\\\\:grid\\\\)\\\\]\\\\:\\\\[\\\\*\\\\+\\\\&\\\\]\\\\:bg-red\\\\/34{background-color:rgba(248,113,113,0.34);}

test/__snapshots__/preset-wind.test.ts.snap

@@ -419,5 +419,8 @@ exports[`preset-wind > targets 1`] = `
 }
 @media (prefers-reduced-motion: reduce){
 .motion-reduce\\\\:hover\\\\:translate-0:hover{--un-translate-x:0rem;--un-translate-y:0rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+}
+@supports (display: grid){
+.supports-grid\\\\:block{display:block;}
 }"
 `;

test/assets/preset-mini-targets.ts

@@ -910,6 +910,9 @@ export const presetMiniTargets: string[] = [
   '-p-px',
   '-z-1',
 
+  // variants supports
+  'supports-[(display:_grid)]:block',
+
   // variants media
   'media-cssvar:block',
 

test/assets/preset-wind-targets.ts

@@ -366,6 +366,9 @@ export const presetWindTargets: string[] = [
   // variants combinators
   'svg:fill-red',
 
+  // variants supports: grid
+  'supports-grid:block',
+
   // variants media: contrasts, motions, orientations
   'contrast-more:bg-black',
   'uno-layer-_pre:contrast-less:bg-gray-3',