diff --git a/CHANGELOG.md b/CHANGELOG.md index 71822866829c..9a5393eac2ec 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 c3949985dc94..ba8a2d0d9852 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 81d8f5410312..281b985aebc6 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}` } } }