feat(preset-mini): add children variant (*-{modifier}) (#3763)

unocss · May 8, 2024 · 249fe73 · 249fe73
1 parent 18df52c
commit 249fe73
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 1 deletion.
diff --git a/packages/preset-mini/src/_variants/children.ts b/packages/preset-mini/src/_variants/children.ts
@@ -0,0 +1,6 @@
+import type { Variant } from '@unocss/core'
+import { variantMatcher } from '../utils'
+
+export const variantChildren: Variant[] = [
+  variantMatcher('*', input => ({ selector: `${input.selector} > *` })),
+]
diff --git a/packages/preset-mini/src/_variants/default.ts b/packages/preset-mini/src/_variants/default.ts
@@ -14,6 +14,7 @@ import { variantPartClasses, variantPseudoClassFunctions, variantPseudoClassesAn
 import { variantAria } from './aria'
 import { variantDataAttribute, variantTaggedDataAttributes } from './data'
 import { variantContainerQuery } from './container'
+import { variantChildren } from './children'
 
 export function variants(options: PresetMiniOptions): Variant<Theme>[] {
   return [
@@ -39,6 +40,7 @@ export function variants(options: PresetMiniOptions): Variant<Theme>[] {
     ...variantColorsMediaOrClass(options),
     ...variantLanguageDirections,
     variantScope,
+    ...variantChildren,
 
     variantContainerQuery,
     variantVariables,

diff --git a/packages/preset-mini/src/_variants/index.ts b/packages/preset-mini/src/_variants/index.ts
@@ -1,6 +1,7 @@
 /* @export-submodules */
 export * from './aria'
 export * from './breakpoints'
+export * from './children'
 export * from './combinators'
 export * from './container'
 export * from './dark'

diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap
@@ -389,7 +389,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-@hover: placeholder-@light: placeholder-accent-amber placeholder-accent-black placeholder-accent-blue placeholder-accent-bluegray placeholder-accent-blueGray",
+  "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@hover: placeholder-@light: placeholder-*: placeholder-accent-amber placeholder-accent-black placeholder-accent-blue placeholder-accent-bluegray",
   "rows-": "rows-0 rows-1 rows-2 rows-3 rows-4 rows-5 rows-6 rows-8 rows-10 rows-12",
   "scale-": "scale-0 scale-10 scale-20 scale-30 scale-40 scale-50 scale-60 scale-70 scale-80 scale-90",
   "scale-x-": "scale-x-0 scale-x-10 scale-x-20 scale-x-30 scale-x-40 scale-x-50 scale-x-60 scale-x-70 scale-x-80 scale-x-90",

diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -29,6 +29,8 @@
 .sibling-\[div\:hover\]-\[combinator\:test-4\]+div:hover{combinator:test-4;}
 .-p-px{padding:-1px;}
 .\!p-5px{padding:5px !important;}
+.\*-p-2 > *,
+.\*\:p-2 > *,
 .has-hover\:p-2:has(:hover),
 .p-2,
 .p2,

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1037,6 +1037,8 @@ export const presetMiniTargets: string[] = [
   '-mt-safe',
   '-!mb-safe',
   '!-ms-safe',
+  '*:p-2',
+  '*-p-2',
 
   // variants class
   'all-[.target]-[combinator:test-2]',