feat(preset-wind): sticky hover

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,9 @@
+import type { Variant } 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`,
+  })),
+]

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',
 ]