diff --git a/src/corePlugins.js b/src/corePlugins.js index 0ae64d9b0762..637227e92c2f 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -257,6 +257,26 @@ export let variantPlugins = { ) }, + ariaVariants: ({ matchVariant, theme }) => { + 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 }) => { addVariant('portrait', '@media (orientation: portrait)') addVariant('landscape', '@media (orientation: landscape)') diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 2f0ca84084b5..2c7004c26deb 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -715,6 +715,7 @@ function resolvePlugins(context, root) { let beforeVariants = [ variantPlugins['pseudoElementVariants'], variantPlugins['pseudoClassVariants'], + variantPlugins['ariaVariants'], ] let afterVariants = [ variantPlugins['supportsVariants'], diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 49750a2ac7c8..0d0ec6a7b502 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -112,6 +112,16 @@ module.exports = { pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', bounce: 'bounce 1s infinite', }, + aria: { + checked: 'checked="true"', + disabled: 'disabled="true"', + expanded: 'expanded="true"', + hidden: 'hidden="true"', + pressed: 'pressed="true"', + readonly: 'readonly="true"', + required: 'required="true"', + selected: 'selected="true"', + }, aspectRatio: { auto: 'auto', square: '1 / 1', diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index d259971fe57a..91b57f5b1eaa 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -616,6 +616,69 @@ test('classes in the same arbitrary variant should not be prefixed', () => { }) }) +it('should support aria variants', () => { + let config = { + content: [ + { + raw: html` +
+
+
+
+
+
+
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .aria-checked\:underline[aria-checked='true'] { + text-decoration-line: underline; + } + .aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] { + text-decoration-line: underline; + } + .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; + } + `) + }) +}) + it('should support supports', () => { let config = { theme: {