feat(preset-mini): pseudo-class function for custom arguments

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

@@ -7,6 +7,7 @@ import { variantStickyHover } from './experimental'
 import { variantContrasts, variantMotions, variantOrientations } from './media'
 import { variantSpaceAndDivide } from './misc'
 import { placeholderModifier } from './placeholder'
+import { variantHasPseudo } from './has'
 
 export function variants(options: PresetWindOptions): Variant<Theme>[] {
  return [
@@ -19,5 +20,6 @@ export function variants(options: PresetWindOptions): Variant<Theme>[] {
  ...variantCombinators,
  ...variantColorsScheme,
  ...variantStickyHover,
+ ...variantHasPseudo,
  ]
 }

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

@@ -0,0 +1,74 @@
+import type { Variant } from '@unocss/core'
+import { h, variantGetBracket } from '@unocss/preset-mini/utils'
+
+export const variantHasPseudo: Variant[] = [
+ {
+ name: 'has',
+ match(input, ctx) {
+ const body = variantGetBracket('has-', input, ctx.generator.config.separators)
+ if (!body)
+ return
+
+ const [match, reset] = body
+ const bracketValue = h.bracket(match)
+ if (!bracketValue)
+ return
+
+ if (match) {
+ return {
+ matcher: reset,
+ handle: (input, next) => next({
+ ...input,
+ selector: `${input.selector || ''}:has(${bracketValue})`,
+ }),
+ }
+ }
+ },
+ },
+ {
+ name: 'group-has',
+ match(input, ctx) {
+ const body = variantGetBracket('group-has-', input, ctx.generator.config.separators)
+ if (!body)
+ return
+
+ const [match, reset] = body
+ const bracketValue = h.bracket(match)
+ if (!bracketValue)
+ return
+
+ if (match) {
+ return {
+ matcher: reset,
+ handle: (input, next) => next({
+ ...input,
+ selector: `.group:has(${bracketValue}) ${input.selector || ''}`,
+ }),
+ }
+ }
+ },
+ },
+ {
+ name: 'peer-has',
+ match(input, ctx) {
+ const body = variantGetBracket('peer-has-', input, ctx.generator.config.separators)
+ if (!body)
+ return
+
+ const [match, reset] = body
+ const bracketValue = h.bracket(match)
+ if (!bracketValue)
+ return
+
+ if (match) {
+ return {
+ matcher: reset,
+ handle: (input, next) => next({
+ ...input,
+ selector: `.peer:has(${bracketValue}) ~ ${input.selector || ''}`,
+ }),
+ }
+ }
+ },
+ },
+]

test/assets/preset-wind-targets.ts

@@ -403,6 +403,11 @@ export const presetWindTargets: string[] = [
  '@hover-text-red',
  '@hover:[[open]_&]:text-blue',
 
+ // variants :has pseudo-class
+ 'has-[[data-potato]]:text-blue',
+ 'group-has-[[data-potato]]:text-white',
+ 'peer-has-[[data-potato]]:text-black',
+
  // variants - multiple parents
  '@dark:contrast-more:p-10',