Add eslint rule to ensure spread props come before other props

.changeset/upset-cobras-cross.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Add spread-props-first rule to ensure spread props come before other props

docs/rules/spread-props-first.md

@@ -0,0 +1,66 @@
+# Ensure spread props come before other props (spread-props-first)
+
+Spread props should come before other named props to avoid unintentionally overriding props. When spread props are placed after named props, they can override the named props, which is often unintended and can lead to UI bugs.
+
+## Rule details
+
+This rule enforces that all spread props (`{...rest}`, `{...props}`, etc.) come before any named props in JSX elements.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/spread-props-first: "error" */
+
+// ❌ Spread after named prop
+<Example className="..." {...rest} />
+
+// ❌ Spread in the middle
+<Example className="..." {...rest} id="foo" />
+
+// ❌ Multiple spreads after named props
+<Example className="..." {...rest} {...other} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/spread-props-first: "error" */
+
+// ✅ Spread before named props
+<Example {...rest} className="..." />
+
+// ✅ Multiple spreads before named props
+<Example {...rest} {...other} className="..." />
+
+// ✅ Only spread props
+<Example {...rest} />
+
+// ✅ Only named props
+<Example className="..." id="foo" />
+```
+
+## Why this matters
+
+Placing spread props after named props can cause unexpected behavior:
+
+```jsx
+// ❌ Bad: className might get overridden by rest
+<Button className="custom-class" {...rest} />
+
+// If rest = { className: "other-class" }
+// Result: className="other-class" (custom-class is lost!)
+
+// ✅ Good: className will override any className in rest
+<Button {...rest} className="custom-class" />
+
+// If rest = { className: "other-class" }
+// Result: className="custom-class" (as intended)
+```
+
+## Options
+
+This rule has no configuration options.
+
+## When to use autofix
+
+This rule includes an autofix that will automatically reorder your props to place all spread props first. The autofix is safe to use as it preserves the order of spreads relative to each other and the order of named props relative to each other.

src/index.js

@@ -20,6 +20,7 @@ module.exports = {
     'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
     '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'),
   },
   configs: {
     recommended: require('./configs/recommended'),

src/rules/__tests__/spread-props-first.test.js

@@ -0,0 +1,123 @@
+const rule = require('../spread-props-first')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('spread-props-first', rule, {
+  valid: [
+    // Spread props before named props
+    `<Example {...rest} className="foo" />`,
+    // Multiple spreads before named props
+    `<Example {...rest} {...other} className="foo" id="bar" />`,
+    // Only spread props
+    `<Example {...rest} />`,
+    // Only named props
+    `<Example className="foo" id="bar" />`,
+    // Empty element
+    `<Example />`,
+    // Spread first, then named props
+    `<Example {...rest} className="foo" onClick={handleClick} />`,
+    // Multiple spreads at the beginning
+    `<Example {...props1} {...props2} {...props3} className="foo" />`,
+  ],
+  invalid: [
+    // Named prop before spread
+    {
+      code: `<Example className="foo" {...rest} />`,
+      output: `<Example {...rest} className="foo" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'className'},
+        },
+      ],
+    },
+    // Multiple named props before spread
+    {
+      code: `<Example className="foo" id="bar" {...rest} />`,
+      output: `<Example {...rest} className="foo" id="bar" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'id'},
+        },
+      ],
+    },
+    // Named prop with expression before spread
+    {
+      code: `<Example onClick={handleClick} {...rest} />`,
+      output: `<Example {...rest} onClick={handleClick} />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'onClick'},
+        },
+      ],
+    },
+    // Mixed order with multiple spreads
+    {
+      code: `<Example className="foo" {...rest} id="bar" {...other} />`,
+      output: `<Example {...rest} {...other} className="foo" id="bar" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'id'},
+        },
+      ],
+    },
+    // Named prop before multiple spreads
+    {
+      code: `<Example className="foo" {...rest} {...other} />`,
+      output: `<Example {...rest} {...other} className="foo" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'className'},
+        },
+      ],
+    },
+    // Complex example with many props
+    {
+      code: `<Example className="foo" id="bar" onClick={handleClick} {...rest} disabled />`,
+      output: `<Example {...rest} className="foo" id="bar" onClick={handleClick} disabled />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'disabled'},
+        },
+      ],
+    },
+    // Boolean prop before spread
+    {
+      code: `<Example disabled {...rest} />`,
+      output: `<Example {...rest} disabled />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'disabled'},
+        },
+      ],
+    },
+    // Spread in the middle
+    {
+      code: `<Example className="foo" {...rest} id="bar" />`,
+      output: `<Example {...rest} className="foo" id="bar" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'id'},
+        },
+      ],
+    },
+  ],
+})

src/rules/spread-props-first.js

@@ -0,0 +1,81 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    schema: [],
+    messages: {
+      spreadPropsFirst:
+        'Spread props should come before other props to avoid unintentional overrides. Move {{spreadProp}} before {{namedProp}}.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const attributes = node.attributes
+
+        // Track if we've seen a named prop before a spread
+        let lastNamedPropIndex = -1
+        let firstSpreadAfterNamedPropIndex = -1
+
+        for (let i = 0; i < attributes.length; i++) {
+          const attr = attributes[i]
+
+          if (attr.type === 'JSXAttribute') {
+            // This is a named prop
+            lastNamedPropIndex = i
+          } else if (attr.type === 'JSXSpreadAttribute' && lastNamedPropIndex !== -1) {
+            // This is a spread prop that comes after a named prop
+            if (firstSpreadAfterNamedPropIndex === -1) {
+              firstSpreadAfterNamedPropIndex = i
+            }
+          }
+        }
+
+        // If we found a spread after a named prop, report it
+        if (firstSpreadAfterNamedPropIndex !== -1) {
+          const sourceCode = context.sourceCode
+          const spreadAttr = attributes[firstSpreadAfterNamedPropIndex]
+          const namedAttr = attributes[lastNamedPropIndex]
+
+          context.report({
+            node: spreadAttr,
+            messageId: 'spreadPropsFirst',
+            data: {
+              spreadProp: sourceCode.getText(spreadAttr),
+              namedProp: namedAttr.name.name,
+            },
+            fix(fixer) {
+              // Collect all spreads and named props
+              const spreads = []
+              const namedProps = []
+
+              for (const attr of attributes) {
+                if (attr.type === 'JSXSpreadAttribute') {
+                  spreads.push(attr)
+                } else if (attr.type === 'JSXAttribute') {
+                  namedProps.push(attr)
+                }
+              }
+
+              // Generate the reordered attributes text
+              const reorderedAttrs = [...spreads, ...namedProps]
+              const fixes = []
+
+              // Replace each attribute with its new position
+              for (let i = 0; i < attributes.length; i++) {
+                const newAttr = reorderedAttrs[i]
+                const oldAttr = attributes[i]
+
+                if (newAttr !== oldAttr) {
+                  fixes.push(fixer.replaceText(oldAttr, sourceCode.getText(newAttr)))
+                }
+              }
+
+              return fixes
+            },
+          })
+        }
+      },
+    }
+  },
+}