Add rule to forbid className and style being passed to Components

README.md

@@ -80,6 +80,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 # List of supported rules
 
 * [react/display-name](docs/rules/display-name.md): Prevent missing `displayName` in a React component definition
+* [react/forbid-component-props](docs/rules/forbid-component-props.md): Forbid certain props on Components
 * [react/forbid-prop-types](docs/rules/forbid-prop-types.md): Forbid certain propTypes
 * [react/no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX properties
 * [react/no-deprecated](docs/rules/no-deprecated.md): Prevent usage of deprecated methods

docs/rules/forbid-component-props.md

@@ -0,0 +1,44 @@
+# Forbid certain props on Components (forbid-component-props)
+
+By default this rule prevents passing of [props that add lots of complexity](https://medium.com/brigade-engineering/don-t-pass-css-classes-between-components-e9f7ab192785) (`className`, `style`) to Components. This rule only applies to Components (e.g. `<Foo />`) and not DOM nodes (e.g. `<div />`). The list of forbidden props can be customized with the `forbid` option.
+
+## Rule Details
+
+This rule checks all JSX elements and verifies that no forbidden props are used
+on Components. This rule is off by default.
+
+The following patterns are considered warnings:
+
+```jsx
+<Hello className='foo' />
+```
+
+```jsx
+<Hello style={{color: 'red'}} />
+```
+
+The following patterns are not considered warnings:
+
+```jsx
+<Hello name='Joe' />
+```
+
+```jsx
+<div className='foo' />
+```
+
+```jsx
+<div style={{color: 'red'}} />
+```
+
+## Rule Options
+
+```js
+...
+"forbid-component-props": [<enabled>, { "forbid": [<string>] }]
+...
+```
+
+### `forbid`
+
+An array of strings, with the names of props that are forbidden. The default value of this option is `['className', 'style']`.

docs/rules/forbid-prop-types.md

@@ -50,7 +50,7 @@ class Component extends React.Component {
 
 ### `forbid`
 
-An array of strings, with the names of `React.PropTypes` keys that are forbidden.
+An array of strings, with the names of `React.PropTypes` keys that are forbidden. The default value for this option is `['any', 'array', 'object']`.
 
 ## When not to use
 

index.js

@@ -40,6 +40,7 @@ var rules = {
   'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),
   'jsx-space-before-closing': require('./lib/rules/jsx-space-before-closing'),
   'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state'),
+  'forbid-component-props': require('./lib/rules/forbid-component-props'),
   'forbid-prop-types': require('./lib/rules/forbid-prop-types'),
   'prefer-es6-class': require('./lib/rules/prefer-es6-class'),
   'jsx-key': require('./lib/rules/jsx-key'),

lib/rules/forbid-component-props.js

@@ -0,0 +1,65 @@
+/**
+ * @fileoverview Forbid certain props on components
+ * @author Joe Lencioni
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+var DEFAULTS = ['className', 'style'];
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {},
+
+    schema: [{
+      type: 'object',
+      properties: {
+        forbid: {
+          type: 'array',
+          items: {
+            type: 'string'
+          }
+        }
+      },
+      additionalProperties: true
+    }]
+  },
+
+  create: function(context) {
+
+    function isForbidden(prop) {
+      var configuration = context.options[0] || {};
+
+      var forbid = configuration.forbid || DEFAULTS;
+      return forbid.indexOf(prop) >= 0;
+    }
+
+    return {
+      JSXAttribute: function(node) {
+        var tag = node.parent.name.name;
+        if (tag[0] !== tag[0].toUpperCase()) {
+          // This is a DOM node, not a Component, so exit.
+          return;
+        }
+
+        var prop = node.name.name;
+
+        if (!isForbidden(prop)) {
+          return;
+        }
+
+        context.report({
+          node: node,
+          message: 'Prop `' + prop + '` is forbidden on Components'
+        });
+      }
+    };
+  }
+};

tests/lib/rules/forbid-component-props.js

@@ -0,0 +1,153 @@
+/**
+ * @fileoverview Tests for forbid-component-props
+ */
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/forbid-component-props');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    experimentalObjectRestSpread: true,
+    jsx: true
+  }
+};
+
+require('babel-eslint');
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var CLASSNAME_ERROR_MESSAGE = 'Prop `className` is forbidden on Components';
+var STYLE_ERROR_MESSAGE = 'Prop `style` is forbidden on Components';
+
+var ruleTester = new RuleTester();
+ruleTester.run('forbid-component-props', rule, {
+
+  valid: [{
+    code: [
+      'var First = React.createClass({',
+      '  render: function() {',
+      '    return <div className="foo" />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  render: function() {',
+      '    return <div style={{color: "red"}} />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    options: [{forbid: ['style']}],
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo bar="baz" />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo className="bar" />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    options: [{forbid: ['style']}],
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo className="bar" />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    options: [{forbid: ['style', 'foo']}],
+    parserOptions: parserOptions
+  }],
+
+  invalid: [{
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo className="bar" />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: CLASSNAME_ERROR_MESSAGE,
+      line: 4,
+      column: 17,
+      type: 'JSXAttribute'
+    }]
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo style={{color: "red"}} />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: STYLE_ERROR_MESSAGE,
+      line: 4,
+      column: 17,
+      type: 'JSXAttribute'
+    }]
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo className="bar" />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    options: [{forbid: ['className', 'style']}],
+    errors: [{
+      message: CLASSNAME_ERROR_MESSAGE,
+      line: 4,
+      column: 17,
+      type: 'JSXAttribute'
+    }]
+  }, {
+    code: [
+      'var First = React.createClass({',
+      '  propTypes: externalPropTypes,',
+      '  render: function() {',
+      '    return <Foo style={{color: "red"}} />;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    options: [{forbid: ['className', 'style']}],
+    errors: [{
+      message: STYLE_ERROR_MESSAGE,
+      line: 4,
+      column: 17,
+      type: 'JSXAttribute'
+    }]
+  }]
+});