Skip to content

Commit 46758f7

Browse files
authored
Bump all Tailwind CSS related dependencies during upgrade (#17763)
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 `tailwindcss` and `@tailwindcss/vite` in 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: <img width="1023" alt="image" src="https://github.com/user-attachments/assets/a189fe7a-a58a-44aa-9246-b720e7a2a892" /> Notice that I don't have `@tailwindcss/vite` logs because I am using `@tailwindcss/postcss`.
1 parent a7f4a4d commit 46758f7

File tree

3 files changed

+24
-27
lines changed

3 files changed

+24
-27
lines changed

packages/@tailwindcss-upgrade/src/codemods/config/migrate-prettier.ts

Lines changed: 0 additions & 15 deletions
This file was deleted.

packages/@tailwindcss-upgrade/src/index.ts

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import path from 'node:path'
77
import postcss from 'postcss'
88
import { migrateJsConfig } from './codemods/config/migrate-js-config'
99
import { migratePostCSSConfig } from './codemods/config/migrate-postcss'
10-
import { migratePrettierPlugin } from './codemods/config/migrate-prettier'
1110
import { analyze as analyzeStylesheets } from './codemods/css/analyze'
1211
import { formatNodes } from './codemods/css/format-nodes'
1312
import { linkConfigs as linkConfigsToStylesheets } from './codemods/css/link'
@@ -229,11 +228,22 @@ async function run() {
229228
}
230229

231230
info('Updating dependencies…')
232-
try {
233-
// Upgrade Tailwind CSS
234-
await pkg(base).add(['tailwindcss@latest'])
235-
success(`Updated package: ${highlight('tailwindcss')}`, { prefix: '↳ ' })
236-
} catch {}
231+
for (let dependency of [
232+
'tailwindcss',
233+
'@tailwindcss/cli',
234+
'@tailwindcss/postcss',
235+
'@tailwindcss/vite',
236+
'@tailwindcss/node',
237+
'@tailwindcss/oxide',
238+
'prettier-plugin-tailwindcss',
239+
]) {
240+
try {
241+
if (dependency === 'tailwindcss' || (await pkg(base).has(dependency))) {
242+
await pkg(base).add([`${dependency}@latest`])
243+
success(`Updated package: ${highlight(dependency)}`, { prefix: '↳ ' })
244+
}
245+
} catch {}
246+
}
237247

238248
let tailwindRootStylesheets = stylesheets.filter((sheet) => sheet.isTailwindRoot && sheet.file)
239249

@@ -305,12 +315,6 @@ async function run() {
305315
await migratePostCSSConfig(base)
306316
}
307317

308-
info('Updating dependencies…')
309-
{
310-
// Migrate the prettier plugin to the latest version
311-
await migratePrettierPlugin(base)
312-
}
313-
314318
// Run all cleanup functions because we completed the migration
315319
await Promise.allSettled(cleanup.map((fn) => fn()))
316320

packages/@tailwindcss-upgrade/src/utils/packages.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,14 @@ export function pkg(base: string) {
3131
throw e
3232
}
3333
},
34+
async has(name: string) {
35+
try {
36+
let packageJsonPath = resolve(base, 'package.json')
37+
let packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8')
38+
return packageJsonContent.includes(`"${name}":`)
39+
} catch {}
40+
return false
41+
},
3442
async remove(packages: string[]) {
3543
let packageManager = await packageManagerForBase.get(base)
3644
let command = `${packageManager} remove ${packages.join(' ')}`

0 commit comments

Comments
 (0)