From 724e8a4cc875917e99cd930fffc8dd5c8439f1a6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 11:51:06 +0000
Subject: [PATCH 1/3] Initial plan


From 4eb02786a87ba6a9c0105bf71240ec3474bb021d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 12:00:24 +0000
Subject: [PATCH 2/3] Add rules for className and event handler merging with
 spread props

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 docs/rules/no-unmerged-classname.md           |  75 ++++++++++
 docs/rules/no-unmerged-event-handler.md       |  87 +++++++++++
 src/index.js                                  |   2 +
 .../__tests__/no-unmerged-classname.test.js   |  71 +++++++++
 .../no-unmerged-event-handler.test.js         |  99 +++++++++++++
 src/rules/no-unmerged-classname.js            |  68 +++++++++
 src/rules/no-unmerged-event-handler.js        | 135 ++++++++++++++++++
 7 files changed, 537 insertions(+)
 create mode 100644 docs/rules/no-unmerged-classname.md
 create mode 100644 docs/rules/no-unmerged-event-handler.md
 create mode 100644 src/rules/__tests__/no-unmerged-classname.test.js
 create mode 100644 src/rules/__tests__/no-unmerged-event-handler.test.js
 create mode 100644 src/rules/no-unmerged-classname.js
 create mode 100644 src/rules/no-unmerged-event-handler.js

