tailwindcss/packages/@tailwindcss-upgrade/src/codemods
Robin Malfait 31c0a21452
Improve upgrade migrations (#18184)
This PR fixes 2 issues with the migration tool where certain classes
weren't migrated. This PR fixes those 2 scenarios:

### Scenario 1

When you have an arbitrary opacity modifier that doesn't use `%`, but is
just a number typically between `0` and `1` then this was not converted
to the bare value equivalent before.

E.g.:

```html
<div class="bg-[#f00]/[0.16]"></dv>
```

Will now be converted to:

```html
<div class="bg-[#f00]/16"></dv>
```

### Scenario 2

Fixes a bug when a CSS function was used in a fallback value in the CSS
variable shorthand syntax. In that case we didn't migrate the class to
the new syntax.

This was because we assumed that a `(` was found, that we are dealing
with a CSS function.

E.g.: 
```html
<div class="w-[--spacing(1)]"></div>
                        ^  This indicates a CSS function, we should not be 
                           converting this to `w-(--spacing(1))`
```

But if a function was used as a fallback value, for example:

```html
<div class="bg-[--my-color,theme(colors.red.500)]"></dv>
```

Then we also didn't migrate it, but since the function call is in the
fallback, we can still migrate it.

Will now properly be converted to:

```html
<div class="bg-(--my-color,var(--color-red-500))"></dv>
```


## Test plan

1. Added a test for the first case
2. Added a test for the second case
3. Also added an integration-like test that runs all the migration steps
to make sure that the `theme(…)` in the fallback also gets updated to
`var(…)`. This one caught an issue because the `var(…)` wasn't handling
prefixes correctly.
2025-05-30 13:32:59 +00:00
..
config Bump all Tailwind CSS related dependencies during upgrade (#17763) 2025-04-24 11:13:21 +02:00
css Improve @tailwindcss/upgrade and pnpm workspaces support (#18065) 2025-05-19 12:47:08 +02:00
template Improve upgrade migrations (#18184) 2025-05-30 13:32:59 +00:00