From 4e5e0a3e1bcf30e386757d6cc385bbdfc2038d6e Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 29 Oct 2024 00:46:24 +0100
Subject: [PATCH] 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.
---
 CHANGELOG.md                                  |  4 +++
 integrations/upgrade/index.test.ts            | 30 +++++++++++++++++++
 packages/@tailwindcss-upgrade/src/index.ts    |  6 ++++
 .../src/migrate-prettier.ts                   | 15 ++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 packages/@tailwindcss-upgrade/src/migrate-prettier.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a08d0c63..6030c14f3 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index cd89f6d38..848e42bcf 100644
--- a/integrations/upgrade/index.test.ts
+++ b/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')
+  },
+)
diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
index 46b1fd672..767bec8f8 100644
--- a/packages/@tailwindcss-upgrade/src/index.ts
+++ b/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)
diff --git a/packages/@tailwindcss-upgrade/src/migrate-prettier.ts b/packages/@tailwindcss-upgrade/src/migrate-prettier.ts
new file mode 100644
index 000000000..9ff1e824d
--- /dev/null
+++ b/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 {}
+}