From e770c0da30d2edf5d2126c9a819ed30923266481 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 25 Sep 2024 14:48:22 +0200
Subject: [PATCH] CSS codemod: Migrate `@import "tailwindcss/tailwind.css"` to
 `@import "tailwindcss"` (#14514)

This PR adds an additional step to ensure we migrate:
```css
@import "tailwindcss/tailwind.css";
```

To:
```css
@import "tailwindcss";
```
---
 CHANGELOG.md                                           |  1 +
 .../src/codemods/migrate-tailwind-directives.test.ts   | 10 ++++++++++
 .../src/codemods/migrate-tailwind-directives.ts        |  7 ++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6bb0aed5..4d6158040 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
 
 - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512))
 - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))
+- _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
 
 ## [4.0.0-alpha.25] - 2024-09-24
 
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.test.ts
index 9f4ae0955..1f4a00b52 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.test.ts
@@ -24,6 +24,16 @@ it("should not migrate `@import 'tailwindcss'`", async () => {
   `)
 })
 
+it('should migrate the tailwind.css import', async () => {
+  expect(
+    await migrate(css`
+      @import 'tailwindcss/tailwind.css';
+    `),
+  ).toEqual(css`
+    @import 'tailwindcss';
+  `)
+})
+
 it('should migrate the default @tailwind directives to a single import', async () => {
   expect(
     await migrate(css`
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.ts
index 5bb4a34e2..a3007b77a 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.ts
@@ -15,8 +15,13 @@ export function migrateTailwindDirectives(): Plugin {
     let layerOrder: string[] = []
 
     root.walkAtRules((node) => {
+      // Migrate legacy `@import "tailwindcss/tailwind.css"`
+      if (node.name === 'import' && node.params.match(/^["']tailwindcss\/tailwind\.css["']$/)) {
+        node.params = node.params.replace('tailwindcss/tailwind.css', 'tailwindcss')
+      }
+
       // Track old imports and directives
-      if (
+      else if (
         (node.name === 'tailwind' && node.params === 'base') ||
         (node.name === 'import' && node.params.match(/^["']tailwindcss\/base["']$/))
       ) {