Update parser

* add global values
* scope variables
* fix some functions

Author: asamuzaK

lib/parsers.js

@@ -22,6 +22,9 @@ exports.TYPES = {
   UNIDENT: 0x8000,
 };
 
+// CSS global values
+exports.GLOBAL_VALUES = Object.freeze(['initial', 'inherit', 'unset', 'revert', 'revert-layer']);
+
 // regular expressions
 var DIGIT = '(?:0|[1-9]\\d*)';
 var NUMBER = `[+-]?(?:${DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${DIGIT})?`;
@@ -37,6 +40,7 @@ var calcRegEx =
 
 // This will return one of the above types based on the passed in string
 exports.valueType = function valueType(val) {
+  // see https://webidl.spec.whatwg.org/#LegacyNullToEmptyString
   if (val === '' || val === null) {
     return exports.TYPES.NULL_OR_EMPTY_STR;
   }
@@ -53,7 +57,7 @@ exports.valueType = function valueType(val) {
     return exports.TYPES.CALC;
   }
   if (unitRegEx.test(val)) {
-    const [, , unit] = unitRegEx.exec(val);
+    var [, , unit] = unitRegEx.exec(val);
     if (!unit) {
       return exports.TYPES.NUMBER;
     }
@@ -162,7 +166,7 @@ exports.parseLength = function parseLength(val) {
         format: 'specifiedValue',
       });
     case exports.TYPES.LENGTH: {
-      const [, numVal, unit] = unitRegEx.exec(val);
+      var [, numVal, unit] = unitRegEx.exec(val);
       return `${parseFloat(numVal)}${unit}`;
     }
     default:
@@ -186,9 +190,10 @@ exports.parsePercent = function parsePercent(val) {
       return cssCalc(val, {
         format: 'specifiedValue',
       });
-    case exports.TYPES.PERCENT:
-      const [, numVal, unit] = unitRegEx.exec(val);
+    case exports.TYPES.PERCENT: {
+      var [, numVal, unit] = unitRegEx.exec(val);
       return `${parseFloat(numVal)}${unit}`;
+    }
     default:
       if (varContainedRegEx.test(val)) {
         return val;
@@ -212,9 +217,10 @@ exports.parseMeasurement = function parseMeasurement(val) {
         format: 'specifiedValue',
       });
     case exports.TYPES.LENGTH:
-    case exports.TYPES.PERCENT:
-      const [, numVal, unit] = unitRegEx.exec(val);
+    case exports.TYPES.PERCENT: {
+      var [, numVal, unit] = unitRegEx.exec(val);
       return `${parseFloat(numVal)}${unit}`;
+    }
     default:
       if (varContainedRegEx.test(val)) {
         return val;
@@ -236,7 +242,7 @@ exports.parseInheritingMeasurement = function parseInheritingMeasurement(val) {
 exports.parseUrl = function parseUrl(val) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
+    return '';
   }
   var res = urlRegEx.exec(val);
   // does it match the regex?
@@ -293,10 +299,11 @@ exports.parseUrl = function parseUrl(val) {
   return 'url("' + urlstr + '")';
 };
 
+// NOTE: seems not in use?
 exports.parseString = function parseString(val) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
+    return '';
   }
   if (type !== exports.TYPES.STRING) {
     return undefined;
@@ -320,14 +327,38 @@ exports.parseString = function parseString(val) {
   return val;
 };
 
-exports.parseColor = function parseColor(val) {
+exports.parseKeyword = function parseKeyword(val, validKeywords = []) {
   var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR || type === exports.TYPES.VAR) {
+  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
+    return '';
+  }
+  if (type === exports.TYPES.VAR) {
+    return val;
+  }
+  if (type !== exports.TYPES.KEYWORD) {
+    return undefined;
+  }
+  val = val.toString().toLowerCase();
+  if (validKeywords.includes(val) || exports.GLOBAL_VALUES.includes(val)) {
     return val;
   }
+  return undefined;
+};
+
+exports.parseColor = function parseColor(val) {
+  var type = exports.valueType(val);
+  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
+    return '';
+  }
   if (type === exports.TYPES.UNDEFINED) {
     return undefined;
   }
+  if (type === exports.TYPES.VAR) {
+    return val;
+  }
+  if (type === exports.TYPES.KEYWORD) {
+    return exports.parseKeyword(val);
+  }
   if (/^[a-z]+$/i.test(val) && type === exports.TYPES.COLOR) {
     return val;
   }
@@ -346,7 +377,7 @@ exports.parseColor = function parseColor(val) {
 exports.parseAngle = function parseAngle(val) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
+    return '';
   }
   if (type !== exports.TYPES.ANGLE) {
     return undefined;
@@ -368,34 +399,19 @@ exports.parseAngle = function parseAngle(val) {
   return flt + 'deg';
 };
 
-exports.parseKeyword = function parseKeyword(val, validKeywords) {
+exports.parseImage = function parseImage(val) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
+    return '';
   }
-  if (type !== exports.TYPES.KEYWORD) {
+  if (type === exports.TYPES.UNDEFINED) {
     return undefined;
   }
-  val = val.toString().toLowerCase();
-  var i;
-  for (i = 0; i < validKeywords.length; i++) {
-    if (validKeywords[i].toLowerCase() === val) {
-      return validKeywords[i];
-    }
-  }
-  return undefined;
-};
-
-exports.parseImage = function parseImage(val) {
-  if (/^(?:none|inherit)$/i.test(val)) {
-    return val.toLowerCase();
-  }
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR || type === exports.TYPES.VAR) {
+  if (type === exports.TYPES.VAR) {
     return val;
   }
-  if (type === exports.TYPES.UNDEFINED) {
-    return undefined;
+  if (type === exports.TYPES.KEYWORD) {
+    return exports.parseKeyword(val, ['none']);
   }
   var values = splitValue(val, {
     delimiter: ',',
@@ -445,11 +461,11 @@ exports.dashedToCamelCase = function (dashed) {
   return camel;
 };
 
-var isSpace = /\s/;
-var openingDeliminators = ['"', "'", '('];
-var closingDeliminators = ['"', "'", ')'];
 // this splits on whitespace, but keeps quoted and parened parts together
 var getParts = function (str) {
+  var isSpace = /\s/;
+  var openingDeliminators = ['"', "'", '('];
+  var closingDeliminators = ['"', "'", ')'];
   var deliminatorStack = [];
   var length = str.length;
   var i;
@@ -489,12 +505,12 @@ var getParts = function (str) {
   return parts;
 };
 
-/*
- * this either returns undefined meaning that it isn't valid
- * or returns an object where the keys are dashed short
- * hand properties and the values are the values to set
- * on them
- */
+// this either returns undefined meaning that it isn't valid
+// or returns an object where the keys are dashed short
+// hand properties and the values are the values to set
+// on them
+// FIXME: need additional argument which indicates syntax
+// and/or use Map() for shorthandFor to ensure order of the longhand properties
 exports.shorthandParser = function parse(v, shorthandFor) {
   var obj = {};
   var type = exports.valueType(v);
@@ -504,19 +520,19 @@ exports.shorthandParser = function parse(v, shorthandFor) {
     });
     return obj;
   }
-
+  if (type === exports.TYPES.UNDEFINED) {
+    return undefined;
+  }
   if (typeof v === 'number') {
     v = v.toString();
   }
-
   if (typeof v !== 'string') {
     return undefined;
   }
-
   if (v.toLowerCase() === 'inherit') {
     return {};
   }
-  var parts = getParts(v);
+  var parts = splitValue(v);
   var valid = true;
   parts.forEach(function (part, i) {
     var partValid = false;
@@ -526,21 +542,29 @@ exports.shorthandParser = function parse(v, shorthandFor) {
         obj[property] = part;
       }
     });
-    valid = valid && partValid;
+    if (valid) {
+      valid = partValid;
+    }
   });
   if (!valid) {
     return undefined;
   }
   return obj;
 };
 
+// FIXME: check against shorthandParser and reduce Object.keys().forEach() loops
 exports.shorthandSetter = function (property, shorthandFor) {
   return function (v) {
+    if (v === undefined) {
+      return;
+    }
+    if (v === null) {
+      v = '';
+    }
     var obj = exports.shorthandParser(v, shorthandFor);
     if (obj === undefined) {
       return;
     }
-    //console.log('shorthandSetter for:', property, 'obj:', obj);
     Object.keys(obj).forEach(function (subprop) {
       // in case subprop is an implicit property, this will clear
       // *its* subpropertiesX
@@ -572,6 +596,7 @@ exports.shorthandSetter = function (property, shorthandFor) {
   };
 };
 
+// FIXME: move shorthandGetter() and shorthandSetter to CSSStyleDeclaration()
 exports.shorthandGetter = function (property, shorthandFor) {
   return function () {
     if (this._values[property] !== undefined) {
@@ -646,12 +671,10 @@ exports.implicitSetter = function (propertyBefore, propertyAfter, isValid, parse
   };
 };
 
-//
 //  Companion to implicitSetter, but for the individual parts.
 //  This sets the individual value, and checks to see if all four
 //  sub-parts are set.  If so, it sets the shorthand version and removes
 //  the individual parts from the cssText.
-//
 exports.subImplicitSetter = function (prefix, part, isValid, parser) {
   var property = prefix + '-' + part;
   var subparts = [prefix + '-top', prefix + '-right', prefix + '-bottom', prefix + '-left'];
@@ -698,12 +721,12 @@ exports.subImplicitSetter = function (prefix, part, isValid, parser) {
   };
 };
 
-var camelToDashed = /[A-Z]/g;
-var firstSegment = /^\([^-]\)-/;
-var vendorPrefixes = ['o', 'moz', 'ms', 'webkit'];
 exports.camelToDashed = function (camelCase) {
+  var upperCase = /[A-Z]/g;
+  var firstSegment = /^\([^-]\)-/;
+  var vendorPrefixes = ['o', 'moz', 'ms', 'webkit'];
   var match;
-  var dashed = camelCase.replace(camelToDashed, '-$&').toLowerCase();
+  var dashed = camelCase.replace(upperCase, '-$&').toLowerCase();
   match = dashed.match(firstSegment);
   if (match && vendorPrefixes.indexOf(match[1]) !== -1) {
     dashed = '-' + dashed;