diff --git a/docs/rules/no-inline-styles.md b/docs/rules/no-inline-styles.md index e8addf6..0e4b574 100644 --- a/docs/rules/no-inline-styles.md +++ b/docs/rules/no-inline-styles.md @@ -50,3 +50,9 @@ const Welcome = React.createClass({ } }); ``` + +#### This rule has an object option: + +- "allowStylePropertiesLessThan" – allow style properties count less than a specific number. for e.g. `2` will allow `{fontSize: 15}` but not `{fontSize: 15, fontColor: 'white'}` + + diff --git a/lib/rules/no-inline-styles.js b/lib/rules/no-inline-styles.js index 752f618..12a82e9 100644 --- a/lib/rules/no-inline-styles.js +++ b/lib/rules/no-inline-styles.js @@ -12,13 +12,16 @@ const styleSheet = require('../util/stylesheet'); const { StyleSheets } = styleSheet; const { astHelpers } = styleSheet; -const create = Components.detect((context) => { +module.exports = Components.detect((context) => { + const options = context.options[0] || {}; const styleSheets = new StyleSheets(); function reportInlineStyles(inlineStyles) { if (inlineStyles) { inlineStyles.forEach((style) => { if (style) { + const lengthLimit = options.allowStylePropertiesLessThan; + if (lengthLimit && Object.keys(style.expression).length < lengthLimit) return; const expression = util.inspect(style.expression); context.report({ node: style.node, @@ -42,9 +45,13 @@ const create = Components.detect((context) => { }; }); -module.exports = { - meta: { - schema: [], +module.exports.schema = [ + { + type: 'object', + properties: { + allowStylePropertiesLessThan: { + type: 'number', + }, + }, }, - create, -}; +];