From 2c1dea4c1aefc8b95bef224135aec47c1bb0c107 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 28 Jan 2025 12:42:30 +0100
Subject: [PATCH] Fix handling of absolute config files in upgrade tool
 (#15927)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #15220

This PR fixes an issue where the upgrade tool would not be able to load
some JavaScript config files across different drive letters on Windows.

The issue in detail is that `path.relative(…)` tries to build a relative
path but if the file is inside the same folder, it won't start the
relative path with a `./` so we manually appended it in case that it
isn't there. The issue on Windows specifically is that
`file.relative(…)` can also return a legit absolute path, e.g. when the
file is on a different drive. In this case we obviously don't want to
prefix a path with `./`.

## Test plan

To reproduce this issue, I checked out a Tailwind v3 project _on a
different drive letter than my Windows installation_. In that case, I
was adding a repo inside `D:` while `npm` was installed in `C:`. I then
run `npx @tailwindcss/upgrade` to reproduce the issue.

The fix was validated with a local `bun` run of the upgrade tool:


![telegram-cloud-photo-size-4-5818901845756725194-y](https://github.com/user-attachments/assets/d32b21e3-a08d-4608-b65a-93dddc04f890)
---
 CHANGELOG.md                                                 | 1 +
 packages/@tailwindcss-upgrade/src/migrate.ts                 | 2 +-
 packages/@tailwindcss-upgrade/src/template/prepare-config.ts | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1fce67b5..e2c5767ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure CSS variable shorthand uses valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738))
 - Ensure font-size utilities with `none` modifier have a line-height set e.g.: `text-sm/none` ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
 - Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
+- _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927))
 
 ## [4.0.0] - 2025-01-21
 
diff --git a/packages/@tailwindcss-upgrade/src/migrate.ts b/packages/@tailwindcss-upgrade/src/migrate.ts
index 53b228256..45e758496 100644
--- a/packages/@tailwindcss-upgrade/src/migrate.ts
+++ b/packages/@tailwindcss-upgrade/src/migrate.ts
@@ -435,7 +435,7 @@ export async function linkConfigs(
       // If the path points to a file in the same directory, `path.relative` will
       // remove the leading `./` and we need to add it back in order to still
       // consider the path relative
-      if (!relative.startsWith('.')) {
+      if (!relative.startsWith('.') && !path.isAbsolute(relative)) {
         relative = './' + relative
       }
 
diff --git a/packages/@tailwindcss-upgrade/src/template/prepare-config.ts b/packages/@tailwindcss-upgrade/src/template/prepare-config.ts
index f5a817d40..e936df6a3 100644
--- a/packages/@tailwindcss-upgrade/src/template/prepare-config.ts
+++ b/packages/@tailwindcss-upgrade/src/template/prepare-config.ts
@@ -40,7 +40,7 @@ export async function prepareConfig(
     // If the path points to a file in the same directory, `path.relative` will
     // remove the leading `./` and we need to add it back in order to still
     // consider the path relative
-    if (!relative.startsWith('.')) {
+    if (!relative.startsWith('.') && !path.isAbsolute(relative)) {
       relative = './' + relative
     }
 
@@ -49,7 +49,7 @@ export async function prepareConfig(
     let newPrefix = userConfig.prefix ? migratePrefix(userConfig.prefix) : null
     let input = css`
       @import 'tailwindcss' ${newPrefix ? `prefix(${newPrefix})` : ''};
-      @config './${relative}';
+      @config '${relative}';
     `
 
     let [compiler, designSystem] = await Promise.all([