Make upgrades faster (#17898)

This PR fixes an issue where the upgrade tests were taking too long.
This PR fixes that.

Essentially when updating dependencies we did this:
```sh
npm install tailwindcss@latest
npm install @tailwindcss/postcss@latest
npm install prettier-plugin-tailwindcss@latest
```

But this is not ideal, because we are calling out to `npm` and run each
dependency in isolation.

With this PR, we essentially do it all in one go:
```sh
npm install tailwindcss@latest @tailwindcss/postcss@latest prettier-plugin-tailwindcss@latest
```

## Test plan

Testing this locally, the results look like this:

| Before | After |
|--------|-------|
| <img width="590" alt="image"
src="https://github.com/user-attachments/assets/c899d432-78c3-4945-af73-3ef4fffa08da"
/> | <img width="656" alt="image"
src="https://github.com/user-attachments/assets/a448d711-dd74-44cf-9790-c8a14fc6964f"
/> |


In CI:

| Before (with a failure) | After |
| --- | --- |
| <img width="224" alt="image"
src="https://github.com/user-attachments/assets/f58a6bf6-fdbe-4474-aa1f-444ab51a53c9"
/> | <img width="224" alt="image"
src="https://github.com/user-attachments/assets/54606df5-4f69-444b-8d4c-5ce27c5d6b41"
/> |

[ci-all]

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix HAML extraction with embedded Ruby ([#17846](https://github.com/tailwindlabs/tailwindcss/pull/17846))
 - Don't scan files for utilities when using `@reference` ([#17836](https://github.com/tailwindlabs/tailwindcss/pull/17836))
 - Fix incorrectly replacing `_` with ` ` in arbitrary modifier shorthand `bg-red-500/(--my_opacity)` ([#17889](https://github.com/tailwindlabs/tailwindcss/pull/17889))
+- Upgrade: Bump dependendencies in parallel and make the upgrade faster ([#17898](https://github.com/tailwindlabs/tailwindcss/pull/17898))
 
 ## [4.1.5] - 2025-04-30
 

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

@@ -230,18 +230,20 @@ async function run() {
     }
 
     info('Updating dependencies…')
-    for (let dependency of [
-      'tailwindcss',
-      '@tailwindcss/cli',
-      '@tailwindcss/postcss',
-      '@tailwindcss/vite',
-      '@tailwindcss/node',
-      '@tailwindcss/oxide',
-      'prettier-plugin-tailwindcss',
-    ]) {
+    {
+      let pkgManager = pkg(base)
+      let dependencies = [
+        'tailwindcss',
+        '@tailwindcss/cli',
+        '@tailwindcss/postcss',
+        '@tailwindcss/vite',
+        '@tailwindcss/node',
+        '@tailwindcss/oxide',
+        'prettier-plugin-tailwindcss',
+      ].filter((dependency) => dependency === 'tailwindcss' || pkgManager.has(dependency))
       try {
-        if (dependency === 'tailwindcss' || (await pkg(base).has(dependency))) {
-          await pkg(base).add([`${dependency}@latest`])
+        await pkgManager.add(dependencies.map((dependency) => `${dependency}@latest`))
+        for (let dependency of dependencies) {
           success(`Updated package: ${highlight(dependency)}`, { prefix: '↳ ' })
         }
       } catch {}

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

@@ -1,4 +1,5 @@
 import { exec as execCb } from 'node:child_process'
+import { readFileSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import { dirname, resolve } from 'node:path'
 import { promisify } from 'node:util'
@@ -12,6 +13,15 @@ const SAVE_DEV: Record<string, string> = {
   bun: '-d',
 }
 
+const manifests = new DefaultMap((base) => {
+  try {
+    let packageJsonPath = resolve(base, 'package.json')
+    return readFileSync(packageJsonPath, 'utf-8')
+  } catch {
+    return ''
+  }
+})
+
 export function pkg(base: string) {
   return {
     async add(packages: string[], location: 'dependencies' | 'devDependencies' = 'dependencies') {
@@ -29,15 +39,12 @@ export function pkg(base: string) {
           prefix: '↳ ',
         })
         throw e
+      } finally {
+        manifests.delete(base)
       }
     },
-    async has(name: string) {
-      try {
-        let packageJsonPath = resolve(base, 'package.json')
-        let packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8')
-        return packageJsonContent.includes(`"${name}":`)
-      } catch {}
-      return false
+    has(name: string) {
+      return manifests.get(base).includes(`"${name}":`)
     },
     async remove(packages: string[]) {
       let packageManager = await packageManagerForBase.get(base)
@@ -49,6 +56,8 @@ export function pkg(base: string) {
           prefix: '↳ ',
         })
         throw e
+      } finally {
+        manifests.delete(base)
       }
     },
   }