This PR improves the upgrade tool to make sure that newly upgraded `--spacing(2)` CSS functions is pretty printed to prevent unambiguous looking classes (even though it compiles correctly). If you have a class such as `m-[calc(100dvh-theme(spacing.2))]`, then we used to convert it to `m-[calc(100dvh-calc(var(--spacing)*2))]`. But recently we introduced the `--spacing(2)` CSS function which means that the output now looks like this instead: `m-[calc(100dvh---spacing(2))]`. The triple `-` is valid because the first `-` is the minus sign, the next two `-` characters are from the function. One solution is to introduce spaces via underscores: ``` m-[calc(100dvh_-_--spacing(2))] ``` But a simpler solution, is to wrap the `--spacing(2)` in parens to remove the underscores and improve the readability of the `---` characters. ``` m-[calc(100dvh-(--spacing(2)))] ``` |
||
|---|---|---|
| .. | ||
| @tailwindcss-browser | ||
| @tailwindcss-cli | ||
| @tailwindcss-node | ||
| @tailwindcss-postcss | ||
| @tailwindcss-standalone | ||
| @tailwindcss-upgrade | ||
| @tailwindcss-vite | ||
| internal-example-plugin | ||
| tailwindcss | ||
| tsconfig.base.json | ||