Upgrade: Error when project is already using Tailwind CSS v4 (#15015)

philipp-spiess · RobinMalfait · web-flow · commit b3d1cbb72ff7 · 2024-11-19T15:53:02.000+01:00
In some local testing we ran the `@tailwindcss/upgrade` command twice in
a row. It would be great to get some feedback that this is not working,
so this PR now checks if it can resolve the installed version of
`tailwindcss` and if it can, it requires it to be &lt; 4 (you can bypass
this check with `--force`).

---------

Co-authored-by: Robin Malfait &lt;malfait.robin@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow `addUtilities()` and `addComponents()` to work with child combinators and other complex selectors ([#15029](https://github.com/tailwindlabs/tailwindcss/pull/15029))
 - _Upgrade (experimental)_: Migrate `[&>*]` to the `*` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
 - _Upgrade (experimental)_: Migrate `[&_*]` to the `**` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
+- _Upgrade (experimental)_: Warn when trying to migrating a project that is not on Tailwind CSS v3 ([#15015](https://github.com/tailwindlabs/tailwindcss/pull/15015))
 
 ### Fixed
 
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
@@ -954,6 +954,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -2463,3 +2464,37 @@ test(
     `)
   },
 )
+
+test(
+  'requires Tailwind v3 before attempting an upgrade',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': js` export default {} `,
+      'src/index.html': html`
+        <div class="underline"></div>
+      `,
+      'src/index.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec }) => {
+    let output = await exec('npx @tailwindcss/upgrade', {}, { ignoreStdErr: true }).catch((e) =>
+      e.toString(),
+    )
+
+    expect(output).toMatch(
+      /Tailwind CSS v.* found. The migration tool can only be run on v3 projects./,
+    )
+  },
+)
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
@@ -9,6 +9,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -297,6 +298,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/typography": "^0.5.15",
             "@tailwindcss/upgrade": "workspace:^"
           }
@@ -404,6 +406,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -485,6 +488,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -572,6 +576,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -640,6 +645,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -718,6 +724,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -838,6 +845,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -915,6 +923,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -973,6 +982,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -1034,6 +1044,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -1077,6 +1088,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -1136,6 +1148,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -1219,6 +1232,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -1330,6 +1344,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
@@ -1443,6 +1458,7 @@ describe('border compatibility', () => {
         'package.json': json`
           {
             "dependencies": {
+              "tailwindcss": "^3",
               "@tailwindcss/upgrade": "workspace:^"
             }
           }
diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
@@ -22,6 +22,7 @@ import { prepareConfig } from './template/prepare-config'
 import { args, type Arg } from './utils/args'
 import { isRepoDirty } from './utils/git'
 import { hoistStaticGlobParts } from './utils/hoist-static-glob-parts'
+import { getPackageVersion } from './utils/package-version'
 import { pkg } from './utils/packages'
 import { eprintln, error, header, highlight, info, relative, success } from './utils/renderer'
 
@@ -50,6 +51,7 @@ async function run() {
   let cleanup: (() => void)[] = []
 
   if (!flags['--force']) {
+    // Require a clean git directory
     if (isRepoDirty()) {
       error('Git directory is not clean. Please stash or commit your changes before migrating.')
       info(
@@ -59,6 +61,15 @@ async function run() {
     }
   }
 
+  // Require an installed `tailwindcss` version < 4
+  let tailwindVersion = await getPackageVersion('tailwindcss', base)
+  if (tailwindVersion && Number(tailwindVersion.split('.')[0]) !== 3) {
+    error(
+      `Tailwind CSS v${tailwindVersion} found. The migration tool can only be run on v3 projects.`,
+    )
+    process.exit(1)
+  }
+
   {
     // Stylesheet migrations
 
diff --git a/packages/@tailwindcss-upgrade/src/utils/package-version.ts b/packages/@tailwindcss-upgrade/src/utils/package-version.ts
@@ -0,0 +1,18 @@
+import fs from 'node:fs/promises'
+import { createRequire } from 'node:module'
+
+const localResolve = createRequire(import.meta.url).resolve
+
+/**
+ * Resolves the version string of an npm dependency installed in the based
+ * directory.
+ */
+export async function getPackageVersion(pkg: string, base: string): Promise<string | null> {
+  try {
+    let packageJson = localResolve(`${pkg}/package.json`, { paths: [base] })
+    let { version } = JSON.parse(await fs.readFile(packageJson, 'utf8'))
+    return version
+  } catch {
+    return null
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ test(`
`9`	`9`	'package.json': json`
`10`	`10`	`{`
`11`	`11`	`"dependencies": {`
	`12`	`+ "tailwindcss": "^3",`
`12`	`13`	`"@tailwindcss/upgrade": "workspace:^"`
`13`	`14`	`}`
`14`	`15`	`}`
`@@ -297,6 +298,7 @@ test(`
`297`	`298`	'package.json': json`
`298`	`299`	`{`
`299`	`300`	`"dependencies": {`
	`301`	`+ "tailwindcss": "^3",`
`300`	`302`	`"@tailwindcss/typography": "^0.5.15",`
`301`	`303`	`"@tailwindcss/upgrade": "workspace:^"`
`302`	`304`	`}`
`@@ -404,6 +406,7 @@ test(`
`404`	`406`	'package.json': json`
`405`	`407`	`{`
`406`	`408`	`"dependencies": {`
	`409`	`+ "tailwindcss": "^3",`
`407`	`410`	`"@tailwindcss/upgrade": "workspace:^"`
`408`	`411`	`}`
`409`	`412`	`}`
`@@ -485,6 +488,7 @@ test(`
`485`	`488`	'package.json': json`
`486`	`489`	`{`
`487`	`490`	`"dependencies": {`
	`491`	`+ "tailwindcss": "^3",`
`488`	`492`	`"@tailwindcss/upgrade": "workspace:^"`
`489`	`493`	`}`
`490`	`494`	`}`
`@@ -572,6 +576,7 @@ test(`
`572`	`576`	'package.json': json`
`573`	`577`	`{`
`574`	`578`	`"dependencies": {`
	`579`	`+ "tailwindcss": "^3",`
`575`	`580`	`"@tailwindcss/upgrade": "workspace:^"`
`576`	`581`	`}`
`577`	`582`	`}`
`@@ -640,6 +645,7 @@ test(`
`640`	`645`	'package.json': json`
`641`	`646`	`{`
`642`	`647`	`"dependencies": {`
	`648`	`+ "tailwindcss": "^3",`
`643`	`649`	`"@tailwindcss/upgrade": "workspace:^"`
`644`	`650`	`}`
`645`	`651`	`}`
`@@ -718,6 +724,7 @@ test(`
`718`	`724`	'package.json': json`
`719`	`725`	`{`
`720`	`726`	`"dependencies": {`
	`727`	`+ "tailwindcss": "^3",`
`721`	`728`	`"@tailwindcss/upgrade": "workspace:^"`
`722`	`729`	`}`
`723`	`730`	`}`
`@@ -838,6 +845,7 @@ test(`
`838`	`845`	'package.json': json`
`839`	`846`	`{`
`840`	`847`	`"dependencies": {`
	`848`	`+ "tailwindcss": "^3",`
`841`	`849`	`"@tailwindcss/upgrade": "workspace:^"`
`842`	`850`	`}`
`843`	`851`	`}`
`@@ -915,6 +923,7 @@ describe('border compatibility', () => {`
`915`	`923`	'package.json': json`
`916`	`924`	`{`
`917`	`925`	`"dependencies": {`
	`926`	`+ "tailwindcss": "^3",`
`918`	`927`	`"@tailwindcss/upgrade": "workspace:^"`
`919`	`928`	`}`
`920`	`929`	`}`
`@@ -973,6 +982,7 @@ describe('border compatibility', () => {`
`973`	`982`	'package.json': json`
`974`	`983`	`{`
`975`	`984`	`"dependencies": {`
	`985`	`+ "tailwindcss": "^3",`
`976`	`986`	`"@tailwindcss/upgrade": "workspace:^"`
`977`	`987`	`}`
`978`	`988`	`}`
`@@ -1034,6 +1044,7 @@ describe('border compatibility', () => {`
`1034`	`1044`	'package.json': json`
`1035`	`1045`	`{`
`1036`	`1046`	`"dependencies": {`
	`1047`	`+ "tailwindcss": "^3",`
`1037`	`1048`	`"@tailwindcss/upgrade": "workspace:^"`
`1038`	`1049`	`}`
`1039`	`1050`	`}`
`@@ -1077,6 +1088,7 @@ describe('border compatibility', () => {`
`1077`	`1088`	'package.json': json`
`1078`	`1089`	`{`
`1079`	`1090`	`"dependencies": {`
	`1091`	`+ "tailwindcss": "^3",`
`1080`	`1092`	`"@tailwindcss/upgrade": "workspace:^"`
`1081`	`1093`	`}`
`1082`	`1094`	`}`
`@@ -1136,6 +1148,7 @@ describe('border compatibility', () => {`
`1136`	`1148`	'package.json': json`
`1137`	`1149`	`{`
`1138`	`1150`	`"dependencies": {`
	`1151`	`+ "tailwindcss": "^3",`
`1139`	`1152`	`"@tailwindcss/upgrade": "workspace:^"`
`1140`	`1153`	`}`
`1141`	`1154`	`}`
`@@ -1219,6 +1232,7 @@ describe('border compatibility', () => {`
`1219`	`1232`	'package.json': json`
`1220`	`1233`	`{`
`1221`	`1234`	`"dependencies": {`
	`1235`	`+ "tailwindcss": "^3",`
`1222`	`1236`	`"@tailwindcss/upgrade": "workspace:^"`
`1223`	`1237`	`}`
`1224`	`1238`	`}`
`@@ -1330,6 +1344,7 @@ describe('border compatibility', () => {`
`1330`	`1344`	'package.json': json`
`1331`	`1345`	`{`
`1332`	`1346`	`"dependencies": {`
	`1347`	`+ "tailwindcss": "^3",`
`1333`	`1348`	`"@tailwindcss/upgrade": "workspace:^"`
`1334`	`1349`	`}`
`1335`	`1350`	`}`
`@@ -1443,6 +1458,7 @@ describe('border compatibility', () => {`
`1443`	`1458`	'package.json': json`
`1444`	`1459`	`{`
`1445`	`1460`	`"dependencies": {`
	`1461`	`+ "tailwindcss": "^3",`
`1446`	`1462`	`"@tailwindcss/upgrade": "workspace:^"`
`1447`	`1463`	`}`
`1448`	`1464`	`}`