diff --git a/packages/preset-wind/README.md b/packages/preset-wind/README.md index 8d17a8f506..27816f9ce9 100644 --- a/packages/preset-wind/README.md +++ b/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) diff --git a/packages/preset-wind/src/variants/experimental.ts b/packages/preset-wind/src/variants/experimental.ts index 3d5a836b95..150d481564 100644 --- a/packages/preset-wind/src/variants/experimental.ts +++ b/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`, + } + }), ]