fix(preset-mini, preset-wind4): mutiplePass for aria & data (#4608)

zyyv · web-flow · commit ee37028f7a6e · 2025-04-21T10:35:18.000+08:00
diff --git a/packages-integrations/inspector/client/auto-imports.d.ts b/packages-integrations/inspector/client/auto-imports.d.ts
@@ -297,6 +297,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/packages-presets/preset-mini/src/_variants/aria.ts b/packages-presets/preset-mini/src/_variants/aria.ts
@@ -17,6 +17,7 @@ export const variantAria: VariantObject = {
       }
     }
   },
+  multiPass: true,
 }
 
 function taggedAria(tagName: string): Variant {
diff --git a/packages-presets/preset-mini/src/_variants/data.ts b/packages-presets/preset-mini/src/_variants/data.ts
@@ -17,6 +17,7 @@ export const variantDataAttribute: VariantObject = {
       }
     }
   },
+  multiPass: true,
 }
 
 function taggedData(tagName: string): Variant {
diff --git a/packages-presets/preset-wind4/src/variants/aria.ts b/packages-presets/preset-wind4/src/variants/aria.ts
@@ -17,6 +17,7 @@ export const variantAria: VariantObject<Theme> = {
       }
     }
   },
+  multiPass: true,
 }
 
 function taggedAria(tagName: string): Variant<Theme> {
diff --git a/packages-presets/preset-wind4/src/variants/data.ts b/packages-presets/preset-wind4/src/variants/data.ts
@@ -17,6 +17,7 @@ export const variantDataAttribute: VariantObject<Theme> = {
       }
     }
   },
