Fix parser functions

* TYPES values ​​have been changed to allow bitwise operations.
* Fixed valueType() function.
* Other parser functions have been modified to match the changes to the valueType() function.

Author: asamuzaK

lib/parsers.js

@@ -8,32 +8,27 @@ const { resolve: resolveColor, utils } = require('@asamuzakjp/css-color');
 const { cssCalc, isColor, isGradient, splitValue } = utils;
 
 exports.TYPES = {
-  INTEGER: 1,
-  NUMBER: 2,
-  LENGTH: 3,
-  PERCENT: 4,
-  URL: 5,
-  COLOR: 6,
-  STRING: 7,
-  ANGLE: 8,
-  KEYWORD: 9,
-  NULL_OR_EMPTY_STR: 10,
-  CALC: 11,
-  VAR: 12,
-  GRADIENT: 13,
+  UNDEFINED: 0,
+  NULL_OR_EMPTY_STR: 1,
+  VAR: 2,
+  NUMBER: 4,
+  PERCENT: 8,
+  LENGTH: 0x10,
+  ANGLE: 0x20,
+  CALC: 0x40,
+  COLOR: 0x80,
+  STRING: 0x100,
+  KEYWORD: 0x200,
+  UNIDENT: 0x8000,
 };
 
 // regular expressions
 var DIGIT = '(?:0|[1-9]\\d*)';
 var NUMBER = `[+-]?(?:${DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${DIGIT})?`;
-var integerRegEx = new RegExp(`^[+-]?${DIGIT}$`);
-var numberRegEx = new RegExp(`^${NUMBER}$`);
-var lengthRegEx = new RegExp(
-  `^${NUMBER}(?:[cm]m|[dls]?v(?:[bhiw]|max|min)|in|p[ctx]|q|r?(?:[cl]h|cap|e[mx]|ic))$`
-);
-var percentRegEx = new RegExp(`^${NUMBER}%$`);
+var unitRegEx = new RegExp(`^(${NUMBER})([a-z]+|%)?$`);
 var angleRegEx = new RegExp(`^${NUMBER}(?:deg|g?rad|turn)$`);
 var urlRegEx = /^url\(\s*((?:[^)]|\\\))*)\s*\)$/;
