Bump all Tailwind CSS related dependencies during upgrade #17763
Conversation
This will now bump all tailwindcss-like dependencies if they exist in your package.json
| try { | ||
| let packageJsonPath = resolve(base, 'package.json') | ||
| let packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8') | ||
| return packageJsonContent.includes(`"${name}":`) |
There was a problem hiding this comment.
Used quotes otherwise tailwindcss would also match if it saw @tailwindcss/postcss. Even though that doesn't really matter in this case.
Also, this doesn't really handle aliases at all:
"my-tailwindcss": "npm:[email protected]"It also potentially overrides locally installed versions or symlinks:
"tailwindcss": "file:/path/to/local/version"But give we want to work on a clean Git repo, I think this should be fine.
There was a problem hiding this comment.
Also, not even trying to parse the JSON file. Took this from the prettier upgrade script we had (which I replaced with this) which means that you don't have to list dependencies, devDependenies, optionalDependencies, ...
| info('Updating dependencies…') | ||
| { | ||
| // Migrate the prettier plugin to the latest version | ||
| await migratePrettierPlugin(base) | ||
| } |
There was a problem hiding this comment.
Added this to the array of dependencies to upgrade.
| '@tailwindcss/vite', | ||
| '@tailwindcss/node', | ||
| '@tailwindcss/oxide', | ||
| 'prettier-plugin-tailwindcss', |
There was a problem hiding this comment.
Added prettier-plugin-tailwindcss here instead of the dedicated migratePrettierPlugin step.
| for (let dependency of [ | ||
| 'tailwindcss', | ||
| '@tailwindcss/cli', | ||
| '@tailwindcss/postcss', |
There was a problem hiding this comment.
The PostCSS config is migrated later, which means that on v3 projects at the time of running this will result in a no-op.
This PR bumps all Tailwind CSS related dependencies when running the upgrade tool if the dependency exists in your package.json file.
E.g.: if you have
tailwindcssand@tailwindcss/vitein your package.json, then both will be updated to the latest version.This PR is not trying to be smart and skip updating if you are already on the latest version. It will just try and update the dependencies and your package manager will do nothing in case it was already the latest version.
Test plan
Ran this on one of my personal projects and this was the output:
Notice that I don't have
@tailwindcss/vitelogs because I am using@tailwindcss/postcss.