fela-plugin-validator - npm Package Compare versions

Comparing version 5.0.17 to 5.1.0

es/index.js

@@ -5,4 +5,5 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-/* eslint-disable no-console */
-import { RULE_TYPE, KEYFRAME_TYPE, isNestedSelector, isMediaQuery } from 'fela-utils';
+import { RULE_TYPE, KEYFRAME_TYPE, isNestedSelector, isMediaQuery, isSupport } from 'fela-utils';
+import cssifyDeclaration from 'css-in-js-utils/lib/cssifyDeclaration';
+import { CSSLint } from 'csslint';
 
@@ -13,21 +14,42 @@ function isPlainObject(obj) {
 
+function handleError(property, style, logInvalid, deleteInvalid, message, logObject) {
+  if (deleteInvalid) {
+    delete style[property];
+  }
+  if (logInvalid) {
+    /* eslint-disable-next-line no-console */
+    console.error('' + (deleteInvalid ? '[Deleted] ' : ' ') + message, logObject);
+  }
+}
+
 function validateStyleObject(style, logInvalid, deleteInvalid) {
-  for (var property in style) {
+  var _loop = function _loop(property) {
     var value = style[property];
 
     if (isPlainObject(value)) {
-      if (isNestedSelector(property) || isMediaQuery(property)) {
+      if (isNestedSelector(property) || isMediaQuery(property) || isSupport(property)) {
         validateStyleObject(value, logInvalid, deleteInvalid);
       } else {
-        if (deleteInvalid) {
-          delete style[property];
-        }
-        if (logInvalid) {
-          console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid nested property. Only use nested media queries, pseudo classes, child selectors or &-combinators.\n              Maybe you forgot to add a plugin that resolves "' + property + '".', {
-            property: property,
-            value: value
-          });
-        }
+        handleError(property, style, logInvalid, deleteInvalid, 'Invalid nested property. Only use nested media queries, pseudo classes, child selectors or &-combinators.\n          Maybe you forgot to add a plugin that resolves "' + property + '".', {
+          property: property,
+          value: value
+        });
       }
+    } else {
+      var _CSSLint$verify = CSSLint.verify('.fela {' + cssifyDeclaration(property, value) + ';}'),
+          messages = _CSSLint$verify.messages;
+
+      messages.forEach(function (_ref) {
+        var message = _ref.message;
+
+        handleError(property, style, logInvalid, deleteInvalid, 'Invalid property "' + property + '" with value "' + value + '". ' + message.replace(/ at line .+, col .+\./, '.'), {
+          property: property,
+          value: value
+        });
+      });
     }
+  };
+
+  for (var property in style) {
+    _loop(property);
   }
@@ -44,24 +66,16 @@ }
   for (var percentage in style) {
-    var value = style[percentage];
-    if (!isPlainObject(value)) {
-      if (logInvalid) {
-        console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe value. An object was expected.', {
-          percentage: percentage,
-          style: value
-        });
-      }
-      if (deleteInvalid) {
-        delete style[percentage];
-      }
+    var _value = style[percentage];
+    if (!isPlainObject(_value)) {
+      handleError(percentage, style, logInvalid, deleteInvalid, 'Invalid keyframe value. An object was expected.', {
+        percentage: percentage,
+        style: _value
+      });
       // check for invalid percentage values, it only allows from, to or 0% - 100%
     } else if (percentage !== 'from' && percentage !== 'to' && !isValidPercentage(percentage)) {
-      if (logInvalid) {
-        console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe property.\n              Expected either `to`, `from` or a percentage value between 0 and 100.', {
-          percentage: percentage,
-          style: value
-        });
-      }
-      if (deleteInvalid) {
-        delete style[percentage];
-      }
+      handleError(percentage, style, logInvalid, deleteInvalid, 'Invalid keyframe property.\n        Expected either `to`, `from` or a percentage value between 0 and 100.', {
+        percentage: percentage,
+        style: _value
+      });
+    } else {
+      validateStyleObject(_value, logInvalid, deleteInvalid);
     }
@@ -68,0 +82,0 @@ }

lib/index.js

@@ -10,5 +10,3 @@ 'use strict';
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-/* eslint-disable no-console */
 
-
 exports.default = validator;
@@ -18,2 +16,10 @@
 