diff --git a/docs/rules/no-unmerged-classname.md b/docs/rules/no-unmerged-classname.md
new file mode 100644
index 0000000..02c253f
--- /dev/null
+++ b/docs/rules/no-unmerged-classname.md
@@ -0,0 +1,75 @@
+# Ensure className is merged with spread props (no-unmerged-classname)
+
+When using spread props (`{...rest}`, `{...props}`, etc.) along with a `className` prop, you should merge the className from the spread props with your custom className to avoid unintentionally overriding classes.
+
+## Rule details
+
+This rule warns when a component has spread props before a `className` prop, but the `className` doesn't appear to be merging values using a utility like `clsx()` or `classNames()`.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/no-unmerged-classname: "error" */
+
+// ❌ className may override className from rest
+<Example {...rest} className="custom-class" />
+
+// ❌ className expression doesn't merge
+<Example {...rest} className={myClassName} />
+
+// ❌ Template literal doesn't merge with rest
+<Example {...rest} className={`foo ${bar}`} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/no-unmerged-classname: "error" */
+
+// ✅ Using clsx to merge className from rest
+<Example {...rest} className={clsx(className, "custom-class")} />
+
+// ✅ Using classNames to merge
+<Example {...rest} className={classNames(className, "custom-class")} />
+
+// ✅ Using cn utility to merge
+<Example {...rest} className={cn(className, "custom-class")} />
+
+// ✅ className before spread (spread will override)
+<Example className="custom-class" {...rest} />
+
+// ✅ No spread props
+<Example className="custom-class" />
+```
+
+## Why this matters
+
+When you spread props and then specify a className, you might be overriding a className that was passed in through the spread:
+
+```jsx
+// ❌ Bad: className from rest gets lost
+function MyComponent({className, ...rest}) {
+  return <Button {...rest} className="my-custom-class" />
+  // If rest contains { className: "important-class" }
+  // Result: className="my-custom-class" (important-class is lost!)
+}
+
+// ✅ Good: className from rest is preserved and merged
+function MyComponent({className, ...rest}) {
+  return <Button {...rest} className={clsx(className, 'my-custom-class')} />
+  // If rest contains { className: "important-class" }
+  // Result: className="important-class my-custom-class" (both preserved!)
+}
+```
+
+## Options
+
+This rule has no configuration options.
+
+## When to use this rule
+
+Use this rule when your components accept and spread props that might contain a `className`. This is common in component libraries and wrapper components.
+
+## Related Rules
+
+- [spread-props-first](./spread-props-first.md) - Ensures spread props come before named props
diff --git a/docs/rules/no-unmerged-event-handler.md b/docs/rules/no-unmerged-event-handler.md
new file mode 100644
index 0000000..0bb4cc1
--- /dev/null
+++ b/docs/rules/no-unmerged-event-handler.md
@@ -0,0 +1,87 @@
+# Ensure event handlers are merged with spread props (no-unmerged-event-handler)
+
+When using spread props (`{...rest}`, `{...props}`, etc.) along with event handler props (like `onClick`, `onChange`, etc.), you should merge the event handler from the spread props with your custom handler to avoid unintentionally overriding event handlers.
+
+## Rule details
+
+This rule warns when a component has spread props before an event handler prop, but the event handler doesn't appear to be merging handlers using a utility like `compose()` or `composeEventHandlers()`.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/no-unmerged-event-handler: "error" */
+
+// ❌ onClick may override onClick from rest
+<Example {...rest} onClick={handleClick} />
+
+// ❌ Arrow function doesn't merge
+<Example {...rest} onClick={() => {}} />
+
+// ❌ onChange expression doesn't merge
+<Example {...rest} onChange={handleChange} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/no-unmerged-event-handler: "error" */
+
+// ✅ Using compose to merge onClick from rest
+<Example {...rest} onClick={compose(onClick, handleClick)} />
+
+// ✅ Using composeEventHandlers to merge
+<Example {...rest} onClick={composeEventHandlers(onClick, handleClick)} />
+
+// ✅ Event handler before spread (spread will override)
+<Example onClick={handleClick} {...rest} />
+
+// ✅ No spread props
+<Example onClick={handleClick} />
+```
+
+## Why this matters
+
+When you spread props and then specify an event handler, you might be overriding an event handler that was passed in through the spread:
+
+```jsx
+// ❌ Bad: onClick from rest gets lost
+function MyComponent({onClick, ...rest}) {
+  return <Button {...rest} onClick={() => console.log('clicked')} />
+  // If rest contains { onClick: importantHandler }
+  // Result: importantHandler never gets called!
+}
+
+// ✅ Good: onClick from rest is preserved and composed
+function MyComponent({onClick, ...rest}) {
+  return <Button {...rest} onClick={compose(onClick, () => console.log('clicked'))} />
+  // If rest contains { onClick: importantHandler }
+  // Result: Both importantHandler and the log function get called!
+}
+```
+
+## Detected Event Handlers
+
+This rule checks for the following event handler props:
+
+- Mouse events: `onClick`, `onDoubleClick`, `onContextMenu`, `onMouseDown`, `onMouseUp`, `onMouseEnter`, `onMouseLeave`, `onMouseMove`, `onMouseOver`, `onMouseOut`
+- Touch events: `onTouchStart`, `onTouchEnd`, `onTouchMove`, `onTouchCancel`
+- Keyboard events: `onKeyDown`, `onKeyUp`, `onKeyPress`
+- Form events: `onChange`, `onSubmit`, `onInput`, `onInvalid`, `onSelect`
+- Focus events: `onFocus`, `onBlur`
+- Drag events: `onDrag`, `onDragEnd`, `onDragEnter`, `onDragExit`, `onDragLeave`, `onDragOver`, `onDragStart`, `onDrop`
+- Other events: `onScroll`, `onWheel`, `onLoad`, `onError`, `onAbort`
+- Media events: `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`
+- Animation/Transition events: `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`
+
+## Options
+
+This rule has no configuration options.
+
+## When to use this rule
+
+Use this rule when your components accept and spread props that might contain event handlers. This is common in component libraries and wrapper components.
+
+## Related Rules
+
+- [spread-props-first](./spread-props-first.md) - Ensures spread props come before named props
+- [no-unmerged-classname](./no-unmerged-classname.md) - Ensures className is merged with spread props
diff --git a/src/index.js b/src/index.js
index 89b99bf..921921a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,6 +21,8 @@ module.exports = {
     'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
     'use-styled-react-import': require('./rules/use-styled-react-import'),
     'spread-props-first': require('./rules/spread-props-first'),
+    'no-unmerged-classname': require('./rules/no-unmerged-classname'),
+    'no-unmerged-event-handler': require('./rules/no-unmerged-event-handler'),
   },
   configs: {
     recommended: require('./configs/recommended'),
diff --git a/src/rules/__tests__/no-unmerged-classname.test.js b/src/rules/__tests__/no-unmerged-classname.test.js
new file mode 100644
index 0000000..4b6aba2
--- /dev/null
+++ b/src/rules/__tests__/no-unmerged-classname.test.js
@@ -0,0 +1,71 @@
+const rule = require('../no-unmerged-classname')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('no-unmerged-classname', rule, {
+  valid: [
+    // No spread props - OK
+    `<Example className="foo" />`,
+    // Spread but no className - OK
+    `<Example {...rest} />`,
+    // className before spread (spread overrides) - OK
+    `<Example className="foo" {...rest} />`,
+    // className after spread with clsx - OK
+    `<Example {...rest} className={clsx(className, "foo")} />`,
+    // className after spread with classNames - OK
+    `<Example {...rest} className={classNames(className, "foo")} />`,
+    // className after spread with cn - OK
+    `<Example {...rest} className={cn(className, "foo")} />`,
+    // Multiple spreads but className with clsx - OK
+    `<Example {...rest} {...other} className={clsx(className, "foo")} />`,
+  ],
+  invalid: [
+    // className after spread without merging - PROBLEM
+    {
+      code: `<Example {...rest} className="foo" />`,
+      errors: [
+        {
+          messageId: 'noUnmergedClassName',
+        },
+      ],
+    },
+    // className after spread with expression but not merging function - PROBLEM
+    {
+      code: `<Example {...rest} className={myClassName} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedClassName',
+        },
+      ],
+    },
+    // className after spread with template literal - PROBLEM
+    {
+      code: `<Example {...rest} className={\`foo \${bar}\`} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedClassName',
+        },
+      ],
+    },
+    // Multiple spreads with className not merged - PROBLEM
+    {
+      code: `<Example {...rest} {...other} className="foo" />`,
+      errors: [
+        {
+          messageId: 'noUnmergedClassName',
+        },
+      ],
+    },
+  ],
+})
diff --git a/src/rules/__tests__/no-unmerged-event-handler.test.js b/src/rules/__tests__/no-unmerged-event-handler.test.js
new file mode 100644
index 0000000..241a06f
--- /dev/null
+++ b/src/rules/__tests__/no-unmerged-event-handler.test.js
@@ -0,0 +1,99 @@
+const rule = require('../no-unmerged-event-handler')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('no-unmerged-event-handler', rule, {
+  valid: [
+    // No spread props - OK
+    `<Example onClick={handleClick} />`,
+    // Spread but no event handler - OK
+    `<Example {...rest} />`,
+    // Event handler before spread (spread overrides) - OK
+    `<Example onClick={handleClick} {...rest} />`,
+    // Event handler after spread with compose - OK
+    `<Example {...rest} onClick={compose(onClick, handleClick)} />`,
+    // Event handler after spread with composeEventHandlers - OK
+    `<Example {...rest} onClick={composeEventHandlers(onClick, handleClick)} />`,
+    // Multiple spreads but event handler with compose - OK
+    `<Example {...rest} {...other} onClick={compose(onClick, handleClick)} />`,
+    // Different event handlers with compose - OK
+    `<Example {...rest} onFocus={compose(onFocus, handleFocus)} onBlur={compose(onBlur, handleBlur)} />`,
+  ],
+  invalid: [
+    // onClick after spread without merging - PROBLEM
+    {
+      code: `<Example {...rest} onClick={handleClick} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onClick'},
+        },
+      ],
+    },
+    // onClick after spread with arrow function - PROBLEM
+    {
+      code: `<Example {...rest} onClick={() => {}} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onClick'},
+        },
+      ],
+    },
+    // onChange after spread - PROBLEM
+    {
+      code: `<Example {...rest} onChange={handleChange} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onChange'},
+        },
+      ],
+    },
+    // Multiple event handlers not merged - PROBLEM
+    {
+      code: `<Example {...rest} onClick={handleClick} onFocus={handleFocus} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onClick'},
+        },
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onFocus'},
+        },
+      ],
+    },
+    // onSubmit after spread - PROBLEM
+    {
+      code: `<Example {...rest} onSubmit={handleSubmit} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onSubmit'},
+        },
+      ],
+    },
+    // Multiple spreads with event handler not merged - PROBLEM
+    {
+      code: `<Example {...rest} {...other} onClick={handleClick} />`,
+      errors: [
+        {
+          messageId: 'noUnmergedEventHandler',
+          data: {handlerName: 'onClick'},
+        },
+      ],
+    },
+  ],
+})
diff --git a/src/rules/no-unmerged-classname.js b/src/rules/no-unmerged-classname.js
new file mode 100644
index 0000000..177d76c
--- /dev/null
+++ b/src/rules/no-unmerged-classname.js
@@ -0,0 +1,68 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+    messages: {
+      noUnmergedClassName:
+        'className may not be merged correctly with spread props. Consider using clsx(className, "...") to merge className from spread props.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const attributes = node.attributes
+
+        // Check if there's a spread attribute
+        const hasSpreadAttribute = attributes.some(attr => attr.type === 'JSXSpreadAttribute')
+        if (!hasSpreadAttribute) {
+          return
+        }
+
+        // Check if there's a className attribute
+        const classNameAttr = attributes.find(
+          attr => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'className',
+        )
+        if (!classNameAttr) {
+          return
+        }
+
+        // Check if className comes after a spread attribute
+        const spreadIndex = attributes.findIndex(attr => attr.type === 'JSXSpreadAttribute')
+        const classNameIndex = attributes.findIndex(attr => attr === classNameAttr)
+
+        if (spreadIndex < classNameIndex) {
+          // className comes after spread, so it would override - this is OK
+          // But we need to check if the className value is merging with the spread props
+          if (classNameAttr.value && classNameAttr.value.type === 'JSXExpressionContainer') {
+            const expression = classNameAttr.value.expression
+
+            // Check if it's a call to clsx or similar merging function
+            if (expression.type === 'CallExpression') {
+              const callee = expression.callee
+              // If it's calling clsx, classNames, or similar, assume it's merging correctly
+              if (
+                callee.type === 'Identifier' &&
+                (callee.name === 'clsx' || callee.name === 'classNames' || callee.name === 'cn')
+              ) {
+                return // This is likely merging correctly
+              }
+            }
+          }
+
+          // Check if className is a simple string literal (not merging)
+          if (
+            classNameAttr.value &&
+            (classNameAttr.value.type === 'Literal' ||
+              (classNameAttr.value.type === 'JSXExpressionContainer' &&
+                classNameAttr.value.expression.type !== 'CallExpression'))
+          ) {
+            context.report({
+              node: classNameAttr,
+              messageId: 'noUnmergedClassName',
+            })
+          }
+        }
+      },
+    }
+  },
+}
diff --git a/src/rules/no-unmerged-event-handler.js b/src/rules/no-unmerged-event-handler.js
new file mode 100644
index 0000000..5fc7dd0
--- /dev/null
+++ b/src/rules/no-unmerged-event-handler.js
@@ -0,0 +1,135 @@
+// Common event handler prop names
+const EVENT_HANDLER_PROPS = [
+  'onClick',
+  'onChange',
+  'onSubmit',
+  'onFocus',
+  'onBlur',
+  'onKeyDown',
+  'onKeyUp',
+  'onKeyPress',
+  'onMouseDown',
+  'onMouseUp',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOver',
+  'onMouseOut',
+  'onTouchStart',
+  'onTouchEnd',
+  'onTouchMove',
+  'onTouchCancel',
+  'onScroll',
+  'onWheel',
+  'onDrag',
+  'onDragEnd',
+  'onDragEnter',
+  'onDragExit',
+  'onDragLeave',
+  'onDragOver',
+  'onDragStart',
+  'onDrop',
+  'onInput',
+  'onInvalid',
+  'onSelect',
+  'onContextMenu',
+  'onDoubleClick',
+  'onAnimationStart',
+  'onAnimationEnd',
+  'onAnimationIteration',
+  'onTransitionEnd',
+  'onLoad',
+  'onError',
+  'onAbort',
+  'onCanPlay',
+  'onCanPlayThrough',
+  'onDurationChange',
+  'onEmptied',
+  'onEncrypted',
+  'onEnded',
+  'onLoadedData',
+  'onLoadedMetadata',
+  'onLoadStart',
+  'onPause',
+  'onPlay',
+  'onPlaying',
+  'onProgress',
+  'onRateChange',
+  'onSeeked',
+  'onSeeking',
+  'onStalled',
+  'onSuspend',
+  'onTimeUpdate',
+  'onVolumeChange',
+  'onWaiting',
+]
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+    messages: {
+      noUnmergedEventHandler:
+        'Event handler {{handlerName}} may not be merged correctly with spread props. Consider using a compose function like compose({{handlerName}}, ...) to merge event handlers from spread props.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const attributes = node.attributes
+
+        // Check if there's a spread attribute
+        const hasSpreadAttribute = attributes.some(attr => attr.type === 'JSXSpreadAttribute')
+        if (!hasSpreadAttribute) {
+          return
+        }
+
+        // Check for event handler attributes
+        const eventHandlers = attributes.filter(
+          attr =>
+            attr.type === 'JSXAttribute' && attr.name && attr.name.name && EVENT_HANDLER_PROPS.includes(attr.name.name),
+        )
+
+        if (eventHandlers.length === 0) {
+          return
+        }
+
+        // Find the first spread attribute index
+        const spreadIndex = attributes.findIndex(attr => attr.type === 'JSXSpreadAttribute')
+
+        // Check each event handler
+        for (const handler of eventHandlers) {
+          const handlerIndex = attributes.findIndex(attr => attr === handler)
+
+          if (spreadIndex < handlerIndex) {
+            // Event handler comes after spread, check if it's merging properly
+            if (handler.value && handler.value.type === 'JSXExpressionContainer') {
+              const expression = handler.value.expression
+
+              // Check if it's a call to compose or similar merging function
+              if (expression.type === 'CallExpression') {
+                const callee = expression.callee
+                // If it's calling compose or similar, assume it's merging correctly
+                if (
+                  callee.type === 'Identifier' &&
+                  (callee.name === 'compose' || callee.name === 'composeEventHandlers')
+                ) {
+                  continue // This is likely merging correctly
+                }
+              }
+            }
+
+            // Event handler is not merging - report it
+            context.report({
+              node: handler,
+              messageId: 'noUnmergedEventHandler',
+              data: {
+                handlerName: handler.name.name,
+              },
+            })
+          }
+        }
+      },
+    }
+  },
+}

