From dae95cc0ea1b093609dd4d3a4671a0656b5f876e Mon Sep 17 00:00:00 2001 From: "Barzilay, Oshri (ob143h)" Date: Mon, 1 Nov 2021 09:04:41 +0200 Subject: [PATCH 1/6] added destructured styles detection --- lib/rules/no-unused-styles.js | 27 +++++-- lib/util/stylesheet.js | 144 +++++++++++++++++++--------------- 2 files changed, 100 insertions(+), 71 deletions(-) diff --git a/lib/rules/no-unused-styles.js b/lib/rules/no-unused-styles.js index f91d501..f25dfa7 100644 --- a/lib/rules/no-unused-styles.js +++ b/lib/rules/no-unused-styles.js @@ -20,12 +20,7 @@ module.exports = Components.detect((context, components) => { if ({}.hasOwnProperty.call(unusedStyles, key)) { const styles = unusedStyles[key]; styles.forEach((node) => { - const message = [ - 'Unused style detected: ', - key, - '.', - node.key.name, - ].join(''); + const message = ['Unused style detected: ', key, '.', node.key.name].join(''); context.report(node, message); }); @@ -41,6 +36,26 @@ module.exports = Components.detect((context, components) => { } }, + ArrayExpression: function (arrayNode) { + if (arrayNode && arrayNode.elements && arrayNode.elements.length) { + arrayNode.elements + .flatMap((node) => { + const styleRef = astHelpers.getPotentialStyleReferenceFromArrayExpression(node); + return styleRef ? [styleRef] : []; + }) + .forEach((styleRef) => { + styleReferences.add(styleRef); + }); + } + }, + + JSXExpressionContainer: function (node) { + const styleRef = astHelpers.getPotentialStyleReferenceFromJSXExpressionContainer(node); + if (styleRef) { + styleReferences.add(styleRef); + } + }, + CallExpression: function (node) { if (astHelpers.isStyleSheetDeclaration(node, context.settings)) { const styleSheetName = astHelpers.getStyleSheetName(node); diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index ff8da41..a08c5b2 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -1,4 +1,3 @@ - 'use strict'; /** @@ -31,10 +30,16 @@ StyleSheets.prototype.markAsUsed = function (fullyQualifiedName) { const styleSheetName = nameSplit[0]; const styleSheetProperty = nameSplit[1]; - if (this.styleSheets[styleSheetName]) { - this.styleSheets[styleSheetName] = this - .styleSheets[styleSheetName] - .filter((property) => property.key.name !== styleSheetProperty); + if (nameSplit.length === 1) { + Object.keys(this.styleSheets).forEach((key) => { + this.styleSheets[key] = this.styleSheets[key].filter( + (property) => property.key.name !== styleSheetName + ); + }); + } else if (this.styleSheets[styleSheetName]) { + this.styleSheets[styleSheetName] = this.styleSheets[styleSheetName].filter( + (property) => property.key.name !== styleSheetProperty + ); } }; @@ -86,11 +91,8 @@ StyleSheets.prototype.getObjectExpressions = function () { return this.objectExpressions; }; - let currentContent; -const getSourceCode = (node) => currentContent - .getSourceCode(node) - .getText(node); +const getSourceCode = (node) => currentContent.getSourceCode(node).getText(node); const getStyleSheetObjectNames = (settings) => settings['react-native/style-sheet-object-names'] || ['StyleSheet']; @@ -98,20 +100,17 @@ const astHelpers = { containsStyleSheetObject: function (node, objectNames) { return Boolean( node - && node.type === 'CallExpression' - && node.callee - && node.callee.object - && node.callee.object.name - && objectNames.includes(node.callee.object.name) + && node.type === 'CallExpression' + && node.callee + && node.callee.object + && node.callee.object.name + && objectNames.includes(node.callee.object.name) ); }, containsCreateCall: function (node) { return Boolean( - node - && node.callee - && node.callee.property - && node.callee.property.name === 'create' + node && node.callee && node.callee.property && node.callee.property.name === 'create' ); }, @@ -119,8 +118,7 @@ const astHelpers = { const objectNames = getStyleSheetObjectNames(settings); return Boolean( - astHelpers.containsStyleSheetObject(node, objectNames) - && astHelpers.containsCreateCall(node) + astHelpers.containsStyleSheetObject(node, objectNames) && astHelpers.containsCreateCall(node) ); }, @@ -200,10 +198,12 @@ const astHelpers = { case 'Literal': return node.value; case 'TemplateLiteral': - return node.quasis.reduce((result, quasi, index) => result - + quasi.value.cooked - + astHelpers.getExpressionIdentifier(node.expressions[index]), - ''); + return node.quasis.reduce( + (result, quasi, index) => result + + quasi.value.cooked + + astHelpers.getExpressionIdentifier(node.expressions[index]), + '' + ); default: return ''; } @@ -213,10 +213,7 @@ const astHelpers = { }, getStylePropertyIdentifier: function (node) { - if ( - node - && node.key - ) { + if (node && node.key) { return astHelpers.getExpressionIdentifier(node.key); } }, @@ -224,23 +221,20 @@ const astHelpers = { isStyleAttribute: function (node) { return Boolean( node.type === 'JSXAttribute' - && node.name - && node.name.name - && node.name.name.toLowerCase().includes('style') + && node.name + && node.name.name + && node.name.name.toLowerCase().includes('style') ); }, collectStyleObjectExpressions: function (node, context) { currentContent = context; if (astHelpers.hasArrayOfStyleReferences(node)) { - const styleReferenceContainers = node - .expression - .elements; + const styleReferenceContainers = node.expression.elements; - return astHelpers.collectStyleObjectExpressionFromContainers( - styleReferenceContainers - ); - } if (node && node.expression) { + return astHelpers.collectStyleObjectExpressionFromContainers(styleReferenceContainers); + } + if (node && node.expression) { return astHelpers.getStyleObjectExpressionFromNode(node.expression); } @@ -254,13 +248,9 @@ const astHelpers = { currentContent = context; if (astHelpers.hasArrayOfStyleReferences(node)) { - const styleReferenceContainers = node - .expression - .elements; + const styleReferenceContainers = node.expression.elements; - return astHelpers.collectColorLiteralsFromContainers( - styleReferenceContainers - ); + return astHelpers.collectColorLiteralsFromContainers(styleReferenceContainers); } if (node.type === 'ObjectExpression') { @@ -273,8 +263,9 @@ const astHelpers = { collectStyleObjectExpressionFromContainers: function (nodes) { let objectExpressions = []; nodes.forEach((node) => { - objectExpressions = objectExpressions - .concat(astHelpers.getStyleObjectExpressionFromNode(node)); + objectExpressions = objectExpressions.concat( + astHelpers.getStyleObjectExpressionFromNode(node) + ); }); return objectExpressions; @@ -283,8 +274,7 @@ const astHelpers = { collectColorLiteralsFromContainers: function (nodes) { let colorLiterals = []; nodes.forEach((node) => { - colorLiterals = colorLiterals - .concat(astHelpers.getColorLiteralsFromNode(node)); + colorLiterals = colorLiterals.concat(astHelpers.getColorLiteralsFromNode(node)); }); return colorLiterals; @@ -369,10 +359,13 @@ const astHelpers = { }, hasArrayOfStyleReferences: function (node) { - return node && Boolean( - node.type === 'JSXExpressionContainer' - && node.expression - && node.expression.type === 'ArrayExpression' + return ( + node + && Boolean( + node.type === 'JSXExpressionContainer' + && node.expression + && node.expression.type === 'ArrayExpression' + ) ); }, @@ -408,10 +401,18 @@ const astHelpers = { invalid = true; obj[p.key.name] = getSourceCode(innerNode); } - } else if (p.value.type === 'UnaryExpression' && p.value.operator === '-' && p.value.argument.type === 'Literal') { + } else if ( + p.value.type === 'UnaryExpression' + && p.value.operator === '-' + && p.value.argument.type === 'Literal' + ) { invalid = true; obj[p.key.name] = -1 * p.value.argument.value; - } else if (p.value.type === 'UnaryExpression' && p.value.operator === '+' && p.value.argument.type === 'Literal') { + } else if ( + p.value.type === 'UnaryExpression' + && p.value.operator === '+' + && p.value.argument.type === 'Literal' + ) { invalid = true; obj[p.key.name] = p.value.argument.value; } @@ -443,21 +444,13 @@ const astHelpers = { }, getObjectName: function (node) { - if ( - node - && node.object - && node.object.name - ) { + if (node && node.object && node.object.name) { return node.object.name; } }, getPropertyName: function (node) { - if ( - node - && node.property - && node.property.name - ) { + if (node && node.property && node.property.name) { return node.property.name; } }, @@ -477,11 +470,32 @@ const astHelpers = { } }, + getPotentialStyleReferenceFromArrayExpression: function (node) { + if (node && node.type === 'Identifier' && node.name) { + return node.name; + } + }, + + getPotentialStyleReferenceFromJSXExpressionContainer: function (node) { + if ( + node + && node.expression + && node.expression.type === 'Identifier' + && node.expression.name + && node.parent + && node.parent.name + && node.parent.name.name === 'style' + ) { + return node.expression.name; + } + }, + isEitherShortHand: function (property1, property2) { const shorthands = ['margin', 'padding', 'border', 'flex']; if (shorthands.includes(property1)) { return property2.startsWith(property1); - } if (shorthands.includes(property2)) { + } + if (shorthands.includes(property2)) { return property1.startsWith(property2); } return false; From 16899b8d175d63fb6263e4d284a7451a00248010 Mon Sep 17 00:00:00 2001 From: "Barzilay, Oshri (ob143h)" Date: Mon, 1 Nov 2021 09:35:23 +0200 Subject: [PATCH 2/6] fix tests --- tests/lib/rules/no-color-literals.js | 68 +++++++----- tests/lib/rules/no-inline-styles.js | 22 ++-- tests/lib/rules/no-unused-styles.js | 155 +++++++++++++++++---------- 3 files changed, 149 insertions(+), 96 deletions(-) diff --git a/tests/lib/rules/no-color-literals.js b/tests/lib/rules/no-color-literals.js index 987c4bf..185b652 100644 --- a/tests/lib/rules/no-color-literals.js +++ b/tests/lib/rules/no-color-literals.js @@ -37,7 +37,7 @@ const tests = { export default class MyComponent extends Component { render() { const isDanger = true; - return ; } @@ -57,11 +57,11 @@ const tests = { export default class MyComponent extends Component { render() { const trueColor = '#fff'; - const falseColor = '#000' - return ; } } @@ -79,9 +79,11 @@ const tests = { } }); `, - errors: [{ - message: 'Color literal: { backgroundColor: \'#FFFFFF\' }', - }], + errors: [ + { + message: "Color literal: { backgroundColor: '#FFFFFF' }", + }, + ], }, { code: ` @@ -93,9 +95,11 @@ const tests = { } }); `, - errors: [{ - message: 'Color literal: { backgroundColor: \'#FFFFFF\' }', - }], + errors: [ + { + message: "Color literal: { backgroundColor: '#FFFFFF' }", + }, + ], }, { code: ` @@ -110,9 +114,11 @@ const tests = { } }); `, - errors: [{ - message: 'Color literal: { fontColor: \'#000\' }', - }], + errors: [ + { + message: "Color literal: { fontColor: '#000' }", + }, + ], }, { code: ` @@ -124,24 +130,28 @@ const tests = { } }); `, - errors: [{ - message: 'Color literal: { backgroundColor: \'#FFFFFF\' }', - }], + errors: [ + { + message: "Color literal: { backgroundColor: '#FFFFFF' }", + }, + ], }, { code: ` const Hello = React.createClass({ render: function() { - const someBoolean = false; + const someBoolean = false; return Hello {this.props.name} ; } }); `, - errors: [{ - message: 'Color literal: { backgroundColor: \'#FFFFFF\' }', - }], + errors: [ + { + message: "Color literal: { backgroundColor: '#FFFFFF' }", + }, + ], }, { code: ` @@ -156,23 +166,23 @@ const tests = { }); export default class MyComponent extends Component { render() { - return ; } } `, errors: [ { - message: 'Color literal: { color: \'red\' }', + message: "Color literal: { color: 'red' }", }, { - message: 'Color literal: { borderBottomColor: \'blue\' }', + message: "Color literal: { borderBottomColor: 'blue' }", }, { - message: 'Color literal: { backgroundColor: \'someBoolean ? \\\'#fff\\\' : \\\'#000\\\'\' }', //eslint-disable-line + message: `Color literal: { backgroundColor: "someBoolean ? '#fff' : '#000'" }`, //eslint-disable-line }, ], }, diff --git a/tests/lib/rules/no-inline-styles.js b/tests/lib/rules/no-inline-styles.js index 0259ab8..d61e2f5 100644 --- a/tests/lib/rules/no-inline-styles.js +++ b/tests/lib/rules/no-inline-styles.js @@ -56,11 +56,11 @@ const tests = { }); export default class MyComponent extends Component { render() { - const trueColor = '#fff'; const falseColor = '#000' - return ; } } @@ -154,7 +154,7 @@ const tests = { code: ` const Hello = React.createClass({ render: function() { - const someBoolean = false; + const someBoolean = false; return Hello {this.props.name} ; @@ -177,16 +177,16 @@ const tests = { }); export default class MyComponent extends Component { render() { - return ; } } `, errors: [{ - message: 'Inline style: { backgroundColor: \'someBoolean ? \\\'#fff\\\' : \\\'#000\\\'\' }', //eslint-disable-line + message: `Inline style: { backgroundColor: "someBoolean ? '#fff' : '#000'" }`, //eslint-disable-line }], }, ], diff --git a/tests/lib/rules/no-unused-styles.js b/tests/lib/rules/no-unused-styles.js index 9681b33..f2c42e3 100644 --- a/tests/lib/rules/no-unused-styles.js +++ b/tests/lib/rules/no-unused-styles.js @@ -20,8 +20,9 @@ require('babel-eslint'); const ruleTester = new RuleTester(); const tests = { - valid: [{ - code: ` + valid: [ + { + code: ` const styles = StyleSheet.create({ name: {} }); @@ -31,8 +32,22 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` + const styles = StyleSheet.create({ + name: {} + }); + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + `, + }, + { + code: ` const Hello = React.createClass({ render: function() { return Hello {this.props.name}; @@ -42,8 +57,9 @@ const tests = { name: {} }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ name: {} }); @@ -53,8 +69,9 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ name: {}, welcome: {} @@ -70,8 +87,9 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ text: {} }) @@ -84,8 +102,9 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ text: {} }) @@ -105,14 +124,15 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ text: {} }); const Hello = React.createClass({ getInitialState: function() { - return { condition: true, condition2: true }; + return { condition: true, condition2: true }; }, render: function() { return ( @@ -127,15 +147,16 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ text: {}, text2: {}, }); const Hello = React.createClass({ getInitialState: function() { - return { condition: true }; + return { condition: true }; }, render: function() { return ( @@ -146,8 +167,9 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ style1: { color: 'red', @@ -165,17 +187,19 @@ const tests = { } } `, - }, { - code: ` + }, + { + code: ` const styles = StyleSheet.create({ text: {} }) `, - }, { - code: ` + }, + { + code: ` const Hello = React.createClass({ getInitialState: function() { - return { condition: true }; + return { condition: true }; }, render: function() { const myStyle = this.state.condition ? styles.text : styles.text2; @@ -191,8 +215,9 @@ const tests = { text2: {}, }); `, - }, { - code: ` + }, + { + code: ` const additionalStyles = {}; const styles = StyleSheet.create({ name: {}, @@ -204,8 +229,9 @@ const tests = { } }); `, - }, { - code: ` + }, + { + code: ` const styles = OtherStyleSheet.create({ name: {}, }); @@ -215,10 +241,12 @@ const tests = { } }); `, - }], + }, + ], - invalid: [{ - code: ` + invalid: [ + { + code: ` const styles = StyleSheet.create({ text: {} }) @@ -228,11 +256,14 @@ const tests = { } }); `, - errors: [{ - message: 'Unused style detected: styles.text', - }], - }, { - code: ` + errors: [ + { + message: 'Unused style detected: styles.text', + }, + ], + }, + { + code: ` const styles = StyleSheet.create({ foo: {}, bar: {}, @@ -243,11 +274,14 @@ const tests = { } } `, - errors: [{ - message: 'Unused style detected: styles.bar', - }], - }, { - code: ` + errors: [ + { + message: 'Unused style detected: styles.bar', + }, + ], + }, + { + code: ` const styles = StyleSheet.create({ foo: {}, bar: {}, @@ -258,11 +292,14 @@ const tests = { } } `, - errors: [{ - message: 'Unused style detected: styles.bar', - }], - }, { - code: ` + errors: [ + { + message: 'Unused style detected: styles.bar', + }, + ], + }, + { + code: ` const styles = OtherStyleSheet.create({ foo: {}, bar: {}, @@ -273,20 +310,26 @@ const tests = { } } `, - errors: [{ - message: 'Unused style detected: styles.bar', - }], - }, { - code: ` + errors: [ + { + message: 'Unused style detected: styles.bar', + }, + ], + }, + { + code: ` const styles = StyleSheet.create({ text: {} }) const Hello = () => (<>Hello); `, - errors: [{ - message: 'Unused style detected: styles.text', - }], - }], + errors: [ + { + message: 'Unused style detected: styles.text', + }, + ], + }, + ], }; const config = { From a428adbcd5c72d823f6090d09269a50042c27b57 Mon Sep 17 00:00:00 2001 From: "Barzilay, Oshri (ob143h)" Date: Mon, 1 Nov 2021 09:35:53 +0200 Subject: [PATCH 3/6] add textStyle destructuring support --- 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 a08c5b2..26e53a7 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -484,7 +484,7 @@ const astHelpers = { && node.expression.name && node.parent && node.parent.name - && node.parent.name.name === 'style' + && ['style', 'textStyle'].includes(node.parent.name.name) ) { return node.expression.name; } From b618278984197b5db99e697634c7ff2c5e82d68f Mon Sep 17 00:00:00 2001 From: "Barzilay, Oshri (ob143h)" Date: Mon, 1 Nov 2021 16:23:18 +0200 Subject: [PATCH 4/6] fixed styles destructuring support --- lib/rules/no-unused-styles.js | 25 ++++----------------- lib/util/stylesheet.js | 42 +++++++++++++++-------------------- 2 files changed, 22 insertions(+), 45 deletions(-) diff --git a/lib/rules/no-unused-styles.js b/lib/rules/no-unused-styles.js index f25dfa7..ac82f2f 100644 --- a/lib/rules/no-unused-styles.js +++ b/lib/rules/no-unused-styles.js @@ -36,24 +36,9 @@ module.exports = Components.detect((context, components) => { } }, - ArrayExpression: function (arrayNode) { - if (arrayNode && arrayNode.elements && arrayNode.elements.length) { - arrayNode.elements - .flatMap((node) => { - const styleRef = astHelpers.getPotentialStyleReferenceFromArrayExpression(node); - return styleRef ? [styleRef] : []; - }) - .forEach((styleRef) => { - styleReferences.add(styleRef); - }); - } - }, - - JSXExpressionContainer: function (node) { - const styleRef = astHelpers.getPotentialStyleReferenceFromJSXExpressionContainer(node); - if (styleRef) { - styleReferences.add(styleRef); - } + VariableDeclarator: function (node) { + const styleRefs = astHelpers.getPotentialDestructuredStyleReferences(node); + styleRefs.forEach(styleReferences.add, styleReferences); }, CallExpression: function (node) { @@ -68,9 +53,7 @@ module.exports = Components.detect((context, components) => { 'Program:exit': function () { const list = components.all(); if (Object.keys(list).length > 0) { - styleReferences.forEach((reference) => { - styleSheets.markAsUsed(reference); - }); + styleReferences.forEach(styleSheets.markAsUsed, styleSheets); reportUnusedStyles(styleSheets.getUnusedReferences()); } }, diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index 26e53a7..af01913 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -30,13 +30,7 @@ StyleSheets.prototype.markAsUsed = function (fullyQualifiedName) { const styleSheetName = nameSplit[0]; const styleSheetProperty = nameSplit[1]; - if (nameSplit.length === 1) { - Object.keys(this.styleSheets).forEach((key) => { - this.styleSheets[key] = this.styleSheets[key].filter( - (property) => property.key.name !== styleSheetName - ); - }); - } else if (this.styleSheets[styleSheetName]) { + if (this.styleSheets[styleSheetName]) { this.styleSheets[styleSheetName] = this.styleSheets[styleSheetName].filter( (property) => property.key.name !== styleSheetProperty ); @@ -122,6 +116,14 @@ const astHelpers = { ); }, + getDestructuringAssignmentParts: function (node) { + if (node && node.id && node.id.type === 'ObjectPattern' && node.id.properties && node.init) { + return [node.init.name, node.id.properties]; + } + + return [null, null]; + }, + getStyleSheetName: function (node) { if (node && node.parent && node.parent.id) { return node.parent.id.name; @@ -470,24 +472,16 @@ const astHelpers = { } }, - getPotentialStyleReferenceFromArrayExpression: function (node) { - if (node && node.type === 'Identifier' && node.name) { - return node.name; - } - }, + getPotentialDestructuredStyleReferences: function (node) { + const [styleSheetName, properties] = this.getDestructuringAssignmentParts(node); - getPotentialStyleReferenceFromJSXExpressionContainer: function (node) { - if ( - node - && node.expression - && node.expression.type === 'Identifier' - && node.expression.name - && node.parent - && node.parent.name - && ['style', 'textStyle'].includes(node.parent.name.name) - ) { - return node.expression.name; - } + return styleSheetName && properties + ? properties.flatMap((property) => + property.key && property.key.type === 'Identifier' && property.key.name + ? `${styleSheetName}.${property.key.name}` + : [] + ) + : []; }, isEitherShortHand: function (property1, property2) { From a1e4a2ac0dcdc3cb268060fdfca95e0eb02239e9 Mon Sep 17 00:00:00 2001 From: "Barzilay, Oshri (ob143h)" Date: Mon, 1 Nov 2021 16:24:41 +0200 Subject: [PATCH 5/6] UTs update --- lib/util/stylesheet.js | 8 +- tests/lib/rules/no-unused-styles.js | 306 ++++++++++++++++++++++++++++ 2 files changed, 309 insertions(+), 5 deletions(-) diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index af01913..11c0409 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -476,11 +476,9 @@ const astHelpers = { const [styleSheetName, properties] = this.getDestructuringAssignmentParts(node); return styleSheetName && properties - ? properties.flatMap((property) => - property.key && property.key.type === 'Identifier' && property.key.name - ? `${styleSheetName}.${property.key.name}` - : [] - ) + ? properties.flatMap((property) => (property.key && property.key.type === 'Identifier' && property.key.name + ? `${styleSheetName}.${property.key.name}` + : [])) : []; }, diff --git a/tests/lib/rules/no-unused-styles.js b/tests/lib/rules/no-unused-styles.js index f2c42e3..b699341 100644 --- a/tests/lib/rules/no-unused-styles.js +++ b/tests/lib/rules/no-unused-styles.js @@ -46,6 +46,19 @@ const tests = { }); `, }, + { + code: ` + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + const styles = StyleSheet.create({ + name: {} + }); + `, + }, { code: ` const Hello = React.createClass({ @@ -58,6 +71,19 @@ const tests = { }); `, }, + { + code: ` + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + const styles = StyleSheet.create({ + name: {} + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -70,6 +96,19 @@ const tests = { }); `, }, + { + code: ` + const styles = StyleSheet.create({ + name: {} + }); + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -88,6 +127,26 @@ const tests = { }); `, }, + { + code: ` + const styles = StyleSheet.create({ + name: {}, + welcome: {} + }); + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + const Welcome = React.createClass({ + render: function() { + const { welcome } = styles; + return Welcome; + } + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -103,6 +162,22 @@ const tests = { }); `, }, + { + code: ` + const styles = StyleSheet.create({ + text: {} + }) + const Hello = React.createClass({ + propTypes: { + textStyle: Text.propTypes.style, + }, + render: function() { + const { text } = styles; + return Hello {this.props.name}; + } + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -125,6 +200,30 @@ const tests = { }); `, }, + { + code: ` + const styles = StyleSheet.create({ + text: {} + }) + const styles2 = StyleSheet.create({ + text: {} + }) + const Hello = React.createClass({ + propTypes: { + textStyle: Text.propTypes.style, + }, + render: function() { + const { text } = styles; + const { text: text2 } = styles2; + return ( + + Hello {this.props.name} + + ); + } + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -148,6 +247,30 @@ const tests = { }); `, }, + { + code: ` + const styles = StyleSheet.create({ + text: {} + }); + const Hello = React.createClass({ + getInitialState: function() { + return { condition: true, condition2: true }; + }, + render: function() { + const { text } = styles; + return ( + + Hello {this.props.name} + + ); + } + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -168,6 +291,27 @@ const tests = { }); `, }, + { + code: ` + const styles = StyleSheet.create({ + text: {}, + text2: {}, + }); + const Hello = React.createClass({ + getInitialState: function() { + return { condition: true }; + }, + render: function() { + const { text, text2 } = styles; + return ( + + Hello {this.props.name} + + ); + } + }); + `, + }, { code: ` const styles = StyleSheet.create({ @@ -188,6 +332,27 @@ const tests = { } `, }, + { + code: ` + const styles = StyleSheet.create({ + style1: { + color: 'red', + }, + style2: { + color: 'blue', + } + }); + export default class MyComponent extends Component { + static propTypes = { + isDanger: PropTypes.bool + }; + render() { + const { style1, style2 } = styles; + return ; + } + } + `, + }, { code: ` const styles = StyleSheet.create({ @@ -216,6 +381,28 @@ const tests = { }); `, }, + { + code: ` + const Hello = React.createClass({ + getInitialState: function() { + return { condition: true }; + }, + render: function() { + const { text, text2 } = styles; + const myStyle = this.state.condition ? text : text2; + return ( + + Hello {this.props.name} + + ); + } + }); + const styles = StyleSheet.create({ + text: {}, + text2: {}, + }); + `, + }, { code: ` const additionalStyles = {}; @@ -230,6 +417,21 @@ const tests = { }); `, }, + { + code: ` + const additionalStyles = {}; + const styles = StyleSheet.create({ + name: {}, + ...additionalStyles + }); + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + `, + }, { code: ` const styles = OtherStyleSheet.create({ @@ -242,6 +444,19 @@ const tests = { }); `, }, + { + code: ` + const styles = OtherStyleSheet.create({ + name: {}, + }); + const Hello = React.createClass({ + render: function() { + const { name } = styles; + return Hello {this.props.name}; + } + }); + `, + }, ], invalid: [ @@ -262,6 +477,24 @@ const tests = { }, ], }, + { + code: ` + const styles = StyleSheet.create({ + text: {} + }) + const Hello = React.createClass({ + render: function() { + const { b } = styles; + return Hello {this.props.name}; + } + }); + `, + errors: [ + { + message: 'Unused style detected: styles.text', + }, + ], + }, { code: ` const styles = StyleSheet.create({ @@ -280,6 +513,25 @@ const tests = { }, ], }, + { + code: ` + const styles = StyleSheet.create({ + foo: {}, + bar: {}, + }) + class Foo extends React.Component { + render() { + const { foo } = styles; + return ; + } + } + `, + errors: [ + { + message: 'Unused style detected: styles.bar', + }, + ], + }, { code: ` const styles = StyleSheet.create({ @@ -298,6 +550,25 @@ const tests = { }, ], }, + { + code: ` + const styles = StyleSheet.create({ + foo: {}, + bar: {}, + }) + class Foo extends React.PureComponent { + render() { + const { foo } = styles; + return ; + } + } + `, + errors: [ + { + message: 'Unused style detected: styles.bar', + }, + ], + }, { code: ` const styles = OtherStyleSheet.create({ @@ -316,6 +587,25 @@ const tests = { }, ], }, + { + code: ` + const styles = OtherStyleSheet.create({ + foo: {}, + bar: {}, + }) + class Foo extends React.PureComponent { + render() { + const { foo } = styles; + return ; + } + } + `, + errors: [ + { + message: 'Unused style detected: styles.bar', + }, + ], + }, { code: ` const styles = StyleSheet.create({ @@ -329,6 +619,22 @@ const tests = { }, ], }, + { + code: ` + const styles = StyleSheet.create({ + text: {} + }) + const Hello = () => { + const { b } = styles; + return <>Hello; + } + `, + errors: [ + { + message: 'Unused style detected: styles.text', + }, + ], + }, ], }; From c930a197177a6803788f5540b79776170dffb069 Mon Sep 17 00:00:00 2001 From: "Barzilay, Oshri (ob143h)" Date: Mon, 1 Nov 2021 17:43:43 +0200 Subject: [PATCH 6/6] dups removed --- tests/lib/rules/no-unused-styles.js | 37 +++-------------------------- 1 file changed, 3 insertions(+), 34 deletions(-) diff --git a/tests/lib/rules/no-unused-styles.js b/tests/lib/rules/no-unused-styles.js index b699341..a9b468d 100644 --- a/tests/lib/rules/no-unused-styles.js +++ b/tests/lib/rules/no-unused-styles.js @@ -46,19 +46,6 @@ const tests = { }); `, }, - { - code: ` - const Hello = React.createClass({ - render: function() { - const { name } = styles; - return Hello {this.props.name}; - } - }); - const styles = StyleSheet.create({ - name: {} - }); - `, - }, { code: ` const Hello = React.createClass({ @@ -69,7 +56,7 @@ const tests = { const styles = StyleSheet.create({ name: {} }); - `, + `, }, { code: ` @@ -88,26 +75,8 @@ const tests = { code: ` const styles = StyleSheet.create({ name: {} - }); - const Hello = React.createClass({ - render: function() { - return Hello {this.props.name}; - } - }); - `, - }, - { - code: ` - const styles = StyleSheet.create({ - name: {} - }); - const Hello = React.createClass({ - render: function() { - const { name } = styles; - return Hello {this.props.name}; - } - }); - `, + }) + `, }, { code: `