archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Normalize the value for aria-* and data-* variants (#9588)

Browse Source 
* ensure to normalize the `value` for `aria-` and `data-` attributes

* update changelog
This commit is contained in:
Robin Malfait 2022-10-17 13:30:23 +02:00 committed by GitHub
parent bc004455bc
commit 6f77caabfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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))

20
src/corePlugins.js
View File

@ -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') ?? {} }
)
},

24
tests/arbitrary-variants.test.js
View File

@ -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>
@ -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', () => {
<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>
@ -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;
}