Add allow option in style-prop-object

Author: Anthon Fredriksson

.gitignore

@@ -21,3 +21,6 @@ sftp-config.json
 # Only apps should have lockfiles
 yarn.lock
 package-lock.json
+
+# Visual Code folder
+.vscode

docs/rules/style-prop-object.md

@@ -49,3 +49,32 @@ 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">
+```
+
+The following patterns are **not** considered warnings:
+```js
+<MyComponent style="a string">
+```

lib/rules/style-prop-object.js

@@ -19,10 +19,24 @@ module.exports = {
       recommended: false,
       url: docsUrl('style-prop-object')
     },
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {
+              type: 'string'
+            }
+          }
+        }
+      }
+    ]
   },
 
   create: function(context) {
+    const allowed = context.options.length > 0 && context.options[0].allow || [];
+
     /**
      * @param {object} node An Identifier node
      */
@@ -71,6 +85,22 @@ module.exports = {
           return;
         }
 
+        // parent element is a JSXOpeningElement
+        if (node.parent && node.parent.type === 'JSXOpeningElement') {
+
+          // store parent element
+          const jsxOpeningElement = node.parent;
+
+          // get the name of the JSX element
+          const name = jsxOpeningElement.name && jsxOpeningElement.name.name;
+
+          // allowed list contains the name
+          if (allowed.indexOf(name) > -1) {
+            // abort operation
+            return;
+          }
+        }
+
         if (node.value.type !== 'JSXExpressionContainer' || isNonNullaryLiteral(node.value.expression)) {
           context.report(node, 'Style prop value must be an object');
         } else if (node.value.expression.type === 'Identifier') {

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

@@ -191,6 +191,14 @@ ruleTester.run('style-prop-object', rule, {
         '  });',
         '};'
       ].join('\n')
+    },
+    {
+      code: '<MyComponent style="myStyle" />',
+      options: [
+        {
+          allow: ['MyComponent']
+        }
+      ]
     }
   ],
   invalid: [
@@ -262,6 +270,20 @@ 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'
+      }]
     }
   ]
 });