diff --git a/CHANGELOG.md b/CHANGELOG.md index 261e67188b24..85901f90c98b 100644 --- a/CHANGELOG.md +++ b/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(…)'`) ([#15566](https://github.com/tailwindlabs/tailwindcss/pull/15566)) ### 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 - diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index f2643143a124..e9ad772f6803 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/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)', } " `) diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/important.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/important.test.ts index 60d78aa53675..6667d1e3ac47 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/important.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/important.test.ts @@ -38,31 +38,31 @@ test('does not match false positives', async () => { ).toEqual('!border') }) -test('does not match false positives', async () => { +test('does not replace classes in invalid positions', async () => { let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', { base: __dirname, }) - function shouldNotDetect(example: string, candidate = '!border') { + function shouldNotReplace(example: string, candidate = '!border') { expect( important(designSystem, {}, candidate, { contents: example, start: example.indexOf(candidate), end: example.indexOf(candidate) + candidate.length, }), - ).toEqual('!border') + ).toEqual(candidate) } - shouldNotDetect(`let notBorder = !border \n`) - shouldNotDetect(`{ "foo": !border.something + ""}\n`) - shouldNotDetect(`
\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) - shouldNotDetect(`\n`) + shouldNotReplace(`let notBorder = !border \n`) + shouldNotReplace(`{ "foo": !border.something + ""}\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) + shouldNotReplace(`\n`) }) diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts index 5d29c1b71b6b..f301deaa9dde 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts +++ b/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 replace classes in invalid positions', async () => { + let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', { + base: __dirname, + }) + + async function shouldNotReplace(example: string, candidate = 'shadow') { + expect( + await legacyClasses(designSystem, {}, candidate, { + contents: example, + start: example.indexOf(candidate), + end: example.indexOf(candidate) + candidate.length, + }), + ).toEqual(candidate) + } + + await shouldNotReplace(`let notShadow = shadow \n`) + await shouldNotReplace(`{ "foo": shadow.something + ""}\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`\n`) + await shouldNotReplace(`