diff --git a/lib/rules/no-color-literals.js b/lib/rules/no-color-literals.js index b79e7e6..b178fda 100644 --- a/lib/rules/no-color-literals.js +++ b/lib/rules/no-color-literals.js @@ -18,7 +18,7 @@ module.exports = Components.detect((context) => { function reportColorLiterals(colorLiterals) { if (colorLiterals) { colorLiterals.forEach((style) => { - if (style) { + if (style && !astHelpers.isEStyleSheetVariable(style.expression)) { const expression = util.inspect(style.expression); context.report({ node: style.node, diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index 0b8a6ef..64dcce1 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -487,6 +487,12 @@ const astHelpers = { } return false; }, + + isEStyleSheetVariable: function (expression) { + return Object.values(expression).every( + value => typeof value === 'string' && value.startsWith('$') + ); + }, }; module.exports.astHelpers = astHelpers; diff --git a/tests/lib/rules/no-color-literals.js b/tests/lib/rules/no-color-literals.js index b616f91..93a7bf9 100644 --- a/tests/lib/rules/no-color-literals.js +++ b/tests/lib/rules/no-color-literals.js @@ -67,6 +67,28 @@ const tests = { } `, }, + { + code: ` + const styles = EStyleSheet.create({ + $red: 'red', + $blue: 'blue', + style1: { + color: '$red', + }, + style2: { + color: '$blue', + } + }); + export default class MyComponent extends Component { + render() { + const isDanger = true; + return ; + } + } + `, + }, ], invalid: [ { @@ -187,6 +209,12 @@ const config = { jsx: true, }, }, + settings: { + 'react-native/style-sheet-object-names': [ + 'StyleSheet', + 'EStyleSheet', + ], + }, }; tests.valid.forEach(t => Object.assign(t, config));