+var keywordRegEx = /^[a-z]+(?:\-[a-z]+)*$/i;
 var stringRegEx = /^("[^"]*"|'[^']*')$/;
 var varRegEx = /^var\(|(?<=[*/\s(])var\(/;
 var calcRegEx =
@@ -48,46 +43,55 @@ exports.valueType = function valueType(val) {
     val = val.toString();
   }
   if (typeof val !== 'string') {
-    return undefined;
-  }
-  if (integerRegEx.test(val)) {
-    return exports.TYPES.INTEGER;
-  }
-  if (numberRegEx.test(val)) {
-    return exports.TYPES.NUMBER;
-  }
-  if (lengthRegEx.test(val)) {
-    return exports.TYPES.LENGTH;
-  }
-  if (percentRegEx.test(val)) {
-    return exports.TYPES.PERCENT;
-  }
-  if (val.startsWith('url(') && val.endsWith(')')) {
-    if (urlRegEx.test(val)) {
-      return exports.TYPES.URL;
-    }
-    return undefined;
+    return exports.TYPES.UNDEFINED;
   }
   if (varRegEx.test(val)) {
     return exports.TYPES.VAR;
   }
   if (calcRegEx.test(val)) {
     return exports.TYPES.CALC;
   }
-  if (stringRegEx.test(val)) {
-    return exports.TYPES.STRING;
-  }
-  if (angleRegEx.test(val)) {
-    return exports.TYPES.ANGLE;
+  if (unitRegEx.test(val)) {
+    const [, , unit] = unitRegEx.exec(val);
+    if (!unit) {
+      return exports.TYPES.NUMBER;
+    }
+    if (unit === '%') {
+      return exports.TYPES.PERCENT;
+    }
+    if (/^(?:[cm]m|[dls]?v(?:[bhiw]|max|min)|in|p[ctx]|q|r?(?:[cl]h|cap|e[mx]|ic))$/.test(unit)) {
+      return exports.TYPES.LENGTH;
+    }
+    if (/^(?:deg|g?rad|turn)$/.test(unit)) {
+      return exports.TYPES.ANGLE;
+    }
   }
   if (isColor(val)) {
     return exports.TYPES.COLOR;
   }
-  if (isGradient(val)) {
-    return exports.TYPES.GRADIENT;
+  if (stringRegEx.test(val)) {
+    return exports.TYPES.STRING;
   }
 
   switch (val.toLowerCase()) {
+    // system color keywords
+    case 'accentcolor':
+    case 'accentcolortext':
+    case 'activetext':
+    case 'buttonborder':
+    case 'buttonface':
+    case 'buttontext':
+    case 'canvas':
+    case 'canvastext':
+    case 'field':
+    case 'fieldtext':
+    case 'graytext':
+    case 'highlight':
+    case 'highlighttext':
+    case 'linktext':
+    case 'mark':
+    case 'marktext':
+    case 'visitedtext':
     // the following are deprecated in CSS3
     case 'activeborder':
     case 'activecaption':
@@ -119,87 +123,97 @@ exports.valueType = function valueType(val) {
     case 'windowtext':
       return exports.TYPES.COLOR;
     default:
-      return exports.TYPES.KEYWORD;
-  }
-};
-
-exports.parseInteger = function parseInteger(val) {
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
-  }
-  if (type !== exports.TYPES.INTEGER) {
-    return undefined;
+      if (keywordRegEx.test(val)) {
+        return exports.TYPES.KEYWORD;
+      }
+      return exports.TYPES.UNIDENT;
   }
-  return String(parseInt(val, 10));
 };
 
 exports.parseNumber = function parseNumber(val) {
   var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
-  }
-  if (type !== exports.TYPES.NUMBER && type !== exports.TYPES.INTEGER) {
-    return undefined;
+  switch (type) {
+    case exports.TYPES.NULL_OR_EMPTY_STR:
+    case exports.TYPES.VAR:
+      return val;
+    case exports.TYPES.NUMBER:
+      return `${parseFloat(val)}`;
+    default:
+      return undefined;
   }
-  return String(parseFloat(val));
 };
 
 exports.parseLength = function parseLength(val) {
-  if (val === 0 || val === '0') {
-    return '0px';
-  }
   var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
-  }
-  if (type !== exports.TYPES.LENGTH) {
-    return undefined;
+  switch (type) {
+    case exports.TYPES.NULL_OR_EMPTY_STR:
+    case exports.TYPES.VAR:
+      return val;
+    case exports.TYPES.CALC:
+      return cssCalc(val, {
+        format: 'specifiedValue',
+      });
+    case exports.TYPES.LENGTH: {
+      const [, numVal, unit] = unitRegEx.exec(val);
+      return `${parseFloat(numVal)}${unit}`;
+    }
+    default:
+      if (type === exports.TYPES.NUMBER && parseFloat(val) === 0) {
+        return '0px';
+      }
+      return undefined;
   }
-  return val;
 };
 
 exports.parsePercent = function parsePercent(val) {
-  if (val === 0 || val === '0') {
-    return '0%';
-  }
   var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
-  }
-  if (type !== exports.TYPES.PERCENT) {
-    return undefined;
+  switch (type) {
+    case exports.TYPES.NULL_OR_EMPTY_STR:
+    case exports.TYPES.VAR:
+      return val;
+    case exports.TYPES.CALC:
+      return cssCalc(val, {
+        format: 'specifiedValue',
+      });
+    case exports.TYPES.PERCENT:
+      const [, numVal, unit] = unitRegEx.exec(val);
+      return `${parseFloat(numVal)}${unit}`;
+    default:
+      if (type === exports.TYPES.NUMBER && parseFloat(val) === 0) {
+        return '0%';
+      }
+      return undefined;
   }
-  return val;
 };
 
 // either a length or a percent
 exports.parseMeasurement = function parseMeasurement(val) {
   var type = exports.valueType(val);
-  if (type === exports.TYPES.VAR) {
-    return val;
-  }
-  if (type === exports.TYPES.CALC) {
-    return cssCalc(val, {
-      format: 'specifiedValue',
-    });
-  }
-
-  var length = exports.parseLength(val);
-  if (length !== undefined) {
-    return length;
+  switch (type) {
+    case exports.TYPES.NULL_OR_EMPTY_STR:
+    case exports.TYPES.VAR:
+      return val;
+    case exports.TYPES.CALC:
+      return cssCalc(val, {
+        format: 'specifiedValue',
+      });
+    case exports.TYPES.LENGTH:
+    case exports.TYPES.PERCENT:
+      const [, numVal, unit] = unitRegEx.exec(val);
+      return `${parseFloat(numVal)}${unit}`;
+    default:
+      if (type === exports.TYPES.NUMBER && parseFloat(val) === 0) {
+        return '0px';
+      }
+      return undefined;
   }
-  return exports.parsePercent(val);
 };
 
-exports.parseInheritingMeasurement = function parseInheritingMeasurement(v) {
-  if (String(v).toLowerCase() === 'auto') {
-    return 'auto';
-  }
-  if (String(v).toLowerCase() === 'inherit') {
-    return 'inherit';
+exports.parseInheritingMeasurement = function parseInheritingMeasurement(val) {
+  if (/^(?:auto|inherit)$/i.test(val)) {
+    return val.toLowerCase();
   }
-  return exports.parseMeasurement(v);
+  return exports.parseMeasurement(val);
 };
 
 exports.parseUrl = function parseUrl(val) {
@@ -291,9 +305,12 @@ exports.parseString = function parseString(val) {
 
 exports.parseColor = function parseColor(val) {
   var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
+  if (type & (exports.TYPES.NULL_OR_EMPTY_STR | exports.TYPES.VAR)) {
     return val;
   }
+  if (type === exports.TYPES.UNDEFINED) {
+    return undefined;
+  }
   if (/^[a-z]+$/i.test(val) && type === exports.TYPES.COLOR) {
     return val;
   }
@@ -306,6 +323,9 @@ exports.parseColor = function parseColor(val) {
   return undefined;
 };
 
+// FIXME:
+// This function seems to be incorrect.
+// However, this has no impact so far, as this function is only used by the deprecated `azimuth` property.
 exports.parseAngle = function parseAngle(val) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
@@ -331,7 +351,7 @@ exports.parseAngle = function parseAngle(val) {
   return flt + 'deg';
 };
 
-exports.parseKeyword = function parseKeyword(val, valid_keywords) {
+exports.parseKeyword = function parseKeyword(val, validKeywords) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
     return val;
@@ -341,36 +361,38 @@ exports.parseKeyword = function parseKeyword(val, valid_keywords) {
   }
   val = val.toString().toLowerCase();
   var i;
-  for (i = 0; i < valid_keywords.length; i++) {
-    if (valid_keywords[i].toLowerCase() === val) {
-      return valid_keywords[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;
+    return val.toLowerCase();
   }
   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 | exports.TYPES.VAR)) {
     return val;
   }
+  if (type === exports.TYPES.UNDEFINED) {
+    return undefined;
+  }
   var values = splitValue(val, ',');
   var isImage = !!values.length;
   var i;
   for (i = 0; i < values.length; i++) {
     var image = values[i];
-    var t = exports.valueType(image);
-    if (t === exports.TYPES.NULL_OR_EMPTY_STR) {
+    if (exports.valueType(image) === exports.TYPES.NULL_OR_EMPTY_STR) {
       return image;
     }
-    if (t === exports.TYPES.GRADIENT || /^(?:none|inherit)$/i.test(image)) {
+    if (isGradient(image) || /^(?:none|inherit)$/i.test(image)) {
       continue;
     }
     var imageUrl = exports.parseUrl(image);
-    if (exports.valueType(imageUrl) === exports.TYPES.URL) {
+    if (imageUrl) {
       values[i] = imageUrl;
     } else {
       isImage = false;

lib/properties/backgroundPosition.js

@@ -13,27 +13,26 @@ var parse = function parse(v) {
     return undefined;
   }
   var types = [];
+  var typeLengthOrPercent = parsers.TYPES.LENGTH | parsers.TYPES.PERCENT;
+  var typeKeyword = parsers.TYPES.KEYWORD;
   parts.forEach(function (part, index) {
     types[index] = parsers.valueType(part);
   });
   if (parts.length === 1) {
-    if (types[0] === parsers.TYPES.LENGTH || types[0] === parsers.TYPES.PERCENT) {
+    if (types[0] & typeLengthOrPercent) {
       return v;
     }
-    if (types[0] === parsers.TYPES.KEYWORD) {
+    if (types[0] === typeKeyword) {
       if (valid_keywords.indexOf(v.toLowerCase()) !== -1 || v.toLowerCase() === 'inherit') {
         return v;
       }
     }
     return undefined;
   }
-  if (
-    (types[0] === parsers.TYPES.LENGTH || types[0] === parsers.TYPES.PERCENT) &&
-    (types[1] === parsers.TYPES.LENGTH || types[1] === parsers.TYPES.PERCENT)
-  ) {
+  if (types[0] & typeLengthOrPercent && types[1] & typeLengthOrPercent) {
     return v;
   }
-  if (types[0] !== parsers.TYPES.KEYWORD || types[1] !== parsers.TYPES.KEYWORD) {
+  if (types[0] !== typeKeyword || types[1] !== typeKeyword) {
     return undefined;
   }
   if (valid_keywords.indexOf(parts[0]) !== -1 && valid_keywords.indexOf(parts[1]) !== -1) {