Skip to content

Commit 6f77caa

Browse files
RobinMalfaitRobinMalfait
authored
Normalize the value for aria-* and data-* variants (#9588)
* ensure to normalize the `value` for `aria-` and `data-` attributes * update changelog
1 parent bc00445 commit 6f77caa

File tree

3 files changed

+36
-12
lines changed

3 files changed

+36
-12
lines changed

‎CHANGELOG.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2929
- Add support for modifiers to `matchUtilities` ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541))
3030
- Switch to positional argument + object for modifiers ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541))
3131
- Add new `min` and `max` variants ([#9558](https://github.com/tailwindlabs/tailwindcss/pull/9558))
32-
- Add aria variants ([#9557](https://github.com/tailwindlabs/tailwindcss/pull/9557))
33-
- Add `data-*` variants ([#9559](https://github.com/tailwindlabs/tailwindcss/pull/9559))
32+
- Add `aria-*` variants ([#9557](https://github.com/tailwindlabs/tailwindcss/pull/9557), [#9588](https://github.com/tailwindlabs/tailwindcss/pull/9588))
33+
- Add `data-*` variants ([#9559](https://github.com/tailwindlabs/tailwindcss/pull/9559), [#9588](https://github.com/tailwindlabs/tailwindcss/pull/9588))
3434
- Upgrade to `postcss-nested` v6.0 ([#9546](https://github.com/tailwindlabs/tailwindcss/pull/9546))
3535
- Expose `context.getVariants` for intellisense ([#9505](https://github.com/tailwindlabs/tailwindcss/pull/9505))
3636

‎src/corePlugins.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -382,41 +382,41 @@ export let variantPlugins = {
382382
},
383383

384384
ariaVariants: ({ matchVariant, theme }) => {
385-
matchVariant('aria', (value) => `&[aria-${value}]`, { values: theme('aria') ?? {} })
385+
matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
386386
matchVariant(
387387
'group-aria',
388388
(value, { modifier }) =>
389389
modifier
390-
? `:merge(.group\\/${modifier})[aria-${value}] &`
391-
: `:merge(.group)[aria-${value}] &`,
390+
? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
391+
: `:merge(.group)[aria-${normalize(value)}] &`,
392392
{ values: theme('aria') ?? {} }
393393
)
394394
matchVariant(
395395
'peer-aria',
396396
(value, { modifier }) =>
397397
modifier
398-
? `:merge(.peer\\/${modifier})[aria-${value}] ~ &`
399-
: `:merge(.peer)[aria-${value}] ~ &`,
398+
? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &`
399+
: `:merge(.peer)[aria-${normalize(value)}] ~ &`,
400400
{ values: theme('aria') ?? {} }
401401
)
402402
},
403403

404404
dataVariants: ({ matchVariant, theme }) => {
405-
matchVariant('data', (value) => `&[data-${value}]`, { values: theme('data') ?? {} })
405+
matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} })
406406
matchVariant(
407407
'group-data',
408408
(value, { modifier }) =>
409409
modifier
410-
? `:merge(.group\\/${modifier})[data-${value}] &`
411-
: `:merge(.group)[data-${value}] &`,
410+
? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
411+
: `:merge(.group)[data-${normalize(value)}] &`,
412412
{ values: theme('data') ?? {} }
413413
)
414414
matchVariant(
415415
'peer-data',
416416
(value, { modifier }) =>
417417
modifier
418-
? `:merge(.peer\\/${modifier})[data-${value}] ~ &`
419-
: `:merge(.peer)[data-${value}] ~ &`,
418+
? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
419+
: `:merge(.peer)[data-${normalize(value)}] ~ &`,
420420
{ values: theme('data') ?? {} }
421421
)
422422
},

‎tests/arbitrary-variants.test.js

+24
Original file line numberDiff line numberDiff line change
@@ -624,12 +624,15 @@ it('should support aria variants', () => {
624624
<div>
625625
<div class="aria-checked:underline"></div>
626626
<div class="aria-[sort=ascending]:underline"></div>
627+
<div class="aria-[labelledby=a_b]:underline"></div>
627628
<div class="group-aria-checked:underline"></div>
628629
<div class="peer-aria-checked:underline"></div>
629630
<div class="group-aria-checked/foo:underline"></div>
630631
<div class="peer-aria-checked/foo:underline"></div>
631632
<div class="group-aria-[sort=ascending]:underline"></div>
632633
<div class="peer-aria-[sort=ascending]:underline"></div>
634+
<div class="group-aria-[labelledby=a_b]:underline"></div>
635+
<div class="peer-aria-[labelledby=a_b]:underline"></div>
633636
<div class="group-aria-[sort=ascending]/foo:underline"></div>
634637
<div class="peer-aria-[sort=ascending]/foo:underline"></div>
635638
</div>
@@ -651,6 +654,9 @@ it('should support aria variants', () => {
651654
.aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] {
652655
text-decoration-line: underline;
653656
}
657+
.aria-\[labelledby\=a_b\]\:underline[aria-labelledby='a b'] {
658+
text-decoration-line: underline;
659+
}
654660
.group[aria-checked='true'] .group-aria-checked\:underline {
655661
text-decoration-line: underline;
656662
}
@@ -660,6 +666,9 @@ it('should support aria variants', () => {
660666
.group[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\:underline {
661667
text-decoration-line: underline;
662668
}
669+
.group[aria-labelledby='a b'] .group-aria-\[labelledby\=a_b\]\:underline {
670+
text-decoration-line: underline;
671+
}
663672
.group\/foo[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\/foo\:underline {
664673
text-decoration-line: underline;
665674
}
@@ -672,6 +681,9 @@ it('should support aria variants', () => {
672681
.peer[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\:underline {
673682
text-decoration-line: underline;
674683
}
684+
.peer[aria-labelledby='a b'] ~ .peer-aria-\[labelledby\=a_b\]\:underline {
685+
text-decoration-line: underline;
686+
}
675687
.peer\/foo[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\/foo\:underline {
676688
text-decoration-line: underline;
677689
}
@@ -692,12 +704,15 @@ it('should support data variants', () => {
692704
<div>
693705
<div class="data-checked:underline"></div>
694706
<div class="data-[position=top]:underline"></div>
707+
<div class="data-[foo=bar_baz]:underline"></div>
695708
<div class="group-data-checked:underline"></div>
696709
<div class="peer-data-checked:underline"></div>
697710
<div class="group-data-checked/foo:underline"></div>
698711
<div class="peer-data-checked/foo:underline"></div>
699712
<div class="group-data-[position=top]:underline"></div>
700713
<div class="peer-data-[position=top]:underline"></div>
714+
<div class="group-data-[foo=bar_baz]:underline"></div>
715+
<div class="peer-data-[foo=bar_baz]:underline"></div>
701716
<div class="group-data-[position=top]/foo:underline"></div>
702717
<div class="peer-data-[position=top]/foo:underline"></div>
703718
</div>
@@ -719,6 +734,9 @@ it('should support data variants', () => {
719734
.data-\[position\=top\]\:underline[data-position='top'] {
720735
text-decoration-line: underline;
721736
}
737+
.data-\[foo\=bar_baz\]\:underline[data-foo='bar baz'] {
738+
text-decoration-line: underline;
739+
}
722740
.group[data-ui~='checked'] .group-data-checked\:underline {
723741
text-decoration-line: underline;
724742
}
@@ -728,6 +746,9 @@ it('should support data variants', () => {
728746
.group[data-position='top'] .group-data-\[position\=top\]\:underline {
729747
text-decoration-line: underline;
730748
}
749+
.group[data-foo='bar baz'] .group-data-\[foo\=bar_baz\]\:underline {
750+
text-decoration-line: underline;
751+
}
731752
.group\/foo[data-position='top'] .group-data-\[position\=top\]\/foo\:underline {
732753
text-decoration-line: underline;
733754
}
@@ -740,6 +761,9 @@ it('should support data variants', () => {
740761
.peer[data-position='top'] ~ .peer-data-\[position\=top\]\:underline {
741762
text-decoration-line: underline;
742763
}
764+
.peer[data-foo='bar baz'] ~ .peer-data-\[foo\=bar_baz\]\:underline {
765+
text-decoration-line: underline;
766+
}
743767
.peer\/foo[data-position='top'] ~ .peer-data-\[position\=top\]\/foo\:underline {
744768
text-decoration-line: underline;
745769
}

0 commit comments

Comments
 (0)