eslint-plugin-react-native - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0-beta

index.js

@@ -6,2 +6,4 @@ 'use strict'
     'no-unused-styles': require('./lib/rules/no-unused-styles'),
+    'no-inline-styles': require('./lib/rules/no-inline-styles'),
+    'no-color-literals': require('./lib/rules/no-color-literals'),
     'split-platform-components': require('./lib/rules/split-platform-components')
@@ -11,4 +13,6 @@ },
     'no-unused-styles': 0,
+    'no-inline-styles': 0,
+    'no-color-literals': 0,
     'split-platform-components': 0
   }
 };

lib/util/stylesheet.js

@@ -34,4 +34,4 @@ 'use strict';
     this._styleSheets[styleSheetName] = this
-      ._styleSheets[styleSheetName]
-      .filter((property) => property.key.name !== styleSheetProperty);
+        ._styleSheets[styleSheetName]
+        .filter((property) => property.key.name !== styleSheetProperty);
   }
@@ -41,5 +41,5 @@ };
 /**
-* GetUnusedReferences returns all collected StyleSheets and their
-* unmarked rules.
-*/
+ * GetUnusedReferences returns all collected StyleSheets and their
+ * unmarked rules.
+ */
 StyleSheets.prototype.getUnusedReferences = function () {
@@ -49,2 +49,49 @@ return this._styleSheets;
 
+/**
+ * AddColorLiterals adds an array of expressions that contain color literals
+ * to the ColorLiterals collection
+ * @param {array} expressions - an array of expressions containing color literals
+ */
+StyleSheets.prototype.addColorLiterals = function (expressions) {
+  if (!this._colorLiterals) {
+    this._colorLiterals = [];
+  }
+  this._colorLiterals = this._colorLiterals.concat(expressions);
+};
+
+/**
+ * GetColorLiterals returns an array of collected color literals expressions
+ * @returns {Array}
+ */
+StyleSheets.prototype.getColorLiterals = function () {
+  return this._colorLiterals;
+};
+
+/**
+ * AddObjectexpressions adds an array of expressions to the ObjectExpressions collection
+ * @param {Array} expressions - an array of expressions containing ObjectExpressions in
+ * inline styles
+ */
+StyleSheets.prototype.addObjectExpressions = function (expressions) {
+  if (!this._objectExpressions) {
+    this._objectExpressions = [];
+  }
+  this._objectExpressions = this._objectExpressions.concat(expressions);
+};
+
+/**
+ * GetObjectExpressions returns an array of collected object expressiosn used in inline styles
+ * @returns {Array}
+ */
+StyleSheets.prototype.getObjectExpressions = function () {
+  return this._objectExpressions;
+};
+
+
+let _context;
+const _getSourceCode = node => _context
+  .getSourceCode(node)
+  .getText(node)
+;
+
 const astHelpers = {
@@ -127,11 +174,64 @@ containsStyleSheetObject: function (node) {
 
+  collectStyleObjectExpressions: function (node, context) {
+    _context = context;
+    if (astHelpers.hasArrayOfStyleReferences(node)) {
+      const styleReferenceContainers = node
+          .expression
+          .elements;
+
+      return astHelpers.collectStyleObjectExpressionFromContainers(
+          styleReferenceContainers
+      );
+    }
+
+    return astHelpers.getStyleObjectExpressionFromNode(node.expression);
+  },
+
+  collectColorLiterals: function (node, context) {
+    _context = context;
+    if (astHelpers.hasArrayOfStyleReferences(node)) {
+      const styleReferenceContainers = node
+          .expression
+          .elements;
+
+      return astHelpers.collectColorLiteralsFromContainers(
+          styleReferenceContainers
+      );
+    }
+
+    if (node.type === 'ObjectExpression') {
+      return astHelpers.getColorLiteralsFromNode(node);
+    }
+
+    return astHelpers.getColorLiteralsFromNode(node.expression);
+  },
+
   collectStyleReferencesFromContainers: function (nodes) {
     let styleReferences = [];
-    nodes.forEach((node) => {
+    nodes.forEach(node => {
       styleReferences = styleReferences.concat(astHelpers.getStyleReferenceFromNode(node));
     });
-
     return styleReferences;
   },
 
+  collectStyleObjectExpressionFromContainers: function (nodes) {
+    let objectExpressions = [];
+    nodes.forEach(node => {
+      objectExpressions = objectExpressions
+          .concat(astHelpers.getStyleObjectExpressionFromNode(node));
+    });
+
+    return objectExpressions;
+  },
+
+  collectColorLiteralsFromContainers: function (nodes) {
+    let colorLiterals = [];
+    nodes.forEach(node => {
+      colorLiterals = colorLiterals
+          .concat(astHelpers.getColorLiteralsFromNode(node));
+    });
+
+    return colorLiterals;
+  },
+
   getStyleReferenceFromNode: function (node) {
@@ -163,2 +263,54 @@ let styleReference;
 
+  getStyleObjectExpressionFromNode: function (node) {
+    let leftStyleObjectExpression;
+    let rightStyleObjectExpression;
+
+    if (!node) {
+      return [];
+    }
+
+    if (node.type === 'ObjectExpression') {
+      return [astHelpers.getStyleObjectFromExpression(node)];
+    }
+
+    switch (node.type) {
+      case 'LogicalExpression':
+        leftStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.left);
+        rightStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.right);
+        return [].concat(leftStyleObjectExpression).concat(rightStyleObjectExpression);
+      case 'ConditionalExpression':
+        leftStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.consequent);
+        rightStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.alternate);
+        return [].concat(leftStyleObjectExpression).concat(rightStyleObjectExpression);
+      default:
+        return [];
+    }
+  },
+
+  getColorLiteralsFromNode: function (node) {
+    let leftColorLiterals;
+    let rightColorLiterals;
+
+    if (!node) {
+      return [];
+    }
+
+    if (node.type === 'ObjectExpression') {
+      return [astHelpers.getColorLiteralsFromExpression(node)];
+    }
+
+    switch (node.type) {
+      case 'LogicalExpression':
+        leftColorLiterals = astHelpers.getColorLiteralsFromNode(node.left);
+        rightColorLiterals = astHelpers.getColorLiteralsFromNode(node.right);
+        return [].concat(leftColorLiterals).concat(rightColorLiterals);
+      case 'ConditionalExpression':
+        leftColorLiterals = astHelpers.getColorLiteralsFromNode(node.consequent);
+        rightColorLiterals = astHelpers.getColorLiteralsFromNode(node.alternate);
+        return [].concat(leftColorLiterals).concat(rightColorLiterals);
+      default:
+        return [];
+    }
+  },
+
   hasArrayOfStyleReferences: function (node) {
@@ -187,2 +339,50 @@ return Boolean(
 
+  getStyleObjectFromExpression: function (node) {
+    const obj = {};
+    let invalid = false;
+    if (node.properties && node.properties.length) {
+      node.properties.forEach(p => {
+        if (p.value.type === 'Literal') {
+          invalid = true;
+          obj[p.key.name] = p.value.value;
+        } else if (p.value.type === 'ConditionalExpression') {
+          const innerNode = p.value;
+          if (innerNode.consequent.type === 'Literal' || innerNode.alternate.type === 'Literal') {
+            invalid = true;
+            obj[p.key.name] = _getSourceCode(innerNode);
+          }
+        } else if (p.value.type === 'UnaryExpression' && p.value.operator === '-') {
+          invalid = true;
+          obj[p.key.name] = -1 * p.value.argument.value;
+        } else if (p.value.type === 'UnaryExpression' && p.value.operator === '+') {
+          invalid = true;
+          obj[p.key.name] = p.value.argument.value;
+        }
+      });
+    }
+    return invalid ? { expression: obj, node: node } : undefined;
+  },
+
+  getColorLiteralsFromExpression: function (node) {
+    const obj = {};
+    let invalid = false;
+    if (node.properties && node.properties.length) {
+      node.properties.forEach(p => {
+        if (p.key.name.toLowerCase().indexOf('color') !== -1) {
+          if (p.value.type === 'Literal') {
+            invalid = true;
+            obj[p.key.name] = p.value.value;
+          } else if (p.value.type === 'ConditionalExpression') {
+            const innerNode = p.value;
+            if (innerNode.consequent.type === 'Literal' || innerNode.alternate.type === 'Literal') {
+              invalid = true;
+              obj[p.key.name] = _getSourceCode(innerNode);
+            }
+          }
+        }
+      });
+    }
+    return invalid ? { expression: obj, node: node } : undefined;
+  },
+
   getObjectName: function (node) {
@@ -189,0 +389,0 @@ if (

package.json

 {
   "name": "eslint-plugin-react-native",
-  "version": "1.0.2",
+  "version": "1.1.0-beta",
   "author": "Tom Hastjarjanto <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "React Native specific linting rules for ESLint",

README.md

@@ -60,2 +60,4 @@
     "react-native/split-platform-components": 2,
+    "react-native/no-inline-styles": 2,
+    "react-native/no-color-literals": 2,
   }
@@ -69,4 +71,5 @@ }
 * [split-platform-components](docs/rules/split-platform-components.md): Enforce using platform specific filenames when necessary
+* [no-inline-styles](docs/rules/no-inline-styles.md): Detect JSX components with inline styles that contain literal values
+* [no-color-literals](docs/rules/no-color-literals.md): Detect `StyleSheet` rules and inline styles containing color literals instead of variables
 
-
 [npm-url]: https://npmjs.org/package/eslint-plugin-react-native
@@ -73,0 +76,0 @@ [npm-image]: http://img.shields.io/npm/v/eslint-plugin-react-native.svg?style=flat-square

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37552

increased by34.5%

Number of package files

11

increased by22.22%

Lines of code

1019

increased by34.79%

Number of lines in readme file

90

increased by3.45%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes