From 02cb52ad38ce540862aac8e26efde51f5d4a3c15 Mon Sep 17 00:00:00 2001
From: RobinMalfait <1834413+RobinMalfait@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:09:55 +0000
Subject: [PATCH] Add codemod for migrating the `@screen` directive (#14749)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds a codemod for migrating the old `@screen` directive from Tailwind
CSS v2 that also worked in Tailwind CSS v3 but wasn't documented anymore.

Internally, this first migrates `@screen md` to `@media screen(md)`, then we rely on the existing migration that migrates the `screen(…)` function.

Input:
```css
@screen md {
  .foo {
    color: red;
  }
}
```

Output (IR):
```css
@media screen(md) {
  .foo {
    color: red;
  }
}
```

Output:
```css
@media theme(--breakpoint-md) {
  .foo {
    color: red;
  }
}
```
---
 CHANGELOG.md                                   |  1 +
 .../src/codemods/migrate-media-screen.test.ts  | 18 ++++++++++++++++++
 .../src/codemods/migrate-media-screen.ts       |  7 +++++++
 3 files changed, 26 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d0b4831f..81c92200c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,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 `@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))
 
 ### Fixed
 
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts
index b7370d4d1..d0d231207 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts
@@ -41,6 +41,24 @@ it('should migrate a built-in breakpoint', async () => {
   `)
 })
 
+it('should migrate `@screen` with a built-in breakpoint', async () => {
+  expect(
+    await migrate(css`
+      @screen md {
+        .foo {
+          color: red;
+        }
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    "@media (width >= theme(--breakpoint-md)) {
+      .foo {
+        color: red;
+      }
+    }"
+  `)
+})
+
 it('should migrate a custom min-width screen (string)', async () => {
   expect(
     await migrate(
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts
index 02bd73dda..538e482c5 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts
@@ -24,6 +24,13 @@ export function migrateMediaScreen({
       return value ? buildMediaQuery(value) : null
     })
 
+    // First migrate `@screen md` to `@media screen(md)`
+    root.walkAtRules('screen', (node) => {
+      node.name = 'media'
+      node.params = `screen(${node.params})`
+    })
+
+    // Then migrate the `screen(…)` function
     root.walkAtRules((rule) => {
       if (rule.name !== 'media') return