From 65bad113808702ba7cbae712b748ee9f5473be51 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 12 Sep 2025 11:20:18 +0200
Subject: [PATCH] Do not migrate `variant = 'outline'` during upgrades (#18922)

This PR improves the upgrade tool for shadcn/ui projects where the
`variant = "outline"` is incorrectly migrated to `variant =
"outline-solid"`.

This PR also handles a few more cases:

```ts
// As default argument
function Button({ variant = "outline", ...props }: ButtonProps) { }

// With different kinds of quotes (single, double, backticks)
function Button({ variant = 'outline', ...props }: ButtonProps) { }

// Regardless of whitespace
function Button({ variant="outline", ...props }: ButtonProps) { }

// In JSX
<Button variant="outline" />

// With different quotes and using JavaScript expressions
<Button variant={'outline'} />

// As an object property
buttonVariants({ variant: "outline" })
```
---
 CHANGELOG.md                                         |  1 +
 .../src/codemods/template/is-safe-migration.test.ts  | 12 ++++++++++++
 .../src/codemods/template/is-safe-migration.ts       |  3 +++
 3 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8a11dcb3..4640ea227 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
 - Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
 - Prevent duplicate CSS when overwriting a static utility with a theme key ([#18056](https://github.com/tailwindlabs/tailwindcss/pull/18056))
+- Do not migrate `variant = 'outline'` during upgrades ([#18922](https://github.com/tailwindlabs/tailwindcss/pull/18922))
 
 ## [4.1.13] - 2025-09-03
 
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 f62854801..8bcaf52f4 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
@@ -91,6 +91,18 @@ describe('is-safe-migration', async () => {
 
     [`function foo(blur, foo)`, 'blur'],
     [`function foo(blur,foo)`, 'blur'],
+
+    // shadcn/ui variants
+    [`<Button variant="outline" />`, 'outline'],
+    [`<Button variant='outline' />`, 'outline'],
+    [`<Button variant={"outline"} />`, 'outline'],
+    [`<Button variant={'outline'} />`, 'outline'],
+    [`function Button({ variant = "outline" }) {}`, 'outline'],
+    [`function Button({ variant = 'outline' }) {}`, 'outline'],
+    [`function Button({ variant="outline" }) {}`, 'outline'],
+    [`function Button({ variant='outline' }) {}`, 'outline'],
+    [`Button({ variant: "outline" })`, 'outline'],
+    [`Button({ variant: 'outline' })`, 'outline'],
   ])('does not replace classes in invalid positions #%#', async (example, candidate) => {
     expect(
       await migrateCandidate(designSystem, {}, candidate, {
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 e4ec86b28..7851db650 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
@@ -18,6 +18,9 @@ const CONDITIONAL_TEMPLATE_SYNTAX = [
   /x-if=['"]$/,
   /x-show=['"]$/,
   /wire:[^\s]*?$/,
+
+  // shadcn/ui variants
+  /variant\s*[:=]\s*\{?['"`]$/,
 ]
 const NEXT_PLACEHOLDER_PROP = /placeholder=\{?['"`]$/
 const VUE_3_EMIT = /\b\$?emit\(['"`]$/