From 0c54a4dc5a3955a9e2c3bb32e728831558504a1d Mon Sep 17 00:00:00 2001 From: Saya Date: Sun, 9 Oct 2022 13:46:33 +0800 Subject: [PATCH] feat(preset-wind): sticky hover --- packages/preset-wind/src/variants/default.ts | 2 ++ packages/preset-wind/src/variants/experimental.ts | 9 +++++++++ packages/preset-wind/src/variants/index.ts | 1 + test/__snapshots__/autocomplete.test.ts.snap | 2 +- test/__snapshots__/preset-wind.test.ts.snap | 4 ++++ test/assets/preset-wind-targets.ts | 4 ++++ 6 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 packages/preset-wind/src/variants/experimental.ts diff --git a/packages/preset-wind/src/variants/default.ts b/packages/preset-wind/src/variants/default.ts index 2fe246cb1a..0b3a10325b 100644 --- a/packages/preset-wind/src/variants/default.ts +++ b/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[] => [ ...variantMotions, ...variantCombinators, ...variantColorsScheme, + ...variantStickyHover, ] diff --git a/packages/preset-wind/src/variants/experimental.ts b/packages/preset-wind/src/variants/experimental.ts new file mode 100644 index 0000000000..3d5a836b95 --- /dev/null +++ b/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`, + })), +] diff --git a/packages/preset-wind/src/variants/index.ts b/packages/preset-wind/src/variants/index.ts index 0e11b3b6f2..0a3ce78355 100644 --- a/packages/preset-wind/src/variants/index.ts +++ b/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' diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index 0ae2e03b42..2906c58ef0 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/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", diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 6791c5e78e..07303cbdf5 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/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;} } diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts index 5f844fbc09..d0ffcd0456 100644 --- a/test/assets/preset-wind-targets.ts +++ b/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', ]