[New] style-prop-object: Add allow option

Fixes #1813

Co-Authored-By: Erwin <[email protected]>
Co-Authored-By: hornta <[email protected]>
Co-Authored-By: Anthon Fredriksson <[email protected]>

fix trailing comma causing eslint error

Author: Anthon Fredriksson

docs/rules/style-prop-object.md

@@ -49,3 +49,33 @@ React.createElement("Hello", { style: { color: 'red' }});
 const styles = { height: '100px' };
 React.createElement("div", { style: styles });
 ```
+## Rule Options
+
+```js
+...
+"react/style-prop-object": [<enabled>, {
+  "allow": [<string>]
+}]
+...
+```
+
+### `allow`
+A list of elements that are allowed to have a non-object value in their style attribute. The default value is `[]`.
+
+#### Example
+```js
+{
+  "allow": ["MyComponent"]
+}
+```
+The following patterns are considered warnings:
+```js
+<Hello style="a string">
+React.createElement(Hello, { style: "some styling" });
+```
+
+The following patterns are **not** considered warnings:
+```js
+<MyComponent style="a string">
+React.createElement(MyComponent, { style: "some styling" });
+```

lib/rules/style-prop-object.js

@@ -20,10 +20,26 @@ module.exports = {
       recommended: false,
       url: docsUrl('style-prop-object')
     },
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            additionalItems: false,
+            uniqueItems: true
+          }
+        }
+      }
+    ]
   },
 
   create(context) {
+    const allowed = new Set(context.options.length > 0 && context.options[0].allow || []);
+
     /**
      * @param {ASTNode} expression An Identifier node
      * @returns {boolean}
@@ -58,6 +74,16 @@ module.exports = {
           node.callee.property.name === 'createElement' &&
           node.arguments.length > 1
         ) {
+          if (node.arguments[0].name) {
+            // store name of component
+            const componentName = node.arguments[0].name;
+
+            // allowed list contains the name
+            if (allowed.has(componentName)) {
+              // abort operation
+              return;
+            }
+          }
           if (node.arguments[1].type === 'ObjectExpression') {
             const style = node.arguments[1].properties.find(property => property.key && property.key.name === 'style' && !property.computed);
             if (style) {
@@ -78,6 +104,20 @@ module.exports = {
         if (!node.value || node.name.name !== 'style') {
           return;
         }
+        // store parent element
+        const parentElement = node.parent;
+
+        // parent element is a JSXOpeningElement
+        if (parentElement && parentElement.type === 'JSXOpeningElement') {
+          // get the name of the JSX element
+          const name = parentElement.name && parentElement.name.name;
+
+          // allowed list contains the name
+          if (allowed.has(name)) {
+            // abort operation
+            return;
+          }
+        }
 
         if (node.value.type !== 'JSXExpressionContainer' || isNonNullaryLiteral(node.value.expression)) {
           context.report({

tests/lib/rules/style-prop-object.js

@@ -192,6 +192,22 @@ ruleTester.run('style-prop-object', rule, {
         '  });',
         '};'
       ].join('\n')
+    },
+    {
+      code: '<MyComponent style="myStyle" />',
+      options: [
+        {
+          allow: ['MyComponent']
+        }
+      ]
+    },
+    {
+      code: 'React.createElement(MyComponent, { style: "mySpecialStyle" })',
+      options: [
+        {
+          allow: ['MyComponent']
+        }
+      ]
     }
   ],
   invalid: [
@@ -263,6 +279,34 @@ ruleTester.run('style-prop-object', rule, {
         column: 22,
         type: 'Identifier'
       }]
+    },
+    {
+      code: '<MyComponent style="myStyle" />',
+      options: [
+        {
+          allow: ['MyOtherComponent']
+        }
+      ],
+      errors: [{
+        message: 'Style prop value must be an object',
+        line: 1,
+        column: 14,
+        type: 'JSXAttribute'
+      }]
+    },
+    {
+      code: 'React.createElement(MyComponent, { style: "mySpecialStyle" })',
+      options: [
+        {
+          allow: ['MyOtherComponent']
+        }
+      ],
+      errors: [{
+        message: 'Style prop value must be an object',
+        line: 1,
+        column: 43,
+        type: 'Literal'
+      }]
     }
   ]
 });