[eslint] no-conflicting-props rule

packages/@stylexjs/eslint-plugin/README.md

@@ -252,3 +252,24 @@ specifications.
   "validImports": ["stylex", "@stylexjs/stylex"]
 }
 ```
+
+### `@stylexjs/no-conflicting-props`
+
+This rule disallows using `className` or `style` props on elements that spread
+`stylex.props()` to avoid conflicts and unexpected behavior.
+
+#### Invalid examples
+
+```jsx
+<div {...stylex.props(styles.foo)} className="extra" />
+
+<div {...stylex.props(styles.foo)} style={{ color: 'red' }} />
+```
+
+#### Config options
+
+```json
+{
+  "validImports": ["stylex", "@stylexjs/stylex"]
+}
+```

packages/@stylexjs/eslint-plugin/__tests__/stylex-no-conflicting-props-test.js

@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+jest.disableAutomock();
+
+const { RuleTester: ESLintTester } = require('eslint');
+const rule = require('../src/stylex-no-conflicting-props');
+
+const eslintTester = new ESLintTester({
+  parser: require.resolve('hermes-eslint'),
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+eslintTester.run('stylex-no-conflicting-props', rule.default, {
+  valid: [
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} />;
+        }
+      `,
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        function Component() {
+          return <div className="foo" />;
+        }
+      `,
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        function Component() {
+          return <div style={{ color: 'red' }} />;
+        }
+      `,
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} data-testid="test" />;
+        }
+      `,
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...otherProps} className="foo" />;
+        }
+      `,
+    },
+    {
+      code: `
+        import { props, create } from '@stylexjs/stylex';
+        const styles = create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...props(styles.main)} />;
+        }
+      `,
+    },
+    {
+      options: [{ validImports: ['custom-stylex'] }],
+      code: `
+        import * as stylex from 'custom-stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} />;
+        }
+      `,
+    },
+    {
+      options: [{ validImports: [{ from: 'a', as: 'css' }] }],
+      code: `
+        import { css } from 'a';
+        const styles = css.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...css.props(styles.main)} />;
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} className="foo" />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} style={{ margin: 10 }} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div className="foo" {...stylex.props(styles.main)} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div style={{ margin: 10 }} {...stylex.props(styles.main)} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import { props, create } from '@stylexjs/stylex';
+        const styles = create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...props(styles.main)} className="foo" />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import { props as p, create } from '@stylexjs/stylex';
+        const styles = create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...p(styles.main)} className="foo" />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      options: [{ validImports: ['custom-stylex'] }],
+      code: `
+        import * as stylex from 'custom-stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} className="foo" />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      options: [{ validImports: [{ from: 'a', as: 'css' }] }],
+      code: `
+        import { css } from 'a';
+        const styles = css.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...css.props(styles.main)} className="foo" />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} className="foo" style={{ margin: 10 }} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+        {
+          message:
+            'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} {...{ className: 'foo' }} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+    {
+      code: `
+        import * as stylex from '@stylexjs/stylex';
+        const styles = stylex.create({
+          main: { color: 'red' },
+        });
+        function Component() {
+          return <div {...stylex.props(styles.main)} {...{ style: { margin: 10 } }} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
+        },
+      ],
+    },
+  ],
+});

packages/@stylexjs/eslint-plugin/src/index.js

@@ -11,6 +11,7 @@ import enforceExtension from './stylex-enforce-extension';
 import noLegacyContextualStyles from './stylex-no-legacy-contextual-styles';
 import noLookaheadSelectors from './stylex-no-lookahead-selectors';
 import noNonStandardStyles from './stylex-no-nonstandard-styles';
+import noConflictingProps from './stylex-no-conflicting-props';
 import noUnused from './stylex-no-unused';
 import sortKeys from './stylex-sort-keys';
 import validShorthands from './stylex-valid-shorthands';
@@ -21,6 +22,7 @@ const rules: {
   'no-legacy-contextual-styles': typeof noLegacyContextualStyles,
   'no-lookahead-selectors': typeof noLookaheadSelectors,
   'no-nonstandard-styles': typeof noNonStandardStyles,
+  'no-conflicting-props': typeof noConflictingProps,
   'no-unused': typeof noUnused,
   'sort-keys': typeof sortKeys,
   'valid-shorthands': typeof validShorthands,
@@ -30,6 +32,7 @@ const rules: {
   'no-legacy-contextual-styles': noLegacyContextualStyles,
   'no-lookahead-selectors': noLookaheadSelectors,
   'no-nonstandard-styles': noNonStandardStyles,
+  'no-conflicting-props': noConflictingProps,
   'no-unused': noUnused,
   'sort-keys': sortKeys,
   'valid-shorthands': validShorthands,