feat(preset-wind): sticky hover

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/default.ts

@@ -3,6 +3,7 @@ import { variants as miniVariants } from '@unocss/preset-mini/variants'
 import type { PresetWindOptions, Theme } from '..'
 import { variantCombinators } from './combinators'
 import { variantColorsScheme } from './dark'
+import { variantStickyHover } from './experimental'
 import { variantContrasts, variantMotions, variantOrientations } from './media'
 import { variantSpaceAndDivide } from './misc'
 import { placeholderModifier } from './placeholder'
@@ -16,4 +17,5 @@ export const variants = (options: PresetWindOptions): Variant<Theme>[] => [
   ...variantMotions,
   ...variantCombinators,
   ...variantColorsScheme,
+  ...variantStickyHover,
 ]

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

@@ -0,0 +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) => {
+    warnOnce('The @hover variant is experimental and may not follow semver.')
+    return {
+      parent: `${input.parent ? `${input.parent} $$ ` : ''}@media (hover: hover) and (pointer: fine)`,
+      selector: `${input.selector || ''}:hover`,
+    }
+  }),
+]

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

@@ -2,6 +2,7 @@
 export * from './combinators'
 export * from './dark'
 export * from './default'
+export * from './experimental'
 export * from './media'
 export * from './misc'
 export * from './placeholder'

test/__snapshots__/autocomplete.test.ts.snap

@@ -54,7 +54,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "origin-": "origin-b origin-bc origin-bl origin-bottom origin-bottom-center origin-bottom-left origin-bottom-right origin-br origin-c origin-cb",
   "outline-": "outline-amber outline-auto outline-black outline-blue outline-bluegray outline-blueGray outline-coolgray outline-coolGray outline-current outline-cyan",
   "outline-offset-": "outline-offset-0 outline-offset-1 outline-offset-2 outline-offset-3 outline-offset-4 outline-offset-5 outline-offset-6 outline-offset-8 outline-offset-10 outline-offset-12",
-  "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@light: placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction placeholder-animate-duration placeholder-animate-inherit",
+  "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@hover: placeholder-@light: placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction placeholder-animate-duration",
   "scroll-": "scroll-auto scroll-block scroll-inherit scroll-initial scroll-inline scroll-m scroll-ma scroll-p scroll-pa scroll-revert",
   "scroll-m-": "scroll-m-2xl scroll-m-3xl scroll-m-4xl scroll-m-5xl scroll-m-6xl scroll-m-7xl scroll-m-8xl scroll-m-9xl scroll-m-b scroll-m-be",
   "shadow-": "shadow-2xl shadow-amber shadow-black shadow-blue shadow-bluegray shadow-blueGray shadow-coolgray shadow-coolGray shadow-current shadow-cyan",

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

@@ -399,6 +399,10 @@ exports[`preset-wind > targets 1`] = `
 .backdrop-filter-revert{-webkit-backdrop-filter:revert;backdrop-filter:revert;}
 .placeholder-inherit::placeholder{color:inherit;}
 .placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));}
+@media (hover: hover) and (pointer: fine){
+.\\\\@hover-text-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+[open] .\\\\@hover\\\\:\\\\[\\\\[open\\\\]_\\\\&\\\\]\\\\:text-blue:hover{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
+}
 @media (orientation: landscape){
 .landscape\\\\:hidden{display:none;}
 }

test/assets/preset-wind-targets.ts

@@ -391,6 +391,10 @@ export const presetWindTargets: string[] = [
   '-scroll-p-px',
   '-space-x-4',
 
+  // variants experimental
+  '@hover-text-red',
+  '@hover:[[open]_&]:text-blue',
+
   // variants - multiple parents
   '@dark:contrast-more:p-10',
 ]