fela-plugin-validator - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/fela-plugin-validator.js

@@ -30,24 +30,61 @@ (function (global, factory) {
 
-  function validator(style, options) {
-    var logInvalid = options.logInvalid;
-    var deleteInvalid = options.deleteInvalid;
-
-
+  function validateStyleObject(style, logInvalid, deleteInvalid) {
     Object.keys(style).forEach(function (property) {
       var value = style[property];
-      if (value === undefined || typeof value === 'string' && value.indexOf('undefined') > -1) {
-        if (deleteInvalid) {
-          delete style[property];
+      if (value instanceof Object && !Array.isArray(value)) {
+        if (property.indexOf(':') === 0 || property.substr(0, 6) === '@media') {
+          validateStyleObject(value, logInvalid, deleteInvalid);
+        } else {
+          if (deleteInvalid) {
+            delete style[property];
+          }
+          if (logInvalid) {
+            console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid nested property. Only use nested `@media` queries or `:` pseudo classes. Maybe you forgot to add a plugin that resolves `' + property + '`.', { // eslint-disable-line
+              property: property,
+              value: value
+            });
+          }
         }
-        if (logInvalid) {
-          console.log((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid Property', { // eslint-disable-line
-            property: property,
-            value: value
-          });
-        }
-      } else if (value instanceof Object && !Array.isArray(value)) {
-        style[property] = validator(value, options);
       }
     });
+  }
 
+  function validator(style, meta, options) {
+    var logInvalid = options.logInvalid;
+    var deleteInvalid = options.deleteInvalid;
+
+
+    if (meta.type === 'keyframe') {
+      Object.keys(style).forEach(function (percentage) {
+        var percentageValue = parseFloat(percentage);
+        var value = style[percentage];
+        if (value instanceof Object === false) {
+          if (logInvalid) {
+            console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe value. An object was expected.', { // eslint-disable-line
+              percentage: percentage,
+              style: value
+            });
+          }
+          if (deleteInvalid) {
+            delete style[percentage];
+          }
+        } else {
+          // check for invalid percentage values, it only allows from, to or 0% - 100%
+          if (!percentage.match(/from|to|%/) || percentage.indexOf('%') > -1 && (percentageValue < 0 || percentageValue > 100)) {
+            if (logInvalid) {
+              console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe property. Expected either `to`, `from` or a percentage value between 0 and 100.', { // eslint-disable-line
+                percentage: percentage,
+                style: value
+              });
+            }
+            if (deleteInvalid) {
+              delete style[percentage];
+            }
+          }
+        }
+      });
+    } else if (meta.type === 'rule') {
+      validateStyleObject(style, logInvalid, deleteInvalid);
+    }
+
     return style;
@@ -58,4 +95,4 @@ }
   var validator$1 = (function (options) {
-    return function (style) {
-      return validator(style, babelHelpers.extends({}, defaultOptions, options));
+    return function (style, meta) {
+      return validator(style, meta, babelHelpers.extends({}, defaultOptions, options));
     };
@@ -62,0 +99,0 @@ });

dist/fela-plugin-validator.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.FelaPluginValidator=t()}(this,function(){"use strict";function e(t,n){var o=n.logInvalid,r=n.deleteInvalid;return Object.keys(t).forEach(function(i){var f=t[i];void 0===f||"string"==typeof f&&f.indexOf("undefined")>-1?(r&&delete t[i],o&&console.log((r?"[Deleted] ":" ")+"Invalid Property",{property:i,value:f})):f instanceof Object&&!Array.isArray(f)&&(t[i]=e(f,n))}),t}var t={};t["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},t["extends"]=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};var n={logInvalid:!0,deleteInvalid:!1},o=function(o){return function(r){return e(r,t["extends"]({},n,o))}};return o});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.FelaPluginValidator=t()}(this,function(){"use strict";function e(t,o,n){Object.keys(t).forEach(function(r){var a=t[r];a instanceof Object&&!Array.isArray(a)&&(0===r.indexOf(":")||"@media"===r.substr(0,6)?e(a,o,n):(n&&delete t[r],o&&console.error((n?"[Deleted] ":" ")+"Invalid nested property. Only use nested `@media` queries or `:` pseudo classes. Maybe you forgot to add a plugin that resolves `"+r+"`.",{property:r,value:a})))})}function t(t,o,n){var r=n.logInvalid,a=n.deleteInvalid;return"keyframe"===o.type?Object.keys(t).forEach(function(e){var o=parseFloat(e),n=t[e];n instanceof Object==!1?(r&&console.error((a?"[Deleted] ":" ")+"Invalid keyframe value. An object was expected.",{percentage:e,style:n}),a&&delete t[e]):(!e.match(/from|to|%/)||e.indexOf("%")>-1&&(o<0||o>100))&&(r&&console.error((a?"[Deleted] ":" ")+"Invalid keyframe property. Expected either `to`, `from` or a percentage value between 0 and 100.",{percentage:e,style:n}),a&&delete t[e])}):"rule"===o.type&&e(t,r,a),t}var o={};o.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},o.extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e};var n={logInvalid:!0,deleteInvalid:!1},r=function(e){return function(r,a){return t(r,a,o.extends({},n,e))}};return r});

package.json

 {
   "name": "fela-plugin-validator",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Fela plugin to validate style objects",
@@ -22,5 +22,5 @@ "main": "index.js",
   "license": "MIT",
-  "peerDependecies": {
-    "fela": "1.0.2"
+  "peerDependencies": {
+    "fela": "1.1.0"
   }
 }

README.md

@@ -5,4 +5,5 @@ # fela-plugin-validator
 <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-plugin-validator.svg">
-<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-0.57kb-brightgreen.svg">
+<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-0.80kb-brightgreen.svg">
 
+Enforces object validation for keyframes and rules.
 Logs invalid properties to the `console`. One might also enable automatic property deletion.
@@ -18,5 +19,5 @@
 <!-- Fela (Development): Unminified version including all warnings -->
-<script src="https://npmcdn.com/fela-plugin-validator@1.0.2/dist/fela-plugin-validator.js"></script>
+<script src="https://npmcdn.com/fela-plugin-validator@1.1.0/dist/fela-plugin-validator.js"></script>
 <!-- Fela (Production): Minified version -->
-<script src="https://npmcdn.com/fela-plugin-validator@1.0.2/dist/fela-plugin-validator.min.js"></script>
+<script src="https://npmcdn.com/fela-plugin-validator@1.1.0/dist/fela-plugin-validator.min.js"></script>
 ```
@@ -27,8 +28,38 @@
 
+### Keyframe
 #### Input
 ```javascript
 {
-  fontSize: undefined,
+  '0%': {
+    color: 'red'
+  },
+  '101%': {
+    color: 'blue'
+  },
+  color: 'blue'
+}
+```
+
+#### Output
+```javascript
+{
+  '0%': {
+    color: 'red'
+  }
+}
+```
+### Rule
+#### Input
+```javascript
+{
   color: 'red',
-  padding: '20px undefined 0px'
+  ':hover': {
+    color: 'green',
+    foo: {
+      color: 'blue'
+    }
+  },
+  'nested': {
+    color: 'yellow'
+  }
 }
@@ -40,6 +71,8 @@ ```
 {
-  color: 'red'
+  color: 'red',
+  ':hover': {
+    color: 'green',
+  }
 }
 ```
-
 ## Configuration
@@ -46,0 +79,0 @@ The validator plugin uses two different option flags to enable/disable features.

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

13834

increased by63.35%

Lines of code

89

increased by67.92%

Number of lines in readme file

95

increased by53.23%

Worsened metrics

Dependency count

1

increased byInfinity%

No dependency changes