From f99dcb21877834adb642e72ff2a7a65d8f22e54c Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Fri, 14 Oct 2022 10:48:20 -0400 Subject: [PATCH 1/3] Add aria variants --- src/corePlugins.js | 7 +++++++ src/lib/setupContextUtils.js | 1 + stubs/defaultConfig.stub.js | 10 ++++++++++ tests/arbitrary-variants.test.js | 31 +++++++++++++++++++++++++++++++ 4 files changed, 49 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index 0ae64d9b0762..f53bcc64de2c 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -257,6 +257,13 @@ 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) + }, + 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..5478e3723cea 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -616,6 +616,37 @@ 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; + } + `) + }) +}) + it('should support supports', () => { let config = { theme: { From 6426a9df55eb7d9d196778d2e7fc54271ccbc40f Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Fri, 14 Oct 2022 11:39:51 -0400 Subject: [PATCH 2/3] Add group and peer variants to test --- tests/arbitrary-variants.test.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index 5478e3723cea..f46332320687 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -624,6 +624,8 @@ it('should support aria variants', () => {
+
+
`, }, @@ -643,6 +645,12 @@ it('should support aria variants', () => { .aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] { text-decoration-line: underline; } + .group[aria-checked='true'] .group-aria-checked\:underline { + text-decoration-line: underline; + } + .peer[aria-checked='true'] ~ .peer-aria-checked\:underline { + text-decoration-line: underline; + } `) }) }) From 6e05a2f67e26f08b9b8e9802e04d0b3de6908dfe Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Fri, 14 Oct 2022 14:49:27 -0400 Subject: [PATCH 3/3] Add support for group and peer modifiers --- src/corePlugins.js | 21 +++++++++++++++++---- tests/arbitrary-variants.test.js | 24 ++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 4 deletions(-) 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..91b57f5b1eaa 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -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; + } `) }) })