From 6f77caabfae245ae5c306a9e14afee5d9126bb17 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 17 Oct 2022 13:30:23 +0200 Subject: [PATCH] Normalize the `value` for `aria-*` and `data-*` variants (#9588) * ensure to normalize the `value` for `aria-` and `data-` attributes * update changelog --- CHANGELOG.md | 4 ++-- src/corePlugins.js | 20 ++++++++++---------- tests/arbitrary-variants.test.js | 24 ++++++++++++++++++++++++ 3 files changed, 36 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4ecd1bc22af..6ac8842050e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,8 +29,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add support for modifiers to `matchUtilities` ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541)) - Switch to positional argument + object for modifiers ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541)) - Add new `min` and `max` variants ([#9558](https://github.com/tailwindlabs/tailwindcss/pull/9558)) -- Add aria variants ([#9557](https://github.com/tailwindlabs/tailwindcss/pull/9557)) -- Add `data-*` variants ([#9559](https://github.com/tailwindlabs/tailwindcss/pull/9559)) +- Add `aria-*` variants ([#9557](https://github.com/tailwindlabs/tailwindcss/pull/9557), [#9588](https://github.com/tailwindlabs/tailwindcss/pull/9588)) +- Add `data-*` variants ([#9559](https://github.com/tailwindlabs/tailwindcss/pull/9559), [#9588](https://github.com/tailwindlabs/tailwindcss/pull/9588)) - Upgrade to `postcss-nested` v6.0 ([#9546](https://github.com/tailwindlabs/tailwindcss/pull/9546)) - Expose `context.getVariants` for intellisense ([#9505](https://github.com/tailwindlabs/tailwindcss/pull/9505)) diff --git a/src/corePlugins.js b/src/corePlugins.js index e4a50cb6265c..b4bad6bcbae0 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -382,41 +382,41 @@ export let variantPlugins = { }, ariaVariants: ({ matchVariant, theme }) => { - matchVariant('aria', (value) => `&[aria-${value}]`, { values: theme('aria') ?? {} }) + matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) matchVariant( 'group-aria', (value, { modifier }) => modifier - ? `:merge(.group\\/${modifier})[aria-${value}] &` - : `:merge(.group)[aria-${value}] &`, + ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &` + : `:merge(.group)[aria-${normalize(value)}] &`, { values: theme('aria') ?? {} } ) matchVariant( 'peer-aria', (value, { modifier }) => modifier - ? `:merge(.peer\\/${modifier})[aria-${value}] ~ &` - : `:merge(.peer)[aria-${value}] ~ &`, + ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &` + : `:merge(.peer)[aria-${normalize(value)}] ~ &`, { values: theme('aria') ?? {} } ) }, dataVariants: ({ matchVariant, theme }) => { - matchVariant('data', (value) => `&[data-${value}]`, { values: theme('data') ?? {} }) + matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} }) matchVariant( 'group-data', (value, { modifier }) => modifier - ? `:merge(.group\\/${modifier})[data-${value}] &` - : `:merge(.group)[data-${value}] &`, + ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &` + : `:merge(.group)[data-${normalize(value)}] &`, { values: theme('data') ?? {} } ) matchVariant( 'peer-data', (value, { modifier }) => modifier - ? `:merge(.peer\\/${modifier})[data-${value}] ~ &` - : `:merge(.peer)[data-${value}] ~ &`, + ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &` + : `:merge(.peer)[data-${normalize(value)}] ~ &`, { values: theme('data') ?? {} } ) }, diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index 1da4f986c88a..3f8f8b81ff91 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -624,12 +624,15 @@ it('should support aria variants', () => {
+
+
+
@@ -651,6 +654,9 @@ it('should support aria variants', () => { .aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] { text-decoration-line: underline; } + .aria-\[labelledby\=a_b\]\:underline[aria-labelledby='a b'] { + text-decoration-line: underline; + } .group[aria-checked='true'] .group-aria-checked\:underline { text-decoration-line: underline; } @@ -660,6 +666,9 @@ it('should support aria variants', () => { .group[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\:underline { text-decoration-line: underline; } + .group[aria-labelledby='a b'] .group-aria-\[labelledby\=a_b\]\:underline { + text-decoration-line: underline; + } .group\/foo[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\/foo\:underline { text-decoration-line: underline; } @@ -672,6 +681,9 @@ it('should support aria variants', () => { .peer[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\:underline { text-decoration-line: underline; } + .peer[aria-labelledby='a b'] ~ .peer-aria-\[labelledby\=a_b\]\:underline { + text-decoration-line: underline; + } .peer\/foo[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\/foo\:underline { text-decoration-line: underline; } @@ -692,12 +704,15 @@ it('should support data variants', () => {
+
+
+
@@ -719,6 +734,9 @@ it('should support data variants', () => { .data-\[position\=top\]\:underline[data-position='top'] { text-decoration-line: underline; } + .data-\[foo\=bar_baz\]\:underline[data-foo='bar baz'] { + text-decoration-line: underline; + } .group[data-ui~='checked'] .group-data-checked\:underline { text-decoration-line: underline; } @@ -728,6 +746,9 @@ it('should support data variants', () => { .group[data-position='top'] .group-data-\[position\=top\]\:underline { text-decoration-line: underline; } + .group[data-foo='bar baz'] .group-data-\[foo\=bar_baz\]\:underline { + text-decoration-line: underline; + } .group\/foo[data-position='top'] .group-data-\[position\=top\]\/foo\:underline { text-decoration-line: underline; } @@ -740,6 +761,9 @@ it('should support data variants', () => { .peer[data-position='top'] ~ .peer-data-\[position\=top\]\:underline { text-decoration-line: underline; } + .peer[data-foo='bar baz'] ~ .peer-data-\[foo\=bar_baz\]\:underline { + text-decoration-line: underline; + } .peer\/foo[data-position='top'] ~ .peer-data-\[position\=top\]\/foo\:underline { text-decoration-line: underline; }