cssstyle 4.6.0 → 5.0.0

package/lib/parsers.js

@@ -83,6 +83,7 @@ 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) {
@@ -429,36 +430,17 @@ 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;
-    }
-  }
-  if (isImage) {
-    return values.join(", ");
+  // FIXME: need to resolve color values within gradients
+  if (isGradient(val)) {
+    return val;
   }
+  return exports.parseUrl(val);
 };
 
 exports.parseFunction = function parseFunction(val) {

package/lib/properties/background.js

@@ -1,51 +1,382 @@
 "use strict";
-// FIXME:
-// * support multiple backgrounds
-// * also fix longhands
 
 const parsers = require("../parsers");
-const strings = require("../utils/strings");
 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 (/^none$/i.test(v)) {
-      for (const [key] of shorthandFor) {
-        this._setProperty(key, "");
-      }
-      this._setProperty("background", strings.asciiLowercase(v));
-    } else if (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
+};

package/lib/properties/backgroundImage.js

@@ -3,11 +3,28 @@
 const parsers = require("../parsers");
 
 module.exports.parse = function parse(v) {
-  return parsers.parseImage(v);
+  if (v === "") {
+    return v;
+  }
+  const values = parsers.splitValue(v, {
+    delimiter: ","
+  });
+  const parsedValues = [];
+  for (const value of values) {
+    const parsedValue = parsers.parseImage(value);
+    if (parsedValue) {
+      parsedValues.push(parsedValue);
+    } else {
+      return;
+    }
+  }
+  if (parsedValues.length) {
+    return parsedValues.join(", ");
+  }
 };
 
 module.exports.isValid = function isValid(v) {
-  if (v === "" || typeof parsers.parseKeyword(v, ["none"]) === "string") {
+  if (v === "") {
     return true;
   }
   return typeof module.exports.parse(v) === "string";

package/lib/properties/backgroundOrigin.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-origin", v);
+    } else {
+      this._setProperty("background-origin", module.exports.parse(v));
+    }
+  },
+  get() {
+    return this.getPropertyValue("background-origin");
+  },
+  enumerable: true,
+  configurable: true
+};