diff --git a/CHANGELOG.md b/CHANGELOG.md index 24f1637b1..dfd9bbd78 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Upgrade (experimental)_: Migrate `plugins` with options to CSS ([#14700](https://github.com/tailwindlabs/tailwindcss/pull/14700)) - _Upgrade (experimental)_: Allow JS configuration files with `corePlugins` options to be migrated to CSS ([#14742](https://github.com/tailwindlabs/tailwindcss/pull/14742)) +- _Upgrade (experimental)_: Migrate `max-w-screen-*` utilities to `max-w-[var(…)]`([#14754](https://github.com/tailwindlabs/tailwindcss/pull/14754)) - _Upgrade (experimental)_: Migrate `@variants` and `@responsive` directives ([#14748](https://github.com/tailwindlabs/tailwindcss/pull/14748)) - _Upgrade (experimental)_: Migrate `@screen` directive ([#14749](https://github.com/tailwindlabs/tailwindcss/pull/14749)) diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index ceec310ae..f7ad73c86 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -20,7 +20,7 @@ test( `, 'src/index.html': html`

🤠👋

-
+
`, 'src/input.css': css` @tailwind base; @@ -42,7 +42,7 @@ test( " --- ./src/index.html ---

🤠👋

-
+
--- ./src/input.css --- @import 'tailwindcss'; diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts new file mode 100644 index 000000000..3e3151cbc --- /dev/null +++ b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts @@ -0,0 +1,12 @@ +import { __unstable__loadDesignSystem } from '@tailwindcss/node' +import { expect, test } from 'vitest' +import { maxWidthScreen } from './max-width-screen' + +test('converts max-w-screen-* to max-w-[theme(screens.*)] (so it will later be converted to the var injection)', async () => { + let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', { + base: __dirname, + }) + + let migrated = maxWidthScreen(designSystem, {}, 'max-w-screen-md') + expect(migrated).toMatchInlineSnapshot(`"max-w-[theme(screens.md)]"`) +}) diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts new file mode 100644 index 000000000..de19c64d5 --- /dev/null +++ b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts @@ -0,0 +1,26 @@ +import type { Config } from 'tailwindcss' +import type { DesignSystem } from '../../../../tailwindcss/src/design-system' +import { printCandidate } from '../candidates' + +export function maxWidthScreen( + designSystem: DesignSystem, + _userConfig: Config, + rawCandidate: string, +): string { + for (let candidate of designSystem.parseCandidate(rawCandidate)) { + if ( + candidate.kind === 'functional' && + candidate.root === 'max-w' && + candidate.value?.value.startsWith('screen-') + ) { + return printCandidate(designSystem, { + ...candidate, + value: { + ...candidate.value, + value: `[theme(screens.${candidate.value.value.slice(7)})]`, + }, + }) + } + } + return rawCandidate +} diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts index a0579dc4d..eb4d42c1e 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts @@ -86,6 +86,9 @@ test.each([ // `theme(…)` calls valid in v3, but not in v4 should still be converted. ['[--foo:theme(fontWeight.semibold)]', '[--foo:theme(fontWeight.semibold)]'], + // `screens` values + ['max-w-[theme(screens.md)]', 'max-w-[var(--breakpoint-md)]'], + // Invalid cases ['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'], ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'], diff --git a/packages/@tailwindcss-upgrade/src/template/migrate.ts b/packages/@tailwindcss-upgrade/src/template/migrate.ts index 5e2d02eab..d70ca20f9 100644 --- a/packages/@tailwindcss-upgrade/src/template/migrate.ts +++ b/packages/@tailwindcss-upgrade/src/template/migrate.ts @@ -7,6 +7,7 @@ import { arbitraryValueToBareValue } from './codemods/arbitrary-value-to-bare-va import { automaticVarInjection } from './codemods/automatic-var-injection' import { bgGradient } from './codemods/bg-gradient' import { important } from './codemods/important' +import { maxWidthScreen } from './codemods/max-width-screen' import { prefix } from './codemods/prefix' import { simpleLegacyClasses } from './codemods/simple-legacy-classes' import { themeToVar } from './codemods/theme-to-var' @@ -31,6 +32,7 @@ export const DEFAULT_MIGRATIONS: Migration[] = [ bgGradient, simpleLegacyClasses, arbitraryValueToBareValue, + maxWidthScreen, themeToVar, variantOrder, ]