Comparing v3.4.6...v3.4.7 · tailwindlabs/tailwindcss (original) (raw)

Commits on Jul 24, 2024

Normalize attribute selector for [data-*](/tailwindlabs/tailwindcss/commit/680c55c11cd0960da7efd57d0c2f90b821be8946) and [aria-*](/tailwindlabs/tailwindcss/commit/680c55c11cd0960da7efd57d0c2f90b821be8946) modifiers (#14037
)
Fixes #14026
See #14040 for the v4 fix
When translating data- and aria- modifiers with attribute selectors,
we currently do not wrap the target attribute in quotes. This only works
for keywords (purely alphabetic words) but breaks as soon as there are
numbers or things like spaces in the attribute:

<div data-id="foo" class="data-[id=foo]:underline">underlined</div>  
<div data-id="f1" class="data-[id=1]:underline">not underlined</div>  
<div data-id="foo bar" class="data-[id=foo_bar]:underline">not underlined</div>

Since it's fairly common to have attribute selectors with `data-` and
`aria-` modifiers, this PR will now wrap the attribute in quotes unless
these are already wrapped.
| Tailwind Modifier | CSS Selector |
| ------------- | ------------- |
| `.data-[id=foo]` | `[data-id='foo']` |
| `.data-[id='foo']` | `[data-id='foo']` |
| `.data-[id=foo_i]` | `[data-id='foo i']` |
| `.data-[id='foo'_i]` | `[data-id='foo' i]` |
| `.data-[id=123]` | `[data-id='123']` |

Co-authored-by: Robin Malfait malfait.robin@gmail.com

Configuration menu
Browse the repository at this point in the history