cssstyle 4.5.0 → 5.0.0

package/lib/parsers.js

@@ -5,6 +5,7 @@
 "use strict";
 
 const { resolve: resolveColor, utils } = require("@asamuzakjp/css-color");
+const { asciiLowercase } = require("./utils/strings");
 
 const { cssCalc, isColor, isGradient, splitValue } = utils;
 
@@ -24,44 +25,48 @@ const NUM_TYPE = Object.freeze({
 });
 
 // System colors
+// @see https://drafts.csswg.org/css-color/#css-system-colors
+// @see https://drafts.csswg.org/css-color/#deprecated-system-colors
 const SYS_COLOR = Object.freeze([
   "accentcolor",
   "accentcolortext",
+  "activeborder",
+  "activecaption",
   "activetext",
+  "appworkspace",
+  "background",
   "buttonborder",
   "buttonface",
+  "buttonhighlight",
+  "buttonshadow",
   "buttontext",
   "canvas",
   "canvastext",
+  "captiontext",
   "field",
   "fieldtext",
   "graytext",
   "highlight",
   "highlighttext",
-  "linktext",
-  "mark",
-  "marktext",
-  "visitedtext",
-  "activeborder",
-  "activecaption",
-  "appworkspace",
-  "background",
-  "buttonhighlight",
-  "buttonshadow",
-  "captiontext",
   "inactiveborder",
   "inactivecaption",
   "inactivecaptiontext",
   "infobackground",
   "infotext",
+  "linktext",
+  "mark",
+  "marktext",
   "menu",
   "menutext",
   "scrollbar",
+  "selecteditem",
+  "selecteditemtext",
   "threeddarkshadow",
   "threedface",
   "threedhighlight",
   "threedlightshadow",
   "threedshadow",
+  "visitedtext",
   "window",
   "windowframe",
   "windowtext"
@@ -78,6 +83,8 @@ 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)\(/;
+const gradientRegEx = /^(?:repeating-)?(?:conic|linear|radial)-gradient\(/;
+const functionRegEx = /^([a-z][a-z\d]*(?:-[a-z\d]+)*)\(/i;
 
 const getNumericType = function getNumericType(val) {
   if (varRegEx.test(val)) {
@@ -184,7 +191,7 @@ exports.parseLength = function parseLength(val, restrictToPositive = false) {
       if (restrictToPositive && num < 0) {
         return;
       }
-      return `${num}${unit.toLowerCase()}`;
+      return `${num}${asciiLowercase(unit)}`;
     }
     default:
       if (varContainedRegEx.test(val)) {
@@ -216,7 +223,7 @@ exports.parsePercent = function parsePercent(val, restrictToPositive = false) {
       if (restrictToPositive && num < 0) {
         return;
       }
-      return `${num}${unit.toLowerCase()}`;
+      return `${num}${asciiLowercase(unit)}`;
     }
     default:
       if (varContainedRegEx.test(val)) {
@@ -250,7 +257,7 @@ exports.parseMeasurement = function parseMeasurement(val, restrictToPositive = f
       if (restrictToPositive && num < 0) {
         return;
       }
-      return `${num}${unit.toLowerCase()}`;
+      return `${num}${asciiLowercase(unit)}`;
     }
     default:
       if (varContainedRegEx.test(val)) {
@@ -279,7 +286,7 @@ exports.parseAngle = function parseAngle(val, normalizeDeg = false) {
     case NUM_TYPE.ANGLE: {
       let [, numVal, unit] = unitRegEx.exec(val);
       numVal = parseFloat(numVal);
-      unit = unit.toLowerCase();
+      unit = asciiLowercase(unit);
       if (unit === "deg") {
         if (normalizeDeg && numVal < 0) {
           while (numVal < 0) {
@@ -391,7 +398,7 @@ exports.parseKeyword = function parseKeyword(val, validKeywords = []) {
   if (varRegEx.test(val)) {
     return val;
   }
-  val = val.toString().toLowerCase();
+  val = asciiLowercase(val.toString());
   if (validKeywords.includes(val) || GLOBAL_VALUE.includes(val)) {
     return val;
   }
@@ -404,8 +411,11 @@ exports.parseColor = function parseColor(val) {
   if (varRegEx.test(val)) {
     return val;
   }
-  if (/^[a-z]+$/i.test(val) && SYS_COLOR.includes(val.toLowerCase())) {
-    return val;
+  if (/^[a-z]+$/i.test(val)) {
+    const v = asciiLowercase(val);
+    if (SYS_COLOR.includes(v)) {
+      return v;
+    }
   }
   const res = resolveColor(val, {
     format: "specifiedValue"
@@ -420,35 +430,42 @@ exports.parseImage = function parseImage(val) {
   if (val === "") {
     return "";
   }
-  if (varRegEx.test(val)) {
+  if (gradientRegEx.test(val) && varRegEx.test(val)) {
     return val;
   }
   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 (isGradient(image) || /^(?:none|inherit)$/i.test(image)) {
-      continue;
-    }
-    const imageUrl = exports.parseUrl(image);
-    if (imageUrl) {
-      values[i] = imageUrl;
-    } else {
-      isImage = false;
-      break;
-    }
+  // FIXME: need to resolve color values within gradients
+  if (isGradient(val)) {
+    return val;
   }
-  if (isImage) {
-    return values.join(", ");
+  return exports.parseUrl(val);
+};
+
+exports.parseFunction = function parseFunction(val) {
+  if (val === "") {
+    return {
+      name: null,
+      value: ""
+    };
+  }
+  if (functionRegEx.test(val) && val.endsWith(")")) {
+    if (varRegEx.test(val) || varContainedRegEx.test(val)) {
+      return {
+        name: "var",
+        value: val
+      };
+    }
+    const [, name] = functionRegEx.exec(val);
+    const value = val
+      .replace(new RegExp(`^${name}\\(`), "")
+      .replace(/\)$/, "")
+      .trim();
+    return {
+      name,
+      value
+    };
   }
 };
 
@@ -491,7 +508,7 @@ exports.parseShorthand = function parseShorthand(val, shorthandFor, preserve = f
 
 // Returns `false` for global values, e.g. "inherit".
 exports.isValidColor = function isValidColor(val) {
-  if (SYS_COLOR.includes(val.toLowerCase())) {
+  if (SYS_COLOR.includes(asciiLowercase(val))) {
     return true;
   }
   return isColor(val);

package/lib/properties/background.js

@@ -1,45 +1,382 @@
 "use strict";
-// FIXME:
-// * support multiple backgrounds
-// * also fix longhands
 
 const parsers = require("../parsers");
 const backgroundImage = require("./backgroundImage");
 const backgroundPosition = require("./backgroundPosition");
+const backgroundSize = require("./backgroundSize");
 const backgroundRepeat = require("./backgroundRepeat");
+const backgroundOrigin = require("./backgroundOrigin");
+const backgroundClip = require("./backgroundClip");
 const backgroundAttachment = require("./backgroundAttachment");
 const backgroundColor = require("./backgroundColor");
 
-const shorthandFor = new Map([
+module.exports.shorthandFor = new Map([
   ["background-image", backgroundImage],
   ["background-position", backgroundPosition],
+  ["background-size", backgroundSize],
   ["background-repeat", backgroundRepeat],
+  ["background-origin", backgroundOrigin],
+  ["background-clip", backgroundClip],
   ["background-attachment", backgroundAttachment],
   ["background-color", backgroundColor]
 ]);
 
+const initialValues = new Map([
+  ["background-image", "none"],
+  ["background-position", "0% 0%"],
+  ["background-size", "auto"],
+  ["background-repeat", "repeat"],
+  ["background-origin", "padding-box"],
+  ["background-clip", "border-box"],
+  ["background-attachment", "scroll"],
+  ["background-color", "transparent"]
+]);
+
+module.exports.parse = function parse(v) {
+  const values = parsers.splitValue(v, {
+    delimiter: ","
+  });
+  const bgValues = [];
+  const l = values.length;
+  for (let i = 0; i < l; i++) {
+    let bg = {
+      "background-image": initialValues.get("background-image"),
+      "background-position": initialValues.get("background-position"),
+      "background-size": initialValues.get("background-size"),
+      "background-repeat": initialValues.get("background-repeat"),
+      "background-origin": initialValues.get("background-origin"),
+      "background-clip": initialValues.get("background-clip"),
+      "background-attachment": initialValues.get("background-attachment"),
+      "background-color": initialValues.get("background-color")
+    };
+    if (l > 1 && i !== l - 1) {
+      bg = {
+        "background-image": initialValues.get("background-image"),
+        "background-position": initialValues.get("background-position"),
+        "background-size": initialValues.get("background-size"),
+        "background-repeat": initialValues.get("background-repeat"),
+        "background-origin": initialValues.get("background-origin"),
+        "background-clip": initialValues.get("background-clip"),
+        "background-attachment": initialValues.get("background-attachment")
+      };
+    }
+    const bgPosition = [];
+    const bgSize = [];
+    const bgRepeat = [];
+    const bgBox = [];
+    const bgParts = parsers.splitValue(values[i], {
+      delimiter: "/"
+    });
+    if (!bgParts.length || bgParts.length > 2) {
+      return;
+    }
+    const [bgPart1, bgPart2 = ""] = bgParts;
+    const parts1 = parsers.splitValue(bgPart1);
+    for (const part of parts1) {
+      let partValid = false;
+      for (const [property, value] of module.exports.shorthandFor) {
+        if (value.isValid(part)) {
+          partValid = true;
+          switch (property) {
+            case "background-clip":
+            case "background-origin": {
+              const parsedValue = value.parse(part);
+              if (parsedValue) {
+                bgBox.push(parsedValue);
+              }
+              break;
+            }
+            case "background-color": {
+              if (i !== values.length - 1) {
+                return;
+              }
+              const parsedValue = value.parse(part);
+              if (parsedValue) {
+                bg[property] = parsedValue;
+              }
+              break;
+            }
+            case "background-position": {
+              const parsedValue = value.parse(part);
+              if (parsedValue) {
+                bgPosition.push(parsedValue);
+              }
+              break;
+            }
+            case "background-repeat": {
+              const parsedValue = value.parse(part);
+              if (parsedValue) {
+                bgRepeat.push(parsedValue);
+              }
+              break;
+            }
+            case "background-size": {
+              break;
+            }
+            default: {
+              const parsedValue = value.parse(part);
+              if (parsedValue) {
+                bg[property] = parsedValue;
+              }
+            }
+          }
+        }
+      }
+      if (!partValid) {
+        return;
+      }
+    }
+    if (bgPart2) {
+      const parts2 = parsers.splitValue(bgPart2);
+      for (const part of parts2) {
+        let partValid = false;
+        for (const [property, value] of module.exports.shorthandFor) {
+          if (value.isValid(part)) {
+            partValid = true;
+            switch (property) {
+              case "background-clip":
+              case "background-origin": {
+                const parsedValue = value.parse(part);
+                if (parsedValue) {
+                  bgBox.push(parsedValue);
+                }
+                break;
+              }
+              case "background-color": {
+                if (i !== l - 1) {
+                  return;
+                }
+                const parsedValue = value.parse(part);
+                if (parsedValue) {
+                  bg[property] = parsedValue;
+                }
+                break;
+              }
+              case "background-position": {
+                break;
+              }
+              case "background-repeat": {
+                const parsedValue = value.parse(part);
+                if (parsedValue) {
+                  bgRepeat.push(parsedValue);
+                }
+                break;
+              }
+              case "background-size": {
+                const parsedValue = value.parse(part);
+                if (parsedValue) {
+                  bgSize.push(parsedValue);
+                }
+                break;
+              }
+              default: {
+                const parsedValue = value.parse(part);
+                if (parsedValue) {
+                  bg[property] = parsedValue;
+                }
+              }
+            }
+          }
+        }
+        if (!partValid) {
+          return;
+        }
+      }
+    }
+    if (bgPosition.length) {
+      const { parse: parser } = module.exports.shorthandFor.get("background-position");
+      const value = parser(bgPosition.join(" "));
+      if (value) {
+        bg["background-position"] = value;
+      }
+    }
+    if (bgSize.length) {
+      const { parse: parser } = module.exports.shorthandFor.get("background-size");
+      const value = parser(bgSize.join(" "));
+      if (value) {
+        bg["background-size"] = value;
+      }
+    }
+    if (bgRepeat.length) {
+      const { parse: parser } = module.exports.shorthandFor.get("background-repeat");
+      const value = parser(bgRepeat.join(" "));
+      if (value) {
+        bg["background-repeat"] = value;
+      }
+    }
+    if (bgBox.length) {
+      switch (bgBox.length) {
+        case 1: {
+          const [value] = bgBox;
+          bg["background-origin"] = value;
+          bg["background-clip"] = value;
+          break;
+        }
+        case 2: {
+          const [value1, value2] = bgBox;
+          bg["background-origin"] = value1;
+          bg["background-clip"] = value2;
+          break;
+        }
+        default: {
+          return;
+        }
+      }
+    }
+    bgValues.push(bg);
+  }
+  return bgValues;
+};
+
 module.exports.definition = {
   set(v) {
     v = parsers.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none" || parsers.hasVarFunc(v)) {
-      for (const [key] of shorthandFor) {
+    if (v === "" || parsers.hasVarFunc(v)) {
+      for (const [key] of module.exports.shorthandFor) {
         this._setProperty(key, "");
       }
       this._setProperty("background", v);
     } else {
-      this._shorthandSetter("background", v, shorthandFor);
+      const bgValues = module.exports.parse(v);
+      if (!Array.isArray(bgValues)) {
+        return;
+      }
+      const bgMap = new Map([
+        ["background-image", []],
+        ["background-position", []],
+        ["background-size", []],
+        ["background-repeat", []],
+        ["background-origin", []],
+        ["background-clip", []],
+        ["background-attachment", []],
+        ["background-color", []]
+      ]);
+      const backgrounds = [];
+      for (const bgValue of bgValues) {
+        const bg = [];
+        for (const [property, value] of Object.entries(bgValue)) {
+          if (value) {
+            const arr = bgMap.get(property);
+            arr.push(value);
+            bgMap.set(property, arr);
+            if (value !== initialValues.get(property)) {
+              if (property === "background-size") {
+                bg.push(`/ ${value}`);
+              } else {
+                bg.push(value);
+              }
+            } else if (property === "background-image") {
+              if (v === "none") {
+                bg.push(value);
+              }
+            } else if (property === "background-color") {
+              if (v === "transparent") {
+                bg.push(value);
+              }
+            }
+          }
+        }
+        backgrounds.push(bg.join(" "));
+      }
+      for (const [property, value] of bgMap) {
+        this._setProperty(property, value.join(", "));
+      }
+      this._setProperty("background", backgrounds.join(", "));
     }
   },
   get() {
-    let val = this.getPropertyValue("background");
-    if (parsers.hasVarFunc(val)) {
-      return val;
+    const v = this.getPropertyValue("background");
+    if (parsers.hasVarFunc(v)) {
+      return v;
     }
-    val = this._shorthandGetter("background", shorthandFor);
-    if (parsers.hasVarFunc(val)) {
+    const bgMap = new Map();
+    let l = 0;
+    for (const [property] of module.exports.shorthandFor) {
+      const val = this.getPropertyValue(property);
+      if (property === "background-image") {
+        if (
+          val === "none" &&
+          v === "none" &&
+          this.getPropertyValue("background-color") === "transparent"
+        ) {
+          return val;
+        }
+        if (val !== initialValues.get(property)) {
+          const imgValues = parsers.splitValue(val, {
+            delimiter: ","
+          });
+          l = imgValues.length;
+          bgMap.set(property, imgValues);
+        }
+      } else if (property === "background-color") {
+        if (val !== initialValues.get(property) || v.includes(val)) {
+          bgMap.set(property, [val]);
+        }
+      } else if (val !== initialValues.get(property)) {
+        bgMap.set(
+          property,
+          parsers.splitValue(val, {
+            delimiter: ","
+          })
+        );
+      }
+    }
+    if (l === 0) {
+      const [background] = bgMap.get("background-color");
+      if (background) {
+        return background;
+      }
       return "";
     }
-    return val;
+    const bgValues = [];
+    for (let i = 0; i < l; i++) {
+      bgValues[i] = [];
+    }
+    for (const [property, values] of bgMap) {
+      for (let i = 0; i < l; i++) {
+        switch (property) {
+          case "background-color": {
+            if (i === l - 1) {
+              const value = values[0];
+              if (parsers.hasVarFunc(value)) {
+                return "";
+              }
+              if (value && value !== initialValues.get(property)) {
+                const bgValue = bgValues[i];
+                bgValue.push(value);
+              }
+            }
+            break;
+          }
+          case "background-size": {
+            const value = values[i];
+            if (parsers.hasVarFunc(value)) {
+              return "";
+            }
+            if (value && value !== initialValues.get(property)) {
+              const bgValue = bgValues[i];
+              bgValue.push(`/ ${value}`);
+            }
+            break;
+          }
+          default: {
+            const value = values[i];
+            if (parsers.hasVarFunc(value)) {
+              return "";
+            }
+            if (value && value !== initialValues.get(property)) {
+              const bgValue = bgValues[i];
+              bgValue.push(value);
+            }
+          }
+        }
+      }
+    }
+    const backgrounds = [];
+    for (const bgValue of bgValues) {
+      backgrounds.push(bgValue.join(" "));
+    }
+    return backgrounds.join(", ");
   },
   enumerable: true,
   configurable: true

package/lib/properties/backgroundAttachment.js

@@ -3,8 +3,25 @@
 const parsers = require("../parsers");
 
 module.exports.parse = function parse(v) {
+  if (v === "") {
+    return v;
+  }
+  const values = parsers.splitValue(v, {
+    delimiter: ","
+  });
   const keywords = ["fixed", "scroll", "local"];
-  return parsers.parseKeyword(v, keywords);
+  const parsedValues = [];
+  for (const value of values) {
+    const parsedValue = parsers.parseKeyword(value, keywords);
+    if (parsedValue) {
+      parsedValues.push(parsedValue);
+    } else {
+      return;
+    }
+  }
+  if (parsedValues.length) {
+    return parsedValues.join(", ");
+  }
 };
 
 module.exports.isValid = function isValid(v) {

package/lib/properties/backgroundClip.js

@@ -0,0 +1,49 @@
+"use strict";
+
+const parsers = require("../parsers");
+
+module.exports.parse = function parse(v) {
+  if (v === "") {
+    return v;
+  }
+  const values = parsers.splitValue(v, {
+    delimiter: ","
+  });
+  const keywords = ["border-box", "padding-box", "content-box"];
+  const parsedValues = [];
+  for (const value of values) {
+    const parsedValue = parsers.parseKeyword(value, keywords);
+    if (parsedValue) {
+      parsedValues.push(parsedValue);
+    } else {
+      return;
+    }
+  }
+  if (parsedValues.length) {
+    return parsedValues.join(", ");
+  }
+};
+
+module.exports.isValid = function isValid(v) {
+  if (v === "") {
+    return true;
+  }
+  return typeof module.exports.parse(v) === "string";
+};
+
+module.exports.definition = {
+  set(v) {
+    v = parsers.prepareValue(v, this._global);
+    if (parsers.hasVarFunc(v)) {
+      this._setProperty("background", "");
+      this._setProperty("background-clip", v);
+    } else {
+      this._setProperty("background-clip", module.exports.parse(v));
+    }
+  },
+  get() {
+    return this.getPropertyValue("background-clip");
+  },
+  enumerable: true,
+  configurable: true
+};