From 17c7c7ec30a6202e2e19d439ca00a91862848ada Mon Sep 17 00:00:00 2001
From: Paul Nodet <paul.nodet@gmail.com>
Date: Tue, 11 Feb 2025 17:37:59 +0100
Subject: [PATCH] fix(upgrade): prevent nextjs image blur property from
 modified (#16405)

Fix #16404

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
---
 CHANGELOG.md                                                | 4 ++++
 .../src/template/codemods/legacy-classes.test.ts            | 5 +++++
 .../@tailwindcss-upgrade/src/template/is-safe-migration.ts  | 6 ++++++
 3 files changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddc452a3e..c3ee57f18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Revert change to no longer include theme variables that aren't used in compiled CSS ([#16403](https://github.com/tailwindlabs/tailwindcss/pull/16403))
 
+### Fixed
+
+- Upgrade: Don't migrate `blur` to `blur-sm` when used with Next.js `<Image placeholder="blur" />` ([#16405](https://github.com/tailwindlabs/tailwindcss/pull/16405))
+
 ## [4.0.5] - 2025-02-08
 
 ### Added
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
index f301deaa9..6b8bbe4c6 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
@@ -68,4 +68,9 @@ test('does not replace classes in invalid positions', async () => {
   await shouldNotReplace(`<div v-show="shadow"></div>\n`)
   await shouldNotReplace(`<div x-if="shadow"></div>\n`)
   await shouldNotReplace(`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd)'}}/>\n`)
+
+  // Next.js Image placeholder cases
+  await shouldNotReplace(`<Image placeholder="blur" src="/image.jpg" />`, 'blur')
+  await shouldNotReplace(`<Image placeholder={'blur'} src="/image.jpg" />`, 'blur')
+  await shouldNotReplace(`<Image placeholder={blur} src="/image.jpg" />`, 'blur')
 })
diff --git a/packages/@tailwindcss-upgrade/src/template/is-safe-migration.ts b/packages/@tailwindcss-upgrade/src/template/is-safe-migration.ts
index e0408d3e5..dc84d3022 100644
--- a/packages/@tailwindcss-upgrade/src/template/is-safe-migration.ts
+++ b/packages/@tailwindcss-upgrade/src/template/is-safe-migration.ts
@@ -10,6 +10,7 @@ const CONDITIONAL_TEMPLATE_SYNTAX = [
   /x-if=['"]$/,
   /x-show=['"]$/,
 ]
+const NEXT_PLACEHOLDER_PROP = /placeholder=\{?['"]$/
 
 export function isSafeMigration(location: { contents: string; start: number; end: number }) {
   let currentLineBeforeCandidate = ''
@@ -63,5 +64,10 @@ export function isSafeMigration(location: { contents: string; start: number; end
     }
   }
 
+  // Heuristic: Disallow Next.js Image `placeholder` prop
+  if (NEXT_PLACEHOLDER_PROP.test(currentLineBeforeCandidate)) {
+    return false
+  }
+
   return true
 }