From 35e84f12f3d4e3df39a611519f7ed732dc568728 Mon Sep 17 00:00:00 2001 From: Dmitriy Kolesnikov Date: Thu, 8 Nov 2018 16:00:23 +0600 Subject: [PATCH 1/3] Added support of other style sheet providers (eg EStyleSheet) --- lib/util/stylesheet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index 46dc595..b4a8d48 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -99,7 +99,7 @@ const astHelpers = { node.init && node.init.callee && node.init.callee.object && - node.init.callee.object.name === 'StyleSheet' + node.init.callee.object.name.includes('StyleSheet') ); }, From 0844805e8b056ca563e5053e7e87d8e856b05657 Mon Sep 17 00:00:00 2001 From: Dmitriy Kolesnikov Date: Thu, 8 Nov 2018 18:28:12 +0600 Subject: [PATCH 2/3] Fixed detecting --- lib/util/stylesheet.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index b4a8d48..fddc0a1 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -99,6 +99,7 @@ const astHelpers = { node.init && node.init.callee && node.init.callee.object && + node.init.callee.object.name && node.init.callee.object.name.includes('StyleSheet') ); }, From dbd5d77cdce8881c1eea11a33c91141e08dfc8c0 Mon Sep 17 00:00:00 2001 From: Dmitriy Kolesnikov Date: Fri, 16 Nov 2018 14:49:50 +0600 Subject: [PATCH 3/3] Added `react-native/style-sheet-object-names` setting --- lib/rules/no-color-literals.js | 2 +- lib/rules/no-unused-styles.js | 2 +- lib/util/stylesheet.js | 13 +++++++++---- tests/lib/rules/no-unused-styles.js | 29 +++++++++++++++++++++++++++++ 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/lib/rules/no-color-literals.js b/lib/rules/no-color-literals.js index a0d68e6..4443fea 100644 --- a/lib/rules/no-color-literals.js +++ b/lib/rules/no-color-literals.js @@ -32,7 +32,7 @@ module.exports = Components.detect((context) => { return { VariableDeclarator: (node) => { - if (astHelpers.isStyleSheetDeclaration(node)) { + if (astHelpers.isStyleSheetDeclaration(node, context.settings)) { const styles = astHelpers.getStyleDeclarations(node); if (styles) { diff --git a/lib/rules/no-unused-styles.js b/lib/rules/no-unused-styles.js index 8a33f5c..2592727 100644 --- a/lib/rules/no-unused-styles.js +++ b/lib/rules/no-unused-styles.js @@ -42,7 +42,7 @@ module.exports = Components.detect((context, components) => { }, VariableDeclarator: function (node) { - if (astHelpers.isStyleSheetDeclaration(node)) { + if (astHelpers.isStyleSheetDeclaration(node, context.settings)) { const styleSheetName = astHelpers.getStyleSheetName(node); const styles = astHelpers.getStyleDeclarations(node); diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index fddc0a1..238fdf2 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -92,15 +92,18 @@ const getSourceCode = node => currentContent .getSourceCode(node) .getText(node); +const getStyleSheetObjectNames = settings => + settings['react-native/style-sheet-object-names'] || ['StyleSheet']; + const astHelpers = { - containsStyleSheetObject: function (node) { + containsStyleSheetObject: function (node, objectNames) { return Boolean( node && node.init && node.init.callee && node.init.callee.object && node.init.callee.object.name && - node.init.callee.object.name.includes('StyleSheet') + objectNames.includes(node.init.callee.object.name) ); }, @@ -114,9 +117,11 @@ const astHelpers = { ); }, - isStyleSheetDeclaration: function (node) { + isStyleSheetDeclaration: function (node, settings) { + const objectNames = getStyleSheetObjectNames(settings); + return Boolean( - astHelpers.containsStyleSheetObject(node) && + astHelpers.containsStyleSheetObject(node, objectNames) && astHelpers.containsCreateCall(node) ); }, diff --git a/tests/lib/rules/no-unused-styles.js b/tests/lib/rules/no-unused-styles.js index 15904bf..c99d3e6 100644 --- a/tests/lib/rules/no-unused-styles.js +++ b/tests/lib/rules/no-unused-styles.js @@ -204,6 +204,17 @@ const tests = { } }); `, + }, { + code: ` + const styles = OtherStyleSheet.create({ + name: {}, + }); + const Hello = React.createClass({ + render: function() { + return Hello {this.props.name}; + } + }); + `, }], invalid: [{ @@ -250,6 +261,21 @@ const tests = { errors: [{ message: 'Unused style detected: styles.bar', }], + }, { + code: ` + const styles = OtherStyleSheet.create({ + foo: {}, + bar: {}, + }) + class Foo extends React.PureComponent { + render() { + return ; + } + } + `, + errors: [{ + message: 'Unused style detected: styles.bar', + }], }], }; @@ -261,6 +287,9 @@ const config = { jsx: true, }, }, + settings: { + 'react-native/style-sheet-object-names': ['StyleSheet', 'OtherStyleSheet'], + }, }; tests.valid.forEach(t => Object.assign(t, config));