+var _cssifyDeclaration = require('css-in-js-utils/lib/cssifyDeclaration');
+
+var _cssifyDeclaration2 = _interopRequireDefault(_cssifyDeclaration);
+
+var _csslint = require('csslint');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function isPlainObject(obj) {
@@ -23,21 +29,42 @@ return (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && !Array.isArray(obj);
 
+function handleError(property, style, logInvalid, deleteInvalid, message, logObject) {
+  if (deleteInvalid) {
+    delete style[property];
+  }
+  if (logInvalid) {
+    /* eslint-disable-next-line no-console */
+    console.error('' + (deleteInvalid ? '[Deleted] ' : ' ') + message, logObject);
+  }
+}
+
 function validateStyleObject(style, logInvalid, deleteInvalid) {
-  for (var property in style) {
+  var _loop = function _loop(property) {
     var value = style[property];
 
     if (isPlainObject(value)) {
-      if ((0, _felaUtils.isNestedSelector)(property) || (0, _felaUtils.isMediaQuery)(property)) {
+      if ((0, _felaUtils.isNestedSelector)(property) || (0, _felaUtils.isMediaQuery)(property) || (0, _felaUtils.isSupport)(property)) {
         validateStyleObject(value, logInvalid, deleteInvalid);
       } else {
-        if (deleteInvalid) {
-          delete style[property];
-        }
-        if (logInvalid) {
-          console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid nested property. Only use nested media queries, pseudo classes, child selectors or &-combinators.\n              Maybe you forgot to add a plugin that resolves "' + property + '".', {
-            property: property,
-            value: value
-          });
-        }
+        handleError(property, style, logInvalid, deleteInvalid, 'Invalid nested property. Only use nested media queries, pseudo classes, child selectors or &-combinators.\n          Maybe you forgot to add a plugin that resolves "' + property + '".', {
+          property: property,
+          value: value
+        });
       }
+    } else {
+      var _CSSLint$verify = _csslint.CSSLint.verify('.fela {' + (0, _cssifyDeclaration2.default)(property, value) + ';}'),
+          messages = _CSSLint$verify.messages;
+
+      messages.forEach(function (_ref) {
+        var message = _ref.message;
+
+        handleError(property, style, logInvalid, deleteInvalid, 'Invalid property "' + property + '" with value "' + value + '". ' + message.replace(/ at line .+, col .+\./, '.'), {
+          property: property,
+          value: value
+        });
+      });
     }
+  };
+
+  for (var property in style) {
+    _loop(property);
   }
@@ -54,24 +81,16 @@ }
   for (var percentage in style) {
-    var value = style[percentage];
-    if (!isPlainObject(value)) {
-      if (logInvalid) {
-        console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe value. An object was expected.', {
-          percentage: percentage,
-          style: value
-        });
-      }
-      if (deleteInvalid) {
-        delete style[percentage];
-      }
+    var _value = style[percentage];
+    if (!isPlainObject(_value)) {
+      handleError(percentage, style, logInvalid, deleteInvalid, 'Invalid keyframe value. An object was expected.', {
+        percentage: percentage,
+        style: _value
+      });
       // check for invalid percentage values, it only allows from, to or 0% - 100%
     } else if (percentage !== 'from' && percentage !== 'to' && !isValidPercentage(percentage)) {
-      if (logInvalid) {
-        console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe property.\n              Expected either `to`, `from` or a percentage value between 0 and 100.', {
-          percentage: percentage,
-          style: value
-        });
-      }
-      if (deleteInvalid) {
-        delete style[percentage];
-      }
+      handleError(percentage, style, logInvalid, deleteInvalid, 'Invalid keyframe property.\n        Expected either `to`, `from` or a percentage value between 0 and 100.', {
+        percentage: percentage,
+        style: _value
+      });
+    } else {
+      validateStyleObject(_value, logInvalid, deleteInvalid);
     }
@@ -78,0 +97,0 @@ }

package.json

 {
   "name": "fela-plugin-validator",
-  "version": "5.0.17",
+  "version": "5.1.0",
   "description": "Fela plugin to validate style objects",
@@ -25,4 +25,6 @@ "main": "lib/index.js",
   "dependencies": {
-    "fela-utils": "^8.0.3"
+    "css-in-js-utils": "^2.0.0",
+    "csslint": "^1.0.5",
+    "fela-utils": "^8.0.4"
   }
 }

README.md

@@ -6,3 +6,3 @@ # fela-plugin-validator
 Enforces object validation for keyframes and rules.
-Logs invalid properties to the `console`. One might also enable automatic property deletion.
+Logs invalid properties to the `console`. A [csslint](https://github.com/CSSLint/csslint) is used to check the CSS. One might also enable automatic property deletion.
 
@@ -9,0 +9,0 @@ ## Installation

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12633

increased by16.24%

Lines of code

181

increased by13.84%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedcss-in-js-utils@^2.0.0

• + Addedcsslint@^1.0.5

• + Addedclone@2.1.2(transitive)

• + Addedcss-in-js-utils@2.0.1(transitive)

• + Addedcsslint@1.0.5(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedparserlib@1.1.1(transitive)

• Updatedfela-utils@^8.0.4