Skip to content

Fix false-positive migrations in addEventListener and JavaScript variable names #18718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thecrypticace merged 6 commits into from
Aug 12, 2025
+129 −56
Merged

Fix false-positive migrations in addEventListener and JavaScript variable names #18718

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d99490
refactor is-safe-migration test
RobinMalfait Aug 11, 2025
d839a5f
add failing tests
RobinMalfait Aug 11, 2025
dc19148
ignore migrations in the event name of `addEventListener`
RobinMalfait Aug 11, 2025
67586f8
add "`" as valid quotes
RobinMalfait Aug 11, 2025
b9b0d28
check if we are in a string
RobinMalfait Aug 11, 2025
9784f7b
update changelog
RobinMalfait Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add failing tests
  • Loading branch information
@RobinMalfait
RobinMalfait committed Aug 11, 2025
commit d839a5f331e90b018dc1dc60d6b688cedaa7f8a0
38 changes: 38 additions & 0 deletions packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,44 @@ describe('is-safe-migration', async () => {
// Vue 3 events
[`emit('blur', props.modelValue)\n`, 'blur'],
[`$emit('blur', props.modelValue)\n`, 'blur'],

// JavaScript / TypeScript
[`document.addEventListener('blur',handleBlur)`, 'blur'],
[`document.addEventListener('blur', handleBlur)`, 'blur'],

[`function foo({ outline = true })`, 'outline'],
[`function foo({ before = false, outline = true })`, 'outline'],
[`function foo({before=false,outline=true })`, 'outline'],
[`function foo({outline=true })`, 'outline'],
// https://github.com/tailwindlabs/tailwindcss/issues/18675
[
// With default value
`function foo({ size = "1.25rem", digit, outline = true, textClass = "", className = "" })`,
'outline',
],
[
// Without default value
`function foo({ size = "1.25rem", digit, outline, textClass = "", className = "" })`,
'outline',
],
[
// As the last argument
`function foo({ size = "1.25rem", digit, outline })`,
'outline',
],
[
// As the last argument, but there is techinically another `"` on the same line
`function foo({ size = "1.25rem", digit, outline }): { return "foo" }`,
'outline',
],
[
// Tricky quote balancing
`function foo({ before = "'", outline, after = "'" }): { return "foo" }`,
'outline',
],

[`function foo(blur, foo)`, 'blur'],
[`function foo(blur,foo)`, 'blur'],
])('does not replace classes in invalid positions #%#', async (example, candidate) => {
expect(
await migrateCandidate(designSystem, {}, candidate, {
Expand Down