added destructured styles detection

Author: Barzilay, Oshri (ob143h)

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);

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,41 +91,34 @@ 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'];
 
 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'
     );
   },
 
   isStyleSheetDeclaration: function (node, settings) {
     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,34 +213,28 @@ const astHelpers = {
   },
 
   getStylePropertyIdentifier: function (node) {
-    if (
-      node
-      && node.key
-    ) {
+    if (node && node.key) {
       return astHelpers.getExpressionIdentifier(node.key);
     }
   },
 
   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;