Upgrade: Do not extract class names from functions (e.g. shadow in filter: 'drop-shadow(…)')

Author: philipp-spiess

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `inset-shadow-*` suggestions in IntelliSense ([#15471](https://github.com/tailwindlabs/tailwindcss/pull/15471))
 - Only compile arbitrary values ending in `]` ([#15503](https://github.com/tailwindlabs/tailwindcss/pull/15503))
 - Improve performance and memory usage ([#15529](https://github.com/tailwindlabs/tailwindcss/pull/15529))
+- _Upgrade (experimental)_: Do not extract class names from functions (e.g. `shadow` in `filter: 'drop-shadow(…)'`)
 
 ### Changed
 
@@ -782,4 +783,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [4.0.0-alpha.1] - 2024-03-06
 
 - First 4.0.0-alpha.1 release
-

integrations/upgrade/js-config.test.ts

@@ -137,6 +137,7 @@ test(
       'src/test.js': ts`
         export default {
           'shouldNotMigrate': !border.test + '',
+          'filter': 'drop-shadow(0 0 0.5rem #000)',
         }
       `,
       'src/index.html': html`
@@ -288,6 +289,7 @@ test(
       --- src/test.js ---
       export default {
         'shouldNotMigrate': !border.test + '',
+        'filter': 'drop-shadow(0 0 0.5rem #000)',
       }
       "
     `)

packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts

@@ -39,3 +39,33 @@ test.each([
 
   expect(await legacyClasses(designSystem, {}, candidate)).toEqual(result)
 })
+
+test('does not match false positives', async () => {
+  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
+    base: __dirname,
+  })
+
+  async function shouldNotDetect(example: string, candidate = 'shadow') {
+    expect(
+      await legacyClasses(designSystem, {}, candidate, {
+        contents: example,
+        start: example.indexOf(candidate),
+        end: example.indexOf(candidate) + candidate.length,
+      }),
+    ).toEqual('shadow')
+  }
+
+  await shouldNotDetect(`let notShadow = shadow    \n`)
+  await shouldNotDetect(`{ "foo": shadow.something + ""}\n`)
+  await shouldNotDetect(`<div v-if="something && shadow"></div>\n`)
+  await shouldNotDetect(`<div v-else-if="something && shadow"></div>\n`)
+  await shouldNotDetect(`<div v-show="something && shadow"></div>\n`)
+  await shouldNotDetect(`<div v-if="shadow || shadow"></div>\n`)
+  await shouldNotDetect(`<div v-else-if="shadow || shadow"></div>\n`)
+  await shouldNotDetect(`<div v-show="shadow || shadow"></div>\n`)
+  await shouldNotDetect(`<div v-if="shadow"></div>\n`)
+  await shouldNotDetect(`<div v-else-if="shadow"></div>\n`)
+  await shouldNotDetect(`<div v-show="shadow"></div>\n`)
+  await shouldNotDetect(`<div x-if="shadow"></div>\n`)
+  await shouldNotDetect(`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd);'}}\n`)
+})

packages/@tailwindcss-upgrade/src/template/is-safe-migration.ts

@@ -41,6 +41,11 @@ export function isSafeMigration(location: { contents: string; start: number; end
     return false
   }
 
+  // Heuristic 3: Disallow function call expressions immediately following the candidate
+  if (currentLineAfterCandidate.trim().startsWith('(')) {
+    return false
+  }
+
   // Heuristic 3: Disallow logical operators preceding or following the candidate
   for (let operator of LOGICAL_OPERATORS) {
     if (