tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

History

Migrate aria-*, data-* and supports-* variants from arbitrary values to bare values (#14644 )

This PR adds a new codemod that can migrate `data-*` and `aria-*`
variants using arbitrary values to bare values.

In Tailwind CSS v3, if you want to conditionally apply a class using
data attributes, then you can write `data-[selected]:flex`. This
requires the DOM element to have a `data-selected=""` attribute. In
Tailwind CSS v4 we can simplify this, by dropping the brackets and by
using `data-selected:flex` directly.

This migration operates on the internal AST, which means that this also
just works for compound variants such as
`group-has-data-[selected]:flex` (which turns into
`group-has-data-selected:flex`).

Additionally, this codemod is also applicable to `aria-*` variants. The
biggest difference is that in v4 `aria-selected` maps to an attribute of
`aria-selected="true"`. This means that we can only migrate
`aria=[selected="true"]:flex` to `aria-selected:flex`.

Last but not least, we also migrate `supports-[gap]` to `supports-gap`
if the passed in value looks like a property. If not, e.g.:
`supports-[display:grid]` then it stays as-is.

2024-10-11 10:41:37 -04:00

src

Migrate aria-*, data-* and supports-* variants from arbitrary values to bare values (#14644 )

2024-10-11 10:41:37 -04:00

package.json

release v4.0.0-alpha.26

2024-10-03 16:39:59 +02:00

README.md

Add initial codemod tooling (#14434 )

2024-09-18 16:45:43 +02:00

tsconfig.json

Add initial codemod tooling (#14434 )