Add rules to detect unmerged className and event handlers with spread props

[Copilot]

Follow-up to #437. When spread props precede className or event handlers, those props may contain values that get silently overridden, causing bugs.

New Rules

no-unmerged-classname - Detects className after spread props without merging:

// ❌ Warns - className from rest gets lost
<Button {...rest} className="custom" />

// ✅ OK - properly merged
<Button {...rest} className={clsx(className, "custom")} />

Recognizes merging utilities: clsx(), classNames(), cn()

no-unmerged-event-handler - Detects event handlers after spread props without composition:

// ❌ Warns - onClick from rest gets lost  
<Button {...rest} onClick={handleClick} />

// ✅ OK - properly composed
<Button {...rest} onClick={compose(onClick, handleClick)} />

Recognizes composition utilities: compose(), composeEventHandlers()

Covers 40+ React event handlers (onClick, onChange, onFocus, onKeyDown, etc.)

Implementation

• Rule logic checks for any spread attribute before className/event handler
• Only flags when no recognized merging/composition utility is used
• Comprehensive test coverage (24 new test cases)
• Documentation includes examples and rationale

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add rule to ensure className and event handlers are merged properly</issue_title>
<issue_description>- Follow up to #437

From @joshblack:

Would it be possible to have the rule (or a follow up rule?) that helps people understand when something may not be merged correctly. For example:

-<Example {...rest} className="..." />
+<Example {...rest} className={clsx(className, '...')} />

-<Example {...rest} onClick={() => {}} />
+<Example {...rest} onClick={compose(onClick, () => {})} />

It would be helpful to know in these situations that we have not merged rest correctly. My guess is that it would be too hard in eslint world to know what rest is but figured I'd ask

---

Added by @siddharthkp:

We probably need to check if there is className or event handlers expected in the props and only then suggest to merge them

---

Implementation plan:

• Create 2 new rules in src/rules in the same style as other files in that directory
• Write tests for these in src/rules/__tests__
• Add files for documentation in docs/rules
• Don't blindly add this in every file, first check if there is className or event handlers expected from the props </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add rule to ensure className and event handlers are merged properly #440

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: bfcfba3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[siddharthkp]

• Duplicate of Add rules to detect unmerged className and event handlers with spread props #441