+  multiPass: true,
 }
 
 function taggedData(tagName: string): Variant<Theme> {
diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
@@ -350,7 +350,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
   export type { UseResizeOptions } from './composables/resize'
diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap
@@ -288,6 +288,11 @@ exports[`postcss > @unocss 1`] = `
 .object-center-top,
 .object-ct{object-position:center top;}
 .dark .\\.dark\\:text-xl{font-size:1.25rem;line-height:1.75rem;}
+.aria-busy\\:aria-pressed\\:text-green-600[aria-pressed="true"][aria-busy="true"],
+.aria-busy\\:data-\\[bar\\]\\:text-green-600[data-bar][aria-busy="true"],
+.aria-busy\\:text-green-600[aria-busy="true"],
+.data-\\[foo\\=x\\]\\:data-\\[bar\\=y\\]\\:text-green-600[data-bar=y][data-foo=x],
+.data-\\[foo\\=x\\]\\:text-green-600[data-foo=x]{--un-text-opacity:1;color:rgb(22 163 74 / var(--un-text-opacity));}
 .capitalize{text-transform:capitalize;}
 .normal-case{text-transform:none;}
 .lining-nums{--un-numeric-figure:lining-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}
diff --git a/test/assets/output/preset-wind-targets.css b/test/assets/output/preset-wind-targets.css
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -116,7 +116,6 @@
 --tracking-wide: 0.025em;
 --colors-blue-500: oklch(0.623 0.214 259.815);
 --colors-red-300: oklch(0.808 0.114 19.571);
---colors-red-600: oklch(0.577 0.245 27.325);
 --colors-red-DEFAULT: oklch(0.704 0.191 22.216);
 --colors-black: #000;
 --colors-blue-DEFAULT: oklch(0.707 0.165 254.624);
@@ -127,6 +126,7 @@
 --colors-rose-DEFAULT: oklch(0.712 0.194 13.428);
 --fontWeight-thin: 100;
 --textStrokeWidth-sm: thin;
+--colors-red-600: oklch(0.577 0.245 27.325);
 --colors-green-600: oklch(0.627 0.194 149.214);
 --colors-red-400: oklch(0.704 0.191 22.216);
 --text-sm-fontSize: 0.875rem;
@@ -197,6 +197,11 @@
 .text-\[var\(--color\)\]{color:color-mix(in oklch, var(--color) var(--un-text-opacity), transparent) /* var(--color) */;}
 .text-\[theme\(spacing\.sm\)\]{color:color-mix(in oklch, calc(var(--spacing) * 3.5) var(--un-text-opacity), transparent) /* calc(var(--spacing) * 3.5) */;}
 .text-black\/10{--un-text-opacity:10%;color:color-mix(in oklch, var(--colors-black) var(--un-text-opacity), transparent) /* #000 */;}
+.aria-busy\:aria-pressed\:text-green-600[aria-pressed="true"][aria-busy="true"],
+.aria-busy\:data-\[bar\]\:text-green-600[data-bar][aria-busy="true"],
+.aria-busy\:text-green-600[aria-busy="true"],
+.data-\[foo\=x\]\:data-\[bar\=y\]\:text-green-600[data-bar=y][data-foo=x],
+.data-\[foo\=x\]\:text-green-600[data-foo=x]{color:color-mix(in oklch, var(--colors-green-600) var(--un-text-opacity), transparent) /* oklch(0.627 0.194 149.214) */;}
 .dark .dark\:not-odd\:text-red:not(:nth-child(odd)){color:color-mix(in oklch, var(--colors-red-DEFAULT) var(--un-text-opacity), transparent) /* oklch(0.704 0.191 22.216) */;}
 .text-red-100,
 .text-red100{color:color-mix(in oklch, var(--colors-red-100) var(--un-text-opacity), transparent) /* oklch(0.936 0.032 17.717) */;}
diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts
@@ -402,9 +402,14 @@ export const presetWindTargets: string[] = [
 
   // variants - aria (theme)
   'aria-hidden:hidden',
+  'aria-busy:text-green-600',
+  'aria-busy:aria-pressed:text-green-600',
+  'aria-busy:data-[bar]:text-green-600',
 
   // variants - data (theme)
   'data-dropdown:ring-green',
+  'data-[foo=x]:text-green-600',
+  'data-[foo=x]:data-[bar=y]:text-green-600',
 
   // view-transition
   'view-transition-foo',
diff --git a/test/assets/preset-wind4-targets.ts b/test/assets/preset-wind4-targets.ts
@@ -406,10 +406,18 @@ export const presetWind4Targets: string[] = [
   // variants - multiple parents
   '@dark:contrast-more:p-10',
 
-  // variants - aria (theme)
+  // variants - aria
   'aria-hidden:hidden',
-
-  // variants - data (theme)
+  'aria-[invalid=spelling]:underline-red-600',
+  'aria-busy:text-green-600',
+  'aria-busy:aria-pressed:text-green-600',
+  'aria-busy:data-[bar]:text-green-600',
+
+  // variants - data
+  'data-[inline]:inline',
+  'data-[invalid~=grammar]:underline-green-600',
+  'data-[foo=x]:text-green-600',
+  'data-[foo=x]:data-[bar=y]:text-green-600',
   'data-dropdown:ring-green',
 
   // view-transition
diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -96,6 +96,8 @@ describe('preset-mini', () => {
       'max-h-dvh',
       'max-h-svh',
       'max-h-lvh',
+      'data-[foo=x]:text-green-600',
+      'data-[foo=x]:data-[bar=y]:text-green-600',
     ])
     expect(css).toMatchInlineSnapshot(`
       "/* layer: default */
@@ -107,7 +109,9 @@ describe('preset-mini', () => {
       .max-h-svh{max-height:100svh;}
       .min-h-dvh{min-height:100dvh;}
       .min-h-lvh{min-height:100lvh;}
-      .min-h-svh{min-height:100svh;}"
+      .min-h-svh{min-height:100svh;}
+      .data-\\[foo\\=x\\]\\:data-\\[bar\\=y\\]\\:text-green-600[data-bar=y][data-foo=x],
+      .data-\\[foo\\=x\\]\\:text-green-600[data-foo=x]{--un-text-opacity:1;color:rgb(22 163 74 / var(--un-text-opacity));}"
     `)
   })
 

Original file line number	Diff line number	Diff line change
`@@ -297,6 +297,6 @@ declare global {`
`297`	`297`	`// for type re-export`
`298`	`298`	`declare global {`
`299`	`299`	`// @ts-ignore`
`300`		`- export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'`
	`300`	`+ export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'`
`301`	`301`	`import('vue')`
`302`	`302`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export const variantAria: VariantObject = {`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`},`
	`20`	`+ multiPass: true,`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`function taggedAria(tagName: string): Variant {`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export const variantDataAttribute: VariantObject = {`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`},`
	`20`	`+ multiPass: true,`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`function taggedData(tagName: string): Variant {`