feat: add children variant (*-{modifier})

MellowCo · May 17, 2024 · 5dc9d70 · 5dc9d70
1 parent 549d902
commit 5dc9d70
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 3 deletions.
diff --git a/src/variants/children.ts b/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/src/variants/default.ts b/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: PresetWeappOptions): Variant<Theme>[] {
   return [
@@ -40,6 +41,7 @@ export function variants(options: PresetWeappOptions): Variant<Theme>[] {
     ...variantColorsMediaOrClass(options),
     ...variantLanguageDirections,
     variantScope,
+    ...variantChildren,
 
     variantContainerQuery,
     variantVariables,

diff --git a/src/variants/index.ts b/src/variants/index.ts
@@ -13,3 +13,4 @@ export * from './misc'
 export * from './pseudo'
 export * from './important'
 export * from './negative'
+export * from './children'
diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap
@@ -412,7 +412,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-active: placeholder-after: placeholder-align-base placeholder-align-baseline placeholder-align-bottom placeholder-align-btm placeholder-align-end placeholder-align-inherit placeholder-align-initial placeholder-align-mid",
+  "placeholder-": "placeholder-*: placeholder-active: placeholder-after: placeholder-align-base placeholder-align-baseline placeholder-align-bottom placeholder-align-btm placeholder-align-end placeholder-align-inherit placeholder-align-initial",
   "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",
   "scroll-": "",

diff --git a/test/assets/output/preset-mini/targets.css b/test/assets/output/preset-mini/targets.css
@@ -166,6 +166,8 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 .-p-px{padding:-1px;}
 .\!p-10{padding:80rpx !important;}
 .\!p-5px{padding:5px !important;}
+.\*-p-2 > *,
+.\*\:p-2 > *,
 .has-hover\:p-2:has(:hover),
 .p-2,
 .p2,

diff --git a/test/assets/output/preset-weapp/targets-custom-rules.css b/test/assets/output/preset-weapp/targets-custom-rules.css
@@ -165,11 +165,13 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 ._lfl11_padding_cl11_theme_lbl11_spacing_dl11_xl_lbr11__lfr11_{padding:48rpx;}
 ._el11_p-10{padding:80rpx !important;}
 ._el11_p-5px{padding:5px !important;}
-.-p-px{padding:-1px;}
+._star__cl11_p-2 > *,
+._star_-p-2 > *,
 .has-hover_cl11_p-2:has(:hover),
 .p-2,
 .p2,
 .where-hover_cl11_p-2:where(:hover){padding:16rpx;}
+.-p-px{padding:-1px;}
 .important_cl11_p-3,
 .p3_el11_{padding:24rpx !important;}
 .is-hover_cl11_p-4px:is(:hover),

diff --git a/test/assets/output/preset-weapp/targets.css b/test/assets/output/preset-weapp/targets.css
@@ -165,11 +165,13 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 ._lfl_padding_cl_theme_lbl_spacing_dl_xl_lbr__lfr_{padding:48rpx;}
 ._el_p-10{padding:80rpx !important;}
 ._el_p-5px{padding:5px !important;}
-.-p-px{padding:-1px;}
+._star__cl_p-2 > *,
+._star_-p-2 > *,
 .has-hover_cl_p-2:has(:hover),
 .p-2,
 .p2,
 .where-hover_cl_p-2:where(:hover){padding:16rpx;}
+.-p-px{padding:-1px;}
 .important_cl_p-3,
 .p3_el_{padding:24rpx !important;}
 .is-hover_cl_p-4px:is(:hover),

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