docs and warn

packages/preset-wind/README.md

@@ -39,6 +39,28 @@ This preset uses `_` instead of `,` for respecting space in bracket syntax.
 
 since some CSS rules require `,` as parts of the value, e.g. `grid-cols-[repeat(3,auto)]`
 
+## Experimental Features
+
+This preset includes experimental feature that may be changed in breaking ways at any time.
+
+### Media Hover
+
+Media hover addresses the [sticky hover](https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/) problem where tapping target that includes hover style on mobile will persist that hover style until tapping elsewhere.
+
+Since the regular `:hover` style most probably used so widely, the variant uses `@hover` syntax to distinguish it from the regular `hover` pseudo.
+
+Example: `@hover-text-red`
+
+Output:
+```css
+@media (hover: hover) and (pointer: fine) {
+  .\@hover-text-red:hover {
+    --un-text-opacity: 1;
+    color: rgba(248, 113, 113, var(--un-text-opacity));
+  }
+}
+```
+
 ## License
 
 MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)

packages/preset-wind/src/variants/experimental.ts

@@ -1,9 +1,13 @@
 import type { Variant } from '@unocss/core'
+import { warnOnce } from '@unocss/core'
 import { variantMatcher } from '@unocss/preset-mini/utils'
 
 export const variantStickyHover: Variant[] = [
-  variantMatcher('@hover', input => ({
-    parent: `${input.parent ? `${input.parent} $$ ` : ''}@media (hover: hover) and (pointer: fine)`,
-    selector: `${input.selector || ''}:hover`,
-  })),
+  variantMatcher('@hover', (input) => {
+    warnOnce('The @hover variant is experimental and may be changed in breaking ways at any time.')
+    return {
+      parent: `${input.parent ? `${input.parent} $$ ` : ''}@media (hover: hover) and (pointer: fine)`,
+      selector: `${input.selector || ''}:hover`,
+    }
+  }),
 ]