diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
index ff12fc114c13..fafee6239afb 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
@@ -48,6 +48,8 @@ describe('is-safe-migration', async () => {
[`
\n`, 'shadow'],
[`\n`, 'shadow'],
[`\n`, 'shadow'],
+ [`\n`, 'flex-grow'],
+ [`\n`, 'flex-shrink'],
// Next.js Image placeholder cases
[``, 'blur'],
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
index fa7ee7f4a1c5..f77cbb710d22 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
@@ -20,6 +20,7 @@ const CONDITIONAL_TEMPLATE_SYNTAX = [
// shadcn/ui variants
/variant\s*[:=]\s*\{?['"`]$/,
]
+const INLINE_STYLE_ATTRIBUTE = /(?:^|\s):?style\s*=\s*['"]$/i
const NEXT_PLACEHOLDER_PROP = /placeholder=\{?['"`]$/
const VUE_3_EMIT = /\b\$?emit\(['"`]$/
@@ -66,6 +67,29 @@ export function isSafeMigration(
}
}
+ let currentLineBeforeCandidate = ''
+ for (let i = location.start - 1; i >= 0; i--) {
+ let char = location.contents.at(i)!
+ if (char === '\n') {
+ break
+ }
+ currentLineBeforeCandidate = char + currentLineBeforeCandidate
+ }
+ let currentLineAfterCandidate = ''
+ for (let i = location.end; i < location.contents.length; i++) {
+ let char = location.contents.at(i)!
+ if (char === '\n') {
+ break
+ }
+ currentLineAfterCandidate += char
+ }
+
+ // Inline `style="..."` attributes can contain CSS property names that look
+ // like valid utility candidates, such as `flex-grow`.
+ if (INLINE_STYLE_ATTRIBUTE.test(currentLineBeforeCandidate)) {
+ return false
+ }
+
let [candidate] = parseCandidate(rawCandidate, designSystem)
// If we can't parse the candidate, then it's not a candidate at all. However,
@@ -123,23 +147,6 @@ export function isSafeMigration(
}
}
- let currentLineBeforeCandidate = ''
- for (let i = location.start - 1; i >= 0; i--) {
- let char = location.contents.at(i)!
- if (char === '\n') {
- break
- }
- currentLineBeforeCandidate = char + currentLineBeforeCandidate
- }
- let currentLineAfterCandidate = ''
- for (let i = location.end; i < location.contents.length; i++) {
- let char = location.contents.at(i)!
- if (char === '\n') {
- break
- }
- currentLineAfterCandidate += char
- }
-
// Heuristic: Require the candidate to be inside quotes
let isQuoteBeforeCandidate = isMiddleOfString(currentLineBeforeCandidate)
let isQuoteAfterCandidate = isMiddleOfString(currentLineAfterCandidate)