Update parser

* add global values
* scope variables
* fix some functions

Author: asamuzaK

lib/parsers.js

@@ -4,6 +4,9 @@
  ********************************************************************/
 'use strict';
 
+// FIXME: should move shorthandGetter(), shorthandSetter(), implicitSetter() and
+// subImplicitSetter() to CSSStyleDeclaration()
+
 const { resolve: resolveColor, utils } = require('@asamuzakjp/css-color');
 const { cssCalc, isColor, isGradient, splitValue } = utils;
 
@@ -22,6 +25,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 +43,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 +60,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 +169,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 +193,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 +220,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 +245,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 +302,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 +330,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 +380,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 +402,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,56 +464,22 @@ 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 deliminatorStack = [];
-  var length = str.length;
-  var i;
-  var parts = [];
-  var currentPart = '';
-  var openingIndex;
-  var closingIndex;
-  for (i = 0; i < length; i++) {
-    openingIndex = openingDeliminators.indexOf(str[i]);
-    closingIndex = closingDeliminators.indexOf(str[i]);
-    if (isSpace.test(str[i])) {
-      if (deliminatorStack.length === 0) {
-        if (currentPart !== '') {
-          parts.push(currentPart);
-        }
-        currentPart = '';
-      } else {
-        currentPart += str[i];
-      }
-    } else {
-      if (str[i] === '\\') {
-        i++;
-        currentPart += str[i];
-      } else {
-        currentPart += str[i];
-        if (closingIndex !== -1 && closingIndex === deliminatorStack[deliminatorStack.length - 1]) {
-          deliminatorStack.pop();
-        } else if (openingIndex !== -1) {
-          deliminatorStack.push(openingIndex);
-        }
-      }
-    }
-  }
-  if (currentPart !== '') {
-    parts.push(currentPart);
+exports.camelToDashed = function (camelCase) {
+  var dashed = camelCase.replace(/(?<=[a-z])[A-Z]/g, '-$&').toLowerCase();
+  var vendorPrefixes = ['o', 'moz', 'ms', 'webkit'];
+  var match = dashed.match(/^([a-z]+)\-/);
+  if (match && vendorPrefixes.includes(match[1])) {
+    dashed = '-' + dashed;
   }
-  return parts;
+  return dashed;
 };
 
-/*
- * 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 +489,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 +511,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
@@ -611,7 +604,7 @@ exports.implicitSetter = function (propertyBefore, propertyAfter, isValid, parse
     if (v.toLowerCase() === 'inherit' || v === '') {
       parts = [v];
     } else {
-      parts = getParts(v);
+      parts = splitValue(v);
     }
     if (parts.length < 1 || parts.length > 4) {
       return undefined;
@@ -646,12 +639,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'];
@@ -697,16 +688,3 @@ exports.subImplicitSetter = function (prefix, part, isValid, parser) {
     return v;
   };
 };
-
-var camelToDashed = /[A-Z]/g;
-var firstSegment = /^\([^-]\)-/;
-var vendorPrefixes = ['o', 'moz', 'ms', 'webkit'];
-exports.camelToDashed = function (camelCase) {
-  var match;
-  var dashed = camelCase.replace(camelToDashed, '-$&').toLowerCase();
-  match = dashed.match(firstSegment);
-  if (match && vendorPrefixes.indexOf(match[1]) !== -1) {
-    dashed = '-' + dashed;
-  }
-  return dashed;
-};