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)