e6d3fa0cc4
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. |
||
|---|---|---|
| .. | ||
| codemods | ||
| commands/help | ||
| template | ||
| utils | ||
| index.test.ts | ||
| index.ts | ||
| migrate-js-config.ts | ||
| migrate-postcss.ts | ||
| migrate.ts | ||
| stylesheet.ts | ||