feat(preset-mini,preset-wind): add aria-x and data-x support

packages/core/src/extractors/split.ts

@@ -1,7 +1,7 @@
 import type { Extractor } from '../types'
 import { isValidSelector } from '../utils'
 
-export const splitCode = (code: string) => [...new Set(code.split(/\\?[\s'"`;={}]+/g))].filter(isValidSelector)
+export const splitCode = (code: string) => [...new Set(code.split(/\\?[\s'"`;{}]+/g))].filter(isValidSelector)
 
 export const extractorSplit: Extractor = {
   name: 'split',

packages/preset-mini/src/_theme/types.ts

@@ -38,6 +38,8 @@ export interface Theme {
   lineWidth?: Record<string, string>
   spacing?: Record<string, string>
   duration?: Record<string, string>
+  aria?: Record<string, string>
+  data?: Record<string, string>
   // filters
   blur?: Record<string, string>
   dropShadow?: Record<string, string | string[]>

packages/preset-mini/src/_variants/aria.ts

@@ -0,0 +1,20 @@
+import type { VariantContext, VariantObject } from '@unocss/core'
+import type { Theme } from '../theme'
+import { handler as h, variantGetParameter } from '../utils'
+
+export const variantAria: VariantObject = {
+  name: 'aria',
+  match(matcher, { theme }: VariantContext<Theme>) {
+    const variant = variantGetParameter('aria', matcher, [':', '-'])
+    if (variant) {
+      const [match, rest] = variant
+      const aria = h.bracket(match) ?? theme.aria?.[match] ?? ''
+      if (aria) {
+        return {
+          matcher: rest,
+          selector: s => `${s}[aria-${aria}]`,
+        }
+      }
+    }
+  },
+}

packages/preset-mini/src/_variants/data.ts

@@ -0,0 +1,20 @@
+import type { VariantContext, VariantObject } from '@unocss/core'
+import type { Theme } from '../theme'
+import { handler as h, variantGetParameter } from '../utils'
+
+export const variantDataAttribute: VariantObject = {
+  name: 'data',
+  match(matcher, { theme }: VariantContext<Theme>) {
+    const variant = variantGetParameter('data', matcher, [':', '-'])
+    if (variant) {
+      const [match, rest] = variant
+      const dataAttribute = h.bracket(match) ?? theme.data?.[match] ?? ''
+      if (dataAttribute) {
+        return {
+          matcher: rest,
+          selector: s => `${s}[data-${dataAttribute}]`,
+        }
+      }
+    }
+  },
+}

packages/preset-mini/src/_variants/default.ts

@@ -11,8 +11,12 @@ import { variantImportant } from './important'
 import { variantCustomMedia, variantPrint } from './media'
 import { variantSupports } from './supports'
 import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
+import { variantAria } from './aria'
+import { variantDataAttribute } from './data'
 
 export const variants = (options: PresetMiniOptions): Variant<Theme>[] => [
+  variantAria,
+  variantDataAttribute,
   variantCssLayer,
 
   variantSelector,

packages/preset-mini/src/_variants/index.ts

@@ -1,6 +1,8 @@
 /* @export-submodules */
+export * from './aria'
 export * from './breakpoints'
 export * from './combinators'
+export * from './data'
 export * from './media'
 export * from './supports'
 export * from './dark'

packages/preset-wind/src/theme.ts

@@ -5,6 +5,17 @@ import { backdropFilterBase, borderSpacingBase, filterBase, fontVariantNumericBa
 
 export const theme: Theme = {
   ...miniTheme,
+  aria: {
+    busy: 'busy="true"',
+    checked: 'checked="true"',
+    disabled: 'disabled="true"',
+    expanded: 'expanded="true"',
+    hidden: 'hidden="true"',
+    pressed: 'pressed="true"',
+    readonly: 'readonly="true"',
+    required: 'required="true"',
+    selected: 'selected="true"',
+  },
   animation: {
     keyframes: {
       'pulse': '{0%, 100% {opacity:1} 50% {opacity:.5}}',

test/__snapshots__/preset-mini.test.ts.snap

@@ -128,6 +128,7 @@ exports[`preset-mini > targets 1`] = `
 .mbs-\\\\[-10\\\\.2\\\\%\\\\]{margin-block-start:-10.2%;}
 .mbs-\\\\$height{margin-block-start:var(--height);}
 .mbs-unset{margin-block-start:unset;}
+.data-\\\\[inline\\\\]\\\\:inline[data-inline],
 [data-any] .scope-\\\\[\\\\[data-any\\\\]\\\\]\\\\:inline{display:inline;}
 unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .contents{display:contents;}
@@ -382,6 +383,8 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .decoration-size-unset{text-decoration-thickness:unset;}
 .underline-1rem{text-decoration-thickness:1rem;}
 .underline-auto{text-decoration-thickness:auto;}
+.aria-\\\\[invalid\\\\=spelling\\\\]\\\\:underline-red-600[aria-invalid=spelling]{-webkit-text-decoration-color:rgba(220,38,38,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(220,38,38,var(--un-line-opacity));}
+.data-\\\\[invalid\\\\~\\\\=grammar\\\\]\\\\:underline-green-600[data-invalid~=grammar]{-webkit-text-decoration-color:rgba(22,163,74,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(22,163,74,var(--un-line-opacity));}
 .decoration-purple\\\\/50{-webkit-text-decoration-color:rgba(192,132,252,0.5);text-decoration-color:rgba(192,132,252,0.5);}
 .decoration-transparent{-webkit-text-decoration-color:transparent;text-decoration-color:transparent;}
 .underline-red-500{-webkit-text-decoration-color:rgba(239,68,68,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(239,68,68,var(--un-line-opacity));}

test/__snapshots__/preset-wind.test.ts.snap

@@ -74,6 +74,7 @@ exports[`preset-wind > targets 1`] = `
 .isolate{isolation:isolate;}
 .isolate-auto,
 .isolation-auto{isolation:auto;}
+.aria-hidden\\\\:hidden[aria-hidden=\\"true\\"]{display:none;}
 .inline-table{display:inline-table;}
 .table{display:table;}
 .table-caption{display:table-caption;}
@@ -333,6 +334,7 @@ exports[`preset-wind > targets 1`] = `
 .mix-blend-plus-lighter{mix-blend-mode:plus-lighter;}
 .mix-blend-normal{mix-blend-mode:normal;}
 .mix-blend-revert{mix-blend:revert;}
+.data-dropdown\\\\:ring-green[data-data-bs-toggle=\\"dropdown\\"]{--un-ring-opacity:1;--un-ring-color:rgba(74,222,128,var(--un-ring-opacity));}
 .image-render-pixel{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;}
 .backdrop-blur{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
 .backdrop-blur-4{--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}

test/assets/preset-mini-targets.ts

@@ -1000,6 +1000,13 @@ export const presetMiniTargets: string[] = [
 
   // variants - multiple parents
   'sm:lt-lg:p-10',
+
+  // variants - aria
+  'aria-[invalid=spelling]:underline-red-600',
+
+  // variants - data
+  'data-[inline]:inline',
+  'data-[invalid~=grammar]:underline-green-600',
 ]
 
 export const presetMiniNonTargets = [

test/assets/preset-wind-targets.ts

@@ -398,6 +398,12 @@ export const presetWindTargets: string[] = [
 
   // variants - multiple parents
   '@dark:contrast-more:p-10',
+
+  // variants - aria (theme)
+  'aria-hidden:hidden',
+
+  // variants - data (theme)
+  'data-dropdown:ring-green',
 ]
 
 export const presetWindNonTargets: string[] = [

test/preset-wind.test.ts

@@ -16,6 +16,9 @@ const uno = createGenerator({
         b: 'rgba(var(--custom), %alpha)',
       },
     },
+    data: {
+      dropdown: 'data-bs-toggle="dropdown"',
+    },
   },
 })