From fc261bdcf7ac64f9298090556771789855b690ff Mon Sep 17 00:00:00 2001
From: philipp-spiess <458591+philipp-spiess@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:40:42 +0000
Subject: [PATCH] Upgrade: Migrate `max-w-screen-*` candidates (#14754)
This PR migrates `max-w-screen-*` candidates to the v4 equivalent relying on the breakpoint var: `max-w-[var(--breakpoint-*)]`
---
CHANGELOG.md | 1 +
integrations/upgrade/index.test.ts | 4 +--
.../codemods/max-width-screen.test.ts | 12 +++++++++
.../src/template/codemods/max-width-screen.ts | 26 +++++++++++++++++++
.../template/codemods/theme-to-var.test.ts | 3 +++
.../src/template/migrate.ts | 2 ++
6 files changed, 46 insertions(+), 2 deletions(-)
create mode 100644 packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts
create mode 100644 packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24f1637b1e24..dfd9bbd78808 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 ceec310ae921..f7ad73c8637a 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 000000000000..3e3151cbc7da
--- /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 000000000000..de19c64d559c
--- /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 a0579dc4dcd5..eb4d42c1e9bc 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 5e2d02eab52b..d70ca20f9dec 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,
]