Apply suggestions from code review

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

Author: philipp-spiess

CHANGELOG.md

@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure individual logical property utilities are sorted later than left/right pair utilities ([#14777](https://github.com/tailwindlabs/tailwindcss/pull/14777))
-- Don't migrate important modifiers when these are used inside conditionals of certain template languages (e.g. `<div v-if="!border"/>`) ([#14774](https://github.com/tailwindlabs/tailwindcss/pull/14774))
+- Don't migrate important modifiers inside conditional statements in Vue and Alpine (e.g. `<div v-if="!border" />`) ([#14774](https://github.com/tailwindlabs/tailwindcss/pull/14774))
 - _Upgrade (experimental)_: Ensure `@import` statements for relative CSS files are actually migrated to use relative path syntax ([#14769](https://github.com/tailwindlabs/tailwindcss/pull/14769))
 
 ## [4.0.0-alpha.29] - 2024-10-23

packages/@tailwindcss-upgrade/src/template/codemods/important.test.ts

@@ -56,10 +56,13 @@ test('does not match false positives', async () => {
   shouldNotDetect(`let notBorder = !border    \n`)
   shouldNotDetect(`{ "foo": !border.something + ""}\n`)
   shouldNotDetect(`<div v-if="something && !border"></div>\n`)
+  shouldNotDetect(`<div v-else-if="something && !border"></div>\n`)
   shouldNotDetect(`<div v-show="something && !border"></div>\n`)
   shouldNotDetect(`<div v-if="!border || !border"></div>\n`)
+  shouldNotDetect(`<div v-else-if="!border || !border"></div>\n`)
   shouldNotDetect(`<div v-show="!border || !border"></div>\n`)
   shouldNotDetect(`<div v-if="!border"></div>\n`)
+  shouldNotDetect(`<div v-else-if="!border"></div>\n`)
   shouldNotDetect(`<div v-show="!border"></div>\n`)
   shouldNotDetect(`<div x-if="!border"></div>\n`)
 })

packages/@tailwindcss-upgrade/src/template/codemods/important.ts

@@ -7,12 +7,13 @@ const QUOTES = ['"', "'", '`']
 const LOGICAL_OPERATORS = ['&&', '||', '===', '==', '!=', '!==', '>', '>=', '<', '<=']
 const CONDITIONAL_TEMPLATE_SYNTAX = [
   // Vue
+  /v-else-if=['"]$/,
   /v-if=['"]$/,
   /v-show=['"]$/,
 
   // Alpine
-  /x-show=['"]$/,
   /x-if=['"]$/,
+  /x-show=['"]$/,
 ]
 
 // In v3 the important modifier `!` sits in front of the utility itself, not
@@ -63,7 +64,7 @@ export function important(
           currentLineAfterCandidate += char
         }
 
-        // Heuristics 1: Require the candidate to be inside quotes
+        // Heuristic 1: Require the candidate to be inside quotes
         let isQuoteBeforeCandidate = QUOTES.some((quote) =>
           currentLineBeforeCandidate.includes(quote),
         )
@@ -74,12 +75,12 @@ export function important(
           continue nextCandidate
         }
 
-        // Heuristics 2: Disallow object access immediately following the candidate
+        // Heuristic 2: Disallow object access immediately following the candidate
         if (currentLineAfterCandidate[0] === '.') {
           continue nextCandidate
         }
 
-        // Heuristics 3: Disallow logical operators proceeding or following the candidate
+        // Heuristic 3: Disallow logical operators preceding or following the candidate
         for (let operator of LOGICAL_OPERATORS) {
           if (
             currentLineAfterCandidate.trim().startsWith(operator) ||
@@ -89,7 +90,7 @@ export function important(
           }
         }
 
-        // Heuristics 4: Disallow conditional template syntax
+        // Heuristic 4: Disallow conditional template syntax
         for (let rule of CONDITIONAL_TEMPLATE_SYNTAX) {
           if (rule.test(currentLineBeforeCandidate)) {
             continue nextCandidate