Skip to content

Commit

Permalink
Normalize the value for aria-* and data-* variants (#9588)
Browse files Browse the repository at this point in the history 
* ensure to normalize the `value` for `aria-` and `data-` attributes

* update changelog
  • Loading branch information
@RobinMalfait
RobinMalfait committed Oct 17, 2022
1 parent bc00445 commit 6f77caa
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 12 deletions.
4 changes: 2 additions & 2 deletions CHANGELOG.md
View file
Expand Up @@ -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))

Expand Down
20 changes: 10 additions & 10 deletions src/corePlugins.js
View file
Expand Up @@ -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') ?? {} }
)
},
Expand Down
24 changes: 24 additions & 0 deletions tests/arbitrary-variants.test.js
View file
Expand Up @@ -624,12 +624,15 @@ it('should support aria variants', () => {
<div>
<div class="aria-checked:underline"></div>
<div class="aria-[sort=ascending]:underline"></div>
<div class="aria-[labelledby=a_b]:underline"></div>
<div class="group-aria-checked:underline"></div>
<div class="peer-aria-checked:underline"></div>
<div class="group-aria-checked/foo:underline"></div>
<div class="peer-aria-checked/foo:underline"></div>
<div class="group-aria-[sort=ascending]:underline"></div>
<div class="peer-aria-[sort=ascending]:underline"></div>
<div class="group-aria-[labelledby=a_b]:underline"></div>
<div class="peer-aria-[labelledby=a_b]:underline"></div>
<div class="group-aria-[sort=ascending]/foo:underline"></div>
<div class="peer-aria-[sort=ascending]/foo:underline"></div>
</div>
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -692,12 +704,15 @@ it('should support data variants', () => {
<div>
<div class="data-checked:underline"></div>
<div class="data-[position=top]:underline"></div>
<div class="data-[foo=bar_baz]:underline"></div>
<div class="group-data-checked:underline"></div>
<div class="peer-data-checked:underline"></div>
<div class="group-data-checked/foo:underline"></div>
<div class="peer-data-checked/foo:underline"></div>
<div class="group-data-[position=top]:underline"></div>
<div class="peer-data-[position=top]:underline"></div>
<div class="group-data-[foo=bar_baz]:underline"></div>
<div class="peer-data-[foo=bar_baz]:underline"></div>
<div class="group-data-[position=top]/foo:underline"></div>
<div class="peer-data-[position=top]/foo:underline"></div>
</div>
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down

0 comments on commit 6f77caa

Please sign in to comment.