cssstyle 4.3.0 → 4.4.0

package/lib/parsers.js

@@ -1,352 +1,446 @@
-/*********************************************************************
- * These are commonly used parsers for CSS Values they take a string *
- * to parse and return a string after it's been converted, if needed *
- ********************************************************************/
-'use strict';
+/**
+ * These are commonly used parsers for CSS Values they take a string to parse
+ * and return a string after it's been converted, if needed
+ */
+"use strict";
+
+const { resolve: resolveColor, utils } = require("@asamuzakjp/css-color");
 
-const { resolve: resolveColor, utils } = require('@asamuzakjp/css-color');
 const { cssCalc, isColor, isGradient, splitValue } = utils;
 
-exports.TYPES = {
-  INTEGER: 1,
+// CSS global values
+// @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
+const GLOBAL_VALUE = Object.freeze(["initial", "inherit", "unset", "revert", "revert-layer"]);
+
+// Numeric data types
+const NUM_TYPE = Object.freeze({
+  UNDEFINED: 0,
+  VAR: 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,
-};
-
-// 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 angleRegEx = new RegExp(`^${NUMBER}(?:deg|g?rad|turn)$`);
-var urlRegEx = /^url\(\s*([^)]*)\s*\)$/;
-var stringRegEx = /^("[^"]*"|'[^']*')$/;
-var varRegEx = /^var\(|(?<=[*/\s(])var\(/;
-var calcRegEx =
+  LENGTH: 8,
+  ANGLE: 0x10,
+  CALC: 0x20
+});
+
+// System colors
+const SYS_COLOR = Object.freeze([
+  "accentcolor",
+  "accentcolortext",
+  "activetext",
+  "buttonborder",
+  "buttonface",
+  "buttontext",
+  "canvas",
+  "canvastext",
+  "field",
+  "fieldtext",
+  "graytext",
+  "highlight",
+  "highlighttext",
+  "linktext",
+  "mark",
+  "marktext",
+  "visitedtext",
+  "activeborder",
+  "activecaption",
+  "appworkspace",
+  "background",
+  "buttonhighlight",
+  "buttonshadow",
+  "captiontext",
+  "inactiveborder",
+  "inactivecaption",
+  "inactivecaptiontext",
+  "infobackground",
+  "infotext",
+  "menu",
+  "menutext",
+  "scrollbar",
+  "threeddarkshadow",
+  "threedface",
+  "threedhighlight",
+  "threedlightshadow",
+  "threedshadow",
+  "window",
+  "windowframe",
+  "windowtext"
+]);
+
+// Regular expressions
+const DIGIT = "(?:0|[1-9]\\d*)";
+const NUMBER = `[+-]?(?:${DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${DIGIT})?`;
+const unitRegEx = new RegExp(`^(${NUMBER})([a-z]+|%)?$`, "i");
+const urlRegEx = /^url\(\s*((?:[^)]|\\\))*)\s*\)$/;
+const keywordRegEx = /^[a-z]+(?:-[a-z]+)*$/i;
+const stringRegEx = /^("[^"]*"|'[^']*')$/;
+const varRegEx = /^var\(/;
+const varContainedRegEx = /(?<=[*/\s(])var\(/;
+const calcRegEx =
   /^(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)\(/;
 
-// This will return one of the above types based on the passed in string
-exports.valueType = function valueType(val) {
-  if (val === '' || val === null) {
-    return exports.TYPES.NULL_OR_EMPTY_STR;
-  }
-  if (typeof val === 'number') {
-    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 (urlRegEx.test(val)) {
-    return exports.TYPES.URL;
-  }
+const getNumericType = function getNumericType(val) {
   if (varRegEx.test(val)) {
-    return exports.TYPES.VAR;
+    return NUM_TYPE.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 (isColor(val)) {
-    return exports.TYPES.COLOR;
-  }
-  if (isGradient(val)) {
-    return exports.TYPES.GRADIENT;
+    return NUM_TYPE.CALC;
   }
-
-  switch (val.toLowerCase()) {
-    // the following are deprecated in CSS3
-    case 'activeborder':
-    case 'activecaption':
-    case 'appworkspace':
-    case 'background':
-    case 'buttonface':
-    case 'buttonhighlight':
-    case 'buttonshadow':
-    case 'buttontext':
-    case 'captiontext':
-    case 'graytext':
-    case 'highlight':
-    case 'highlighttext':
-    case 'inactiveborder':
-    case 'inactivecaption':
-    case 'inactivecaptiontext':
-    case 'infobackground':
-    case 'infotext':
-    case 'menu':
-    case 'menutext':
-    case 'scrollbar':
-    case 'threeddarkshadow':
-    case 'threedface':
-    case 'threedhighlight':
-    case 'threedlightshadow':
-    case 'threedshadow':
-    case 'window':
-    case 'windowframe':
-    case 'windowtext':
-      return exports.TYPES.COLOR;
-    default:
-      return exports.TYPES.KEYWORD;
+  if (unitRegEx.test(val)) {
+    const [, , unit] = unitRegEx.exec(val);
+    if (!unit) {
+      return NUM_TYPE.NUMBER;
+    }
+    if (unit === "%") {
+      return NUM_TYPE.PERCENT;
+    }
+    if (/^(?:[cm]m|[dls]?v(?:[bhiw]|max|min)|in|p[ctx]|q|r?(?:[cl]h|cap|e[mx]|ic))$/i.test(unit)) {
+      return NUM_TYPE.LENGTH;
+    }
+    if (/^(?:deg|g?rad|turn)$/i.test(unit)) {
+      return NUM_TYPE.ANGLE;
+    }
   }
+  return NUM_TYPE.UNDEFINED;
 };
 
-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;
+// Prepare stringified value.
+exports.prepareValue = function prepareValue(value, globalObject = globalThis) {
+  // `null` is converted to an empty string.
+  // @see https://webidl.spec.whatwg.org/#LegacyNullToEmptyString
+  if (value === null) {
+    return "";
+  }
+  const type = typeof value;
+  switch (type) {
+    case "string":
+      return value.trim();
+    case "number":
+      return value.toString();
+    case "undefined":
+      return "undefined";
+    case "symbol":
+      throw new globalObject.TypeError("Can not convert symbol to string.");
+    default: {
+      const str = value.toString();
+      if (typeof str === "string") {
+        return str;
+      }
+      throw new globalObject.TypeError(`Can not convert ${type} to string.`);
+    }
   }
-  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;
-  }
-  return String(parseFloat(val));
+exports.hasVarFunc = function hasVarFunc(val) {
+  return varRegEx.test(val) || varContainedRegEx.test(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;
+exports.parseNumber = function parseNumber(val, restrictToPositive = false) {
+  if (val === "") {
+    return "";
+  }
+  const type = getNumericType(val);
+  switch (type) {
+    case NUM_TYPE.VAR:
+      return val;
+    case NUM_TYPE.CALC:
+      return cssCalc(val, {
+        format: "specifiedValue"
+      });
+    case NUM_TYPE.NUMBER: {
+      const num = parseFloat(val);
+      if (restrictToPositive && num < 0) {
+        return;
+      }
+      return `${num}`;
+    }
+    default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
   }
-  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;
+exports.parseLength = function parseLength(val, restrictToPositive = false) {
+  if (val === "") {
+    return "";
+  }
+  const type = getNumericType(val);
+  switch (type) {
+    case NUM_TYPE.VAR:
+      return val;
+    case NUM_TYPE.CALC:
+      return cssCalc(val, {
+        format: "specifiedValue"
+      });
+    case NUM_TYPE.NUMBER:
+      if (parseFloat(val) === 0) {
+        return "0px";
+      }
+      return;
+    case NUM_TYPE.LENGTH: {
+      const [, numVal, unit] = unitRegEx.exec(val);
+      const num = parseFloat(numVal);
+      if (restrictToPositive && num < 0) {
+        return;
+      }
+      return `${num}${unit.toLowerCase()}`;
+    }
+    default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
   }
-  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',
-    });
+exports.parsePercent = function parsePercent(val, restrictToPositive = false) {
+  if (val === "") {
+    return "";
+  }
+  const type = getNumericType(val);
+  switch (type) {
+    case NUM_TYPE.VAR:
+      return val;
+    case NUM_TYPE.CALC:
+      return cssCalc(val, {
+        format: "specifiedValue"
+      });
+    case NUM_TYPE.NUMBER:
+      if (parseFloat(val) === 0) {
+        return "0%";
+      }
+      return;
+    case NUM_TYPE.PERCENT: {
+      const [, numVal, unit] = unitRegEx.exec(val);
+      const num = parseFloat(numVal);
+      if (restrictToPositive && num < 0) {
+        return;
+      }
+      return `${num}${unit.toLowerCase()}`;
+    }
+    default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
   }
+};
 
-  var length = exports.parseLength(val);
-  if (length !== undefined) {
-    return length;
+// Either a length or a percent.
+exports.parseMeasurement = function parseMeasurement(val, restrictToPositive = false) {
+  if (val === "") {
+    return "";
+  }
+  const type = getNumericType(val);
+  switch (type) {
+    case NUM_TYPE.VAR:
+      return val;
+    case NUM_TYPE.CALC:
+      return cssCalc(val, {
+        format: "specifiedValue"
+      });
+    case NUM_TYPE.NUMBER:
+      if (parseFloat(val) === 0) {
+        return "0px";
+      }
+      return;
+    case NUM_TYPE.LENGTH:
+    case NUM_TYPE.PERCENT: {
+      const [, numVal, unit] = unitRegEx.exec(val);
+      const num = parseFloat(numVal);
+      if (restrictToPositive && num < 0) {
+        return;
+      }
+      return `${num}${unit.toLowerCase()}`;
+    }
+    default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
   }
-  return exports.parsePercent(val);
 };
 
-exports.parseInheritingMeasurement = function parseInheritingMeasurement(v) {
-  if (String(v).toLowerCase() === 'auto') {
-    return 'auto';
-  }
-  if (String(v).toLowerCase() === 'inherit') {
-    return 'inherit';
+exports.parseAngle = function parseAngle(val, normalizeDeg = false) {
+  if (val === "") {
+    return "";
+  }
+  const type = getNumericType(val);
+  switch (type) {
+    case NUM_TYPE.VAR:
+      return val;
+    case NUM_TYPE.CALC:
+      return cssCalc(val, {
+        format: "specifiedValue"
+      });
+    case NUM_TYPE.NUMBER:
+      if (parseFloat(val) === 0) {
+        return "0deg";
+      }
+      return;
+    case NUM_TYPE.ANGLE: {
+      let [, numVal, unit] = unitRegEx.exec(val);
+      numVal = parseFloat(numVal);
+      unit = unit.toLowerCase();
+      if (unit === "deg") {
+        if (normalizeDeg && numVal < 0) {
+          while (numVal < 0) {
+            numVal += 360;
+          }
+        }
+        numVal %= 360;
+      }
+      return `${numVal}${unit}`;
+    }
+    default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
   }
-  return exports.parseMeasurement(v);
 };
 
 exports.parseUrl = function parseUrl(val) {
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
+  if (val === "") {
     return val;
   }
-  var res = urlRegEx.exec(val);
-  // does it match the regex?
+  const res = urlRegEx.exec(val);
   if (!res) {
-    return undefined;
+    return;
   }
-  var str = res[1];
-  // if it starts with single or double quotes, does it end with the same?
+  let str = res[1];
+  // If it starts with single or double quotes, does it end with the same?
   if ((str[0] === '"' || str[0] === "'") && str[0] !== str[str.length - 1]) {
-    return undefined;
+    return;
   }
   if (str[0] === '"' || str[0] === "'") {
     str = str.substr(1, str.length - 2);
   }
-
-  var i;
-  for (i = 0; i < str.length; i++) {
+  let urlstr = "";
+  let escaped = false;
+  for (let i = 0; i < str.length; i++) {
     switch (str[i]) {
-      case '(':
-      case ')':
-      case ' ':
-      case '\t':
-      case '\n':
+      case "\\":
+        if (escaped) {
+          urlstr += "\\\\";
+          escaped = false;
+        } else {
+          escaped = true;
+        }
+        break;
+      case "(":
+      case ")":
+      case " ":
+      case "\t":
+      case "\n":
       case "'":
+        if (!escaped) {
+          return;
+        }
+        urlstr += str[i];
+        escaped = false;
+        break;
       case '"':
-        return undefined;
-      case '\\':
-        i++;
+        if (!escaped) {
+          return;
+        }
+        urlstr += '\\"';
+        escaped = false;
         break;
+      default:
+        urlstr += str[i];
+        escaped = false;
     }
   }
-
-  return 'url(' + str + ')';
+  return `url("${urlstr}")`;
 };
 
 exports.parseString = function parseString(val) {
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
+  if (val === "") {
+    return "";
   }
-  if (type !== exports.TYPES.STRING) {
-    return undefined;
+  if (!stringRegEx.test(val)) {
+    return;
   }
-  var i;
-  for (i = 1; i < val.length - 1; i++) {
+  val = val.substr(1, val.length - 2);
+  let str = "";
+  let escaped = false;
+  for (let i = 0; i < val.length; i++) {
     switch (val[i]) {
-      case val[0]:
-        return undefined;
-      case '\\':
-        i++;
-        while (i < val.length - 1 && /[0-9A-Fa-f]/.test(val[i])) {
-          i++;
+      case "\\":
+        if (escaped) {
+          str += "\\\\";
+          escaped = false;
+        } else {
+          escaped = true;
         }
         break;
+      case '"':
+        str += '\\"';
+        escaped = false;
+        break;
+      default:
+        str += val[i];
+        escaped = false;
     }
   }
-  if (i >= val.length) {
-    return undefined;
-  }
-  return val;
+  return `"${str}"`;
 };
 
-exports.parseColor = function parseColor(val) {
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    return val;
+exports.parseKeyword = function parseKeyword(val, validKeywords = []) {
+  if (val === "") {
+    return "";
   }
-  if (/^[a-z]+$/i.test(val) && type === exports.TYPES.COLOR) {
+  if (varRegEx.test(val)) {
     return val;
   }
-  var res = resolveColor(val, {
-    format: 'specifiedValue',
-  });
-  if (res) {
-    return res;
-  }
-  return undefined;
-};
-
-exports.parseAngle = function parseAngle(val) {
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
+  val = val.toString().toLowerCase();
+  if (validKeywords.includes(val) || GLOBAL_VALUE.includes(val)) {
     return val;
   }
-  if (type !== exports.TYPES.ANGLE) {
-    return undefined;
-  }
-  var res = angleRegEx.exec(val);
-  var flt = parseFloat(res[1]);
-  if (res[2] === 'rad') {
-    flt *= 180 / Math.PI;
-  } else if (res[2] === 'grad') {
-    flt *= 360 / 400;
-  }
-
-  while (flt < 0) {
-    flt += 360;
-  }
-  while (flt > 360) {
-    flt -= 360;
-  }
-  return flt + 'deg';
 };
 
-exports.parseKeyword = function parseKeyword(val, valid_keywords) {
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
+exports.parseColor = function parseColor(val) {
+  if (val === "") {
+    return "";
+  }
+  if (varRegEx.test(val)) {
     return val;
   }
-  if (type !== exports.TYPES.KEYWORD) {
-    return undefined;
+  if (/^[a-z]+$/i.test(val) && SYS_COLOR.includes(val.toLowerCase())) {
+    return val;
   }
-  val = val.toString().toLowerCase();
-  var i;
-  for (i = 0; i < valid_keywords.length; i++) {
-    if (valid_keywords[i].toLowerCase() === val) {
-      return valid_keywords[i];
-    }
+  const res = resolveColor(val, {
+    format: "specifiedValue"
+  });
+  if (res) {
+    return res;
   }
-  return undefined;
+  return exports.parseKeyword(val);
 };
 
 exports.parseImage = function parseImage(val) {
-  if (/^(?:none|inherit)$/i.test(val)) {
-    return val;
+  if (val === "") {
+    return "";
   }
-  var type = exports.valueType(val);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR || type === exports.TYPES.VAR) {
+  if (varRegEx.test(val)) {
     return val;
   }
-  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) {
-      return image;
+  if (keywordRegEx.test(val)) {
+    return exports.parseKeyword(val, ["none"]);
+  }
+  const values = splitValue(val, {
+    delimiter: ",",
+    preserveComment: varContainedRegEx.test(val)
+  });
+  let isImage = Boolean(values.length);
+  for (let i = 0; i < values.length; i++) {
+    const image = values[i];
+    if (image === "") {
+      return "";
     }
-    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) {
+    const imageUrl = exports.parseUrl(image);
+    if (imageUrl) {
       values[i] = imageUrl;
     } else {
       isImage = false;
@@ -354,293 +448,55 @@ exports.parseImage = function parseImage(val) {
     }
   }
   if (isImage) {
-    return values.join(', ');
+    return values.join(", ");
   }
-  return undefined;
 };
 
-// utility to translate from border-width to borderWidth
-var dashedToCamelCase = function (dashed) {
-  var i;
-  var camel = '';
-  var nextCap = false;
-  for (i = 0; i < dashed.length; i++) {
-    if (dashed[i] !== '-') {
-      camel += nextCap ? dashed[i].toUpperCase() : dashed[i];
-      nextCap = false;
-    } else {
-      nextCap = true;
+exports.parseShorthand = function parseShorthand(val, shorthandFor, preserve = false) {
+  const obj = {};
+  if (val === "" || exports.hasVarFunc(val)) {
+    for (const [property] of shorthandFor) {
+      obj[property] = "";
     }
-  }
-  return camel;
-};
-exports.dashedToCamelCase = dashedToCamelCase;
-
-var is_space = /\s/;
-var opening_deliminators = ['"', "'", '('];
-var closing_deliminators = ['"', "'", ')'];
-// this splits on whitespace, but keeps quoted and parened parts together
-var getParts = function (str) {
-  var deliminator_stack = [];
-  var length = str.length;
-  var i;
-  var parts = [];
-  var current_part = '';
-  var opening_index;
-  var closing_index;
-  for (i = 0; i < length; i++) {
-    opening_index = opening_deliminators.indexOf(str[i]);
-    closing_index = closing_deliminators.indexOf(str[i]);
-    if (is_space.test(str[i])) {
-      if (deliminator_stack.length === 0) {
-        if (current_part !== '') {
-          parts.push(current_part);
-        }
-        current_part = '';
-      } else {
-        current_part += str[i];
-      }
-    } else {
-      if (str[i] === '\\') {
-        i++;
-        current_part += str[i];
-      } else {
-        current_part += str[i];
-        if (
-          closing_index !== -1 &&
-          closing_index === deliminator_stack[deliminator_stack.length - 1]
-        ) {
-          deliminator_stack.pop();
-        } else if (opening_index !== -1) {
-          deliminator_stack.push(opening_index);
-        }
-      }
-    }
-  }
-  if (current_part !== '') {
-    parts.push(current_part);
-  }
-  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
- */
-exports.shorthandParser = function parse(v, shorthand_for) {
-  var obj = {};
-  var type = exports.valueType(v);
-  if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    Object.keys(shorthand_for).forEach(function (property) {
-      obj[property] = '';
-    });
     return obj;
   }
-
-  if (typeof v === 'number') {
-    v = v.toString();
-  }
-
-  if (typeof v !== 'string') {
-    return undefined;
-  }
-
-  if (v.toLowerCase() === 'inherit') {
-    return {};
-  }
-  var parts = getParts(v);
-  var valid = true;
-  parts.forEach(function (part, i) {
-    var part_valid = false;
-    Object.keys(shorthand_for).forEach(function (property) {
-      if (shorthand_for[property].isValid(part, i)) {
-        part_valid = true;
-        obj[property] = part;
-      }
-    });
-    valid = valid && part_valid;
-  });
-  if (!valid) {
-    return undefined;
-  }
-  return obj;
-};
-
-exports.shorthandSetter = function (property, shorthand_for) {
-  return function (v) {
-    var obj = exports.shorthandParser(v, shorthand_for);
-    if (obj === undefined) {
-      return;
+  const key = exports.parseKeyword(val);
+  if (key) {
+    if (key === "inherit") {
+      return obj;
     }
-    //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
-      var camel = dashedToCamelCase(subprop);
-      this[camel] = obj[subprop];
-      // in case it gets translated into something else (0 -> 0px)
-      obj[subprop] = this[camel];
-      this.removeProperty(subprop);
-      // don't add in empty properties
-      if (obj[subprop] !== '') {
-        this._values[subprop] = obj[subprop];
-      }
-    }, this);
-    Object.keys(shorthand_for).forEach(function (subprop) {
-      if (!obj.hasOwnProperty(subprop)) {
-        this.removeProperty(subprop);
-        delete this._values[subprop];
+    return;
+  }
+  const parts = splitValue(val);
+  const shorthandArr = [...shorthandFor];
+  for (const part of parts) {
+    let partValid = false;
+    for (let i = 0; i < shorthandArr.length; i++) {
+      const [property, value] = shorthandArr[i];
+      if (value.isValid(part)) {
+        partValid = true;
+        obj[property] = value.parse(part);
+        if (!preserve) {
+          shorthandArr.splice(i, 1);
+          break;
+        }
       }
-    }, this);
-    // in case the value is something like 'none' that removes all values,
-    // check that the generated one is not empty, first remove the property
-    // if it already exists, then call the shorthandGetter, if it's an empty
-    // string, don't set the property
-    this.removeProperty(property);
-    var calculated = exports.shorthandGetter(property, shorthand_for).call(this);
-    if (calculated !== '') {
-      this._setProperty(property, calculated);
-    }
-  };
-};
-
-exports.shorthandGetter = function (property, shorthand_for) {
-  return function () {
-    if (this._values[property] !== undefined) {
-      return this.getPropertyValue(property);
-    }
-    return Object.keys(shorthand_for)
-      .map(function (subprop) {
-        return this.getPropertyValue(subprop);
-      }, this)
-      .filter(function (value) {
-        return value !== '';
-      })
-      .join(' ');
-  };
-};
-
-// isValid(){1,4} | inherit
-// if one, it applies to all
-// if two, the first applies to the top and bottom, and the second to left and right
-// if three, the first applies to the top, the second to left and right, the third bottom
-// if four, top, right, bottom, left
-exports.implicitSetter = function (property_before, property_after, isValid, parser) {
-  property_after = property_after || '';
-  if (property_after !== '') {
-    property_after = '-' + property_after;
-  }
-  var part_names = ['top', 'right', 'bottom', 'left'];
-
-  return function (v) {
-    if (typeof v === 'number') {
-      v = v.toString();
-    }
-    if (typeof v !== 'string') {
-      return undefined;
-    }
-    var parts;
-    if (v.toLowerCase() === 'inherit' || v === '') {
-      parts = [v];
-    } else {
-      parts = getParts(v);
-    }
-    if (parts.length < 1 || parts.length > 4) {
-      return undefined;
-    }
-
-    if (!parts.every(isValid)) {
-      return undefined;
     }
-
-    parts = parts.map(function (part) {
-      return parser(part);
-    });
-    this._setProperty(property_before + property_after, parts.join(' '));
-    if (parts.length === 1) {
-      parts[1] = parts[0];
-    }
-    if (parts.length === 2) {
-      parts[2] = parts[0];
-    }
-    if (parts.length === 3) {
-      parts[3] = parts[1];
-    }
-
-    for (var i = 0; i < 4; i++) {
-      var property = property_before + '-' + part_names[i] + property_after;
-      this.removeProperty(property);
-      if (parts[i] !== '') {
-        this._values[property] = parts[i];
-      }
+    if (!partValid) {
+      return;
     }
-    return v;
-  };
+  }
+  return obj;
 };
 
-//
-//  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'];
-
-  return function (v) {
-    if (typeof v === 'number') {
-      v = v.toString();
-    }
-    if (v === null) {
-      v = '';
-    }
-    if (typeof v !== 'string') {
-      return undefined;
-    }
-    if (!isValid(v)) {
-      return undefined;
-    }
-    v = parser(v);
-    this._setProperty(property, v);
-
-    var combinedPriority = this.getPropertyPriority(prefix);
-    var parts = subparts.map((subpart) => this._values[subpart]);
-    var priorities = subparts.map((subpart) => this.getPropertyPriority(subpart));
-    // Combine into a single property if all values are set and have the same priority
-    if (
-      parts.every((p) => p !== '' && p != null) &&
-      priorities.every((p) => p === priorities[0]) &&
-      priorities[0] === combinedPriority
-    ) {
-      for (var i = 0; i < subparts.length; i++) {
-        this.removeProperty(subparts[i]);
-        this._values[subparts[i]] = parts[i];
-      }
-      this._setProperty(prefix, parts.join(' '), priorities[0]);
-    } else {
-      this.removeProperty(prefix);
-      for (var j = 0; j < subparts.length; j++) {
-        // The property we're setting won't be important, the rest will either keep their priority or inherit it from the combined property
-        var priority = subparts[j] === property ? '' : priorities[j] || combinedPriority;
-        this._setProperty(subparts[j], parts[j], priority);
-      }
-    }
-    return v;
-  };
+// Returns `false` for global values, e.g. "inherit".
+exports.isValidColor = function isValidColor(val) {
+  if (SYS_COLOR.includes(val.toLowerCase())) {
+    return true;
+  }
+  return isColor(val);
 };
 
-var camel_to_dashed = /[A-Z]/g;
-var first_segment = /^\([^-]\)-/;
-var vendor_prefixes = ['o', 'moz', 'ms', 'webkit'];
-exports.camelToDashed = function (camel_case) {
-  var match;
-  var dashed = camel_case.replace(camel_to_dashed, '-$&').toLowerCase();
-  match = dashed.match(first_segment);
-  if (match && vendor_prefixes.indexOf(match[1]) !== -1) {
-    dashed = '-' + dashed;
-  }
-  return dashed;
-};
+// Splits value into an array.
+// @see https://github.com/asamuzaK/cssColor/blob/main/src/js/util.ts
+exports.splitValue = splitValue;