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-*)]`

Author: philipp-spiess

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))
 

integrations/upgrade/index.test.ts

@@ -20,7 +20,7 @@ test(
       `,
       'src/index.html': html`
         <h1>🤠👋</h1>
-        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"></div>
+        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md"></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -42,7 +42,7 @@ test(
       "
       --- ./src/index.html ---
       <h1>🤠👋</h1>
-      <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"></div>
+      <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)]"></div>
 
       --- ./src/input.css ---
       @import 'tailwindcss';

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)]"`)
+})

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

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'],

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,
 ]