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.

Author: RobinMalfait

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
 

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][] = []

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}`
       }
     }
   }