diff --git a/src/corePlugins.js b/src/corePlugins.js index f53bcc64de2c..637227e92c2f 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -258,10 +258,23 @@ export let variantPlugins = { }, ariaVariants: ({ matchVariant, theme }) => { - let options = { values: theme('aria') ?? {} } - matchVariant('aria', (value) => `&[aria-${value}]`, options) - matchVariant('group-aria', (value) => `:merge(.group)[aria-${value}] &`, options) - matchVariant('peer-aria', (value) => `:merge(.peer)[aria-${value}] ~ &`, options) + matchVariant('aria', (value) => `&[aria-${value}]`, { values: theme('aria') ?? {} }) + matchVariant( + 'group-aria', + (value, { modifier }) => + modifier + ? `:merge(.group\\/${modifier})[aria-${value}] &` + : `:merge(.group)[aria-${value}] &`, + { values: theme('aria') ?? {} } + ) + matchVariant( + 'peer-aria', + (value, { modifier }) => + modifier + ? `:merge(.peer\\/${modifier})[aria-${value}] ~ &` + : `:merge(.peer)[aria-${value}] ~ &`, + { values: theme('aria') ?? {} } + ) }, orientationVariants: ({ addVariant }) => { diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index f46332320687..35a902168194 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -107,7 +107,7 @@ test('variants without & or an at-rule are ignored', () => { test('arbitrary variants are sorted after other variants', () => { let config = { - content: [{ raw: html`
` }], + content: [{ raw: html`
` }], corePlugins: { preflight: false }, } @@ -626,6 +626,12 @@ it('should support aria variants', () => {
+
+
+
+
+
+
`, }, @@ -648,9 +654,27 @@ it('should support aria variants', () => { .group[aria-checked='true'] .group-aria-checked\:underline { text-decoration-line: underline; } + .group\/foo[aria-checked='true'] .group-aria-checked\/foo\:underline { + text-decoration-line: underline; + } + .group[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\:underline { + text-decoration-line: underline; + } + .group\/foo[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\/foo\:underline { + text-decoration-line: underline; + } .peer[aria-checked='true'] ~ .peer-aria-checked\:underline { text-decoration-line: underline; } + .peer\/foo[aria-checked='true'] ~ .peer-aria-checked\/foo\:underline { + text-decoration-line: underline; + } + .peer[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\:underline { + text-decoration-line: underline; + } + .peer\/foo[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\/foo\:underline { + text-decoration-line: underline; + } `) }) })