[@tailwindcss/upgrade] Don’t migrate inline style properties

packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts

@@ -48,6 +48,8 @@ describe('is-safe-migration', async () => {
     [`<div v-show="shadow"></div>\n`, 'shadow'],
     [`<div x-if="shadow"></div>\n`, 'shadow'],
     [`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd)'}}/>\n`, 'shadow'],
+    [`<div style="flex-grow: 1"></div>\n`, 'flex-grow'],
+    [`<div style='flex-shrink: 0'></div>\n`, 'flex-shrink'],
 
     // Next.js Image placeholder cases
     [`<Image placeholder="blur" src="/image.jpg" />`, 'blur'],

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)