Bump prettier-plugin-tailwindcss to latest version during upgrade (#14808)

This PR adds a migration to bump the `prettier-plugin-tailwindcss`
version to the latest version when upgrading your project. This is to
ensure that the plugin is compatible with the latest version of Tailwind
CSS.

Note: we will only do this _if_ you already used the
`prettier-plugin-tailwindcss` plugin in your project.

Author: RobinMalfait

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- _Upgrade (experimental)_: Bump `prettier-plugin-tailwindcss` to latest version during upgrade ([#14808](https://github.com/tailwindlabs/tailwindcss/pull/14808))
+
 ### Fixed
 
 - Support calling `config()` with no arguments in plugin API ([#14799](https://github.com/tailwindlabs/tailwindcss/pull/14799))

integrations/upgrade/index.test.ts

@@ -1629,3 +1629,33 @@ test(
     `)
   },
 )
+
+test(
+  'migrating the prettier-plugin-tailwindcss version',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/upgrade": "workspace:^"
+          },
+          "devDependencies": {
+            "prettier-plugin-tailwindcss": "0.5.0"
+          }
+        }
+      `,
+      'tailwind.config.js': js`module.exports = {}`,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('npx @tailwindcss/upgrade --force')
+
+    let pkg = JSON.parse(await fs.read('package.json'))
+
+    expect(pkg.devDependencies).toMatchObject({
+      'prettier-plugin-tailwindcss': expect.any(String),
+    })
+    expect(pkg.devDependencies['prettier-plugin-tailwindcss']).not.toEqual('0.5.0')
+  },
+)

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

@@ -13,6 +13,7 @@ import {
 } from './migrate'
 import { migrateJsConfig } from './migrate-js-config'
 import { migratePostCSSConfig } from './migrate-postcss'
+import { migratePrettierPlugin } from './migrate-prettier'
 import { Stylesheet } from './stylesheet'
 import { migrate as migrateTemplate } from './template/migrate'
 import { prepareConfig } from './template/prepare-config'
@@ -191,6 +192,11 @@ async function run() {
     await migratePostCSSConfig(base)
   }
 
+  {
+    // Migrate the prettier plugin to the latest version
+    await migratePrettierPlugin(base)
+  }
+
   try {
     // Upgrade Tailwind CSS
     await pkg('add tailwindcss@next', base)

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

@@ -0,0 +1,15 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { pkg } from './utils/packages'
+import { success } from './utils/renderer'
+
+export async function migratePrettierPlugin(base: string) {
+  let packageJsonPath = path.resolve(base, 'package.json')
+  try {
+    let packageJson = await fs.readFile(packageJsonPath, 'utf-8')
+    if (packageJson.includes('prettier-plugin-tailwindcss')) {
+      await pkg('add prettier-plugin-tailwindcss@latest', base)
+      success(`Prettier plugin migrated to latest version.`)
+    }
+  } catch {}
+}