From 3a1b27e3f879c49dd70ac8afc37840eccc609638 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 28 Apr 2025 19:25:04 +0200
Subject: [PATCH] Pretty print variants starting with `@` (#17814)

While working on another PR I noticed that some variants were re-printed
in an odd way.

Specifically, this PR fixes an issue where variants using the `@`-root
were incorrectly printed.

- `@lg` was printed as `@-lg`
- `@[400px]` was printed as `@-[400px]`

This is now special cased where the `-` is not inserted for `@`-root
variants.

## Test plan

1. Added a test to ensure the `@`-root variants are printed correctly.
---
 CHANGELOG.md                                               | 1 +
 .../src/codemods/template/candidates.test.ts               | 4 ++++
 .../src/codemods/template/candidates.ts                    | 7 +++++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 718228668..9a5393eac 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
 - Replace `_` with `.` in theme suggestions for `@utility` if surrounded by digits ([#17743](https://github.com/tailwindlabs/tailwindcss/pull/17743))
 - Upgrade: Bump all Tailwind CSS related dependencies during upgrade ([#17763](https://github.com/tailwindlabs/tailwindcss/pull/17763))
 - PostCSS: Ensure that errors in stylesheet dependencies are recoverable ([#17754](https://github.com/tailwindlabs/tailwindcss/pull/17754))
+- Upgrade: Correctly print variants starting with `@` ([#17814](https://github.com/tailwindlabs/tailwindcss/pull/17814))
 
 ## [4.1.4] - 2025-04-14
 
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts
index c3949985d..ba8a2d0d9 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts
@@ -166,6 +166,10 @@ const variants = [
   ['[&:is(_p_)]:', '[p]:'],
   ['has-[&:is(p)]:', 'has-[p]:'],
   ['has-[&:is(_p_)]:', 'has-[p]:'],
+
+  // Handle special `@` variants. These shouldn't be printed as `@-`
+  ['@xl:', '@xl:'],
+  ['@[123px]:', '@[123px]:'],
 ]
 
 let combinations: [string, string][] = []
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts b/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts
index 81d8f5410..281b985ae 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts
@@ -105,15 +105,18 @@ function printVariant(variant: Variant) {
   // Handle functional variants
   if (variant.kind === 'functional') {
     base += variant.root
+    // `@` is a special case for functional variants. We want to print: `@lg`
+    // instead of `@-lg`
+    let hasDash = variant.root !== '@'
     if (variant.value) {
       if (variant.value.kind === 'arbitrary') {
         let isVarValue = isVar(variant.value.value)
         let value = isVarValue ? variant.value.value.slice(4, -1) : variant.value.value
         let [open, close] = isVarValue ? ['(', ')'] : ['[', ']']
 
-        base += `-${open}${printArbitraryValue(value)}${close}`
+        base += `${hasDash ? '-' : ''}${open}${printArbitraryValue(value)}${close}`
       } else if (variant.value.kind === 'named') {
-        base += `-${variant.value.value}`
+        base += `${hasDash ? '-' : ''}${variant.value.value}`
       }
     }
   }