From bfcfba31fe17db606bda7acf2d9033c4a2a55e60 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 12:04:58 +0000
Subject: [PATCH 3/3] Improve spread detection logic to handle any spread
 before className/event handler

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 src/rules/no-unmerged-classname.js     |  8 +++++---
 src/rules/no-unmerged-event-handler.js | 10 ++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/rules/no-unmerged-classname.js b/src/rules/no-unmerged-classname.js
index 177d76c..b70bda4 100644
--- a/src/rules/no-unmerged-classname.js
+++ b/src/rules/no-unmerged-classname.js
@@ -26,11 +26,13 @@ module.exports = {
           return
         }
 
-        // Check if className comes after a spread attribute
-        const spreadIndex = attributes.findIndex(attr => attr.type === 'JSXSpreadAttribute')
+        // Check if className comes after any spread attribute
         const classNameIndex = attributes.findIndex(attr => attr === classNameAttr)
+        const hasSpreadBeforeClassName = attributes
+          .slice(0, classNameIndex)
+          .some(attr => attr.type === 'JSXSpreadAttribute')
 
-        if (spreadIndex < classNameIndex) {
+        if (hasSpreadBeforeClassName) {
           // className comes after spread, so it would override - this is OK
           // But we need to check if the className value is merging with the spread props
           if (classNameAttr.value && classNameAttr.value.type === 'JSXExpressionContainer') {
diff --git a/src/rules/no-unmerged-event-handler.js b/src/rules/no-unmerged-event-handler.js
index 5fc7dd0..2a16027 100644
--- a/src/rules/no-unmerged-event-handler.js
+++ b/src/rules/no-unmerged-event-handler.js
@@ -94,14 +94,16 @@ module.exports = {
           return
         }
 
-        // Find the first spread attribute index
-        const spreadIndex = attributes.findIndex(attr => attr.type === 'JSXSpreadAttribute')
-
         // Check each event handler
         for (const handler of eventHandlers) {
           const handlerIndex = attributes.findIndex(attr => attr === handler)
 
-          if (spreadIndex < handlerIndex) {
+          // Check if there's any spread attribute before this event handler
+          const hasSpreadBeforeHandler = attributes
+            .slice(0, handlerIndex)
+            .some(attr => attr.type === 'JSXSpreadAttribute')
+
+          if (hasSpreadBeforeHandler) {
             // Event handler comes after spread, check if it's merging properly
             if (handler.value && handler.value.type === 'JSXExpressionContainer') {
               const expression = handler.value.expression