feat: add aria-x and data-x support (unocss/unocss#1816)

src/theme/aria.ts

@@ -0,0 +1,11 @@
+export const 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"',
+}

src/theme/default.ts

@@ -6,6 +6,7 @@ import { height, maxHeight, maxWidth, width } from './size'
 import type { Theme } from './types'
 import { preflightBase } from './preflight'
 import { animation } from './animation'
+import { aria } from './aria'
 
 export const theme: Theme = {
   width,
@@ -42,4 +43,5 @@ export const theme: Theme = {
   ringWidth,
   preflightBase,
   animation,
+  aria,
 }

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[]>

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}]`,
+        }
+      }
+    }
+  },
+}

src/variants/data.ts

@@ -0,0 +1,21 @@
+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}]`,
+        }
+      }
+    }
+  },
+}

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: PresetWeappOptions): Variant<Theme>[] => [
+  variantAria,
+  variantDataAttribute,
   variantCssLayer,
 
   variantSelector,

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'

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

@@ -245,9 +245,11 @@ page,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-
 .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;}
+.aria-hidden\\\\:hidden[aria-hidden=\\"true\\"]{display:none;}
 .display-\\\\$var{display:var(--var);}
 .display-inherit{display:inherit;}
 .disabled\\\\:op50:disabled{opacity:0.5;}
@@ -500,6 +502,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(--licl-line-opacity));--licl-line-opacity:1;text-decoration-color:rgba(220,38,38,var(--licl-line-opacity));}
+.data-\\\\[invalid\\\\~\\\\=grammar\\\\]\\\\:underline-green-600[data-invalid~=grammar]{-webkit-text-decoration-color:rgba(22,163,74,var(--licl-line-opacity));--licl-line-opacity:1;text-decoration-color:rgba(22,163,74,var(--licl-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(--licl-line-opacity));--licl-line-opacity:1;text-decoration-color:rgba(239,68,68,var(--licl-line-opacity));}

test/__snapshots__/preset-weapp-rules.test.ts.snap

@@ -208,9 +208,11 @@ page,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-
 .mbs--fl1r--10-dr1-2-pr1--fr1r-{margin-block-start:-10.2%;}
 .mbs--rr1-height{margin-block-start:var(--height);}
 .mbs-unset{margin-block-start:unset;}
+.data--fl1r-inline-fr1r--cr1-inline[data-inline],
 [data-any] .scope--fl1r--fl1r-data-any-fr1r--fr1r--cr1-inline{display:inline;}
 unocss .scope--fl1r-unocss-fr1r--cr1-block{display:block;}
 .contents{display:contents;}
+.aria-hidden-cr1-hidden[aria-hidden=\\"true\\"]{display:none;}
 .display--rr1-var{display:var(--var);}
 .display-inherit{display:inherit;}
 .disabled-cr1-op50:disabled{opacity:0.5;}
@@ -463,6 +465,8 @@ unocss .scope--fl1r-unocss-fr1r--cr1-block{display:block;}
 .decoration-size-unset{text-decoration-thickness:unset;}
 .underline-1rem{text-decoration-thickness:1rem;}
 .underline-auto{text-decoration-thickness:auto;}
+.aria--fl1r-invalid\\\\=spelling-fr1r--cr1-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--fl1r-invalid\\\\~\\\\=grammar-fr1r--cr1-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-sr1-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-weapp.test.ts.snap

@@ -208,9 +208,11 @@ page,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-
 .mbs--do-height{margin-block-start:var(--height);}
 .mbs--lfl--10-dl-2-pes--lfr-{margin-block-start:-10.2%;}
 .mbs-unset{margin-block-start:unset;}
+.data--lfl-inline-lfr--cl-inline[data-inline],
 [data-any] .scope--lfl--lfl-data-any-lfr--lfr--cl-inline{display:inline;}
 unocss .scope--lfl-unocss-lfr--cl-block{display:block;}
 .contents{display:contents;}
+.aria-hidden-cl-hidden[aria-hidden=\\"true\\"]{display:none;}
 .display--do-var{display:var(--var);}
 .display-inherit{display:inherit;}
 .disabled-cl-op50:disabled{opacity:0.5;}
@@ -463,6 +465,8 @@ unocss .scope--lfl-unocss-lfr--cl-block{display:block;}
 .decoration-size-unset{text-decoration-thickness:unset;}
 .underline-1rem{text-decoration-thickness:1rem;}
 .underline-auto{text-decoration-thickness:auto;}
+.aria--lfl-invalid-eqe-spelling-lfr--cl-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--lfl-invalid\\\\~-eqe-grammar-lfr--cl-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-sl-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/assets/preset-mini-targets.ts

@@ -1131,6 +1131,16 @@ 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',
+
+  // variants - aria (theme)
+  'aria-hidden:hidden',
+
   // safe-area
   'p-safe',
   'pt-safe',

test/preset-mini.test.ts

@@ -28,6 +28,9 @@ const uno = createGenerator({
       safe: 'max(env(safe-area-inset-left), env(safe-area-inset-right))',
     },
   },
+  data: {
+    dropdown: 'data-bs-toggle="dropdown"',
+  },
 })
 
 describe('preset-mini', () => {