cssstyle 5.2.0 → 5.3.0

package/lib/properties/display.js

@@ -2,215 +2,205 @@
 
 const parsers = require("../parsers");
 
+const property = "display";
+
 /* keywords */
 const displayOutside = ["block", "inline", "run-in"];
 const displayFlow = ["flow", "flow-root"];
-const displayInside = ["table", "flex", "grid", "ruby", ...displayFlow];
-const displayListItem = ["list-item"];
-const displayInternal = [
-  "table-row-group",
-  "table-header-group",
-  "table-footer-group",
-  "table-row",
-  "table-cell",
-  "table-column-group",
-  "table-column",
-  "table-caption",
-  "ruby-base",
-  "ruby-text",
-  "ruby-base-container",
-  "ruby-text-container"
-];
-const displayBox = ["contents", "none"];
-const displayLegacy = ["inline-block", "inline-table", "inline-flex", "inline-grid"];
-const keywords = [
-  ...displayOutside,
-  ...displayInside,
-  ...displayListItem,
-  ...displayInternal,
-  ...displayBox,
-  ...displayLegacy
-];
 
-module.exports.parse = function parse(v) {
+module.exports.parse = function parse(v, opt = {}) {
+  const { globalObject } = opt;
   if (v === "") {
     return v;
   }
-  const values = parsers.splitValue(v);
-  switch (values.length) {
-    case 1: {
-      let [v1] = values;
-      v1 = parsers.parseKeyword(v1, keywords);
-      if (v1) {
-        if (v1 === "flow") {
-          return "block";
-        }
-        return v1;
-      }
-      break;
-    }
-    case 2: {
-      let [v1, v2] = values;
-      v1 = parsers.parseKeyword(v1, keywords);
-      v2 = parsers.parseKeyword(v2, keywords);
-      if (!v1 || !v2) {
-        return;
-      }
-      let outerValue = "";
-      let innerValue = "";
-      if (v1 === "list-item") {
-        outerValue = v2;
-        innerValue = v1;
-      } else if (v2 === "list-item") {
-        outerValue = v1;
-        innerValue = v2;
-      } else if (displayOutside.includes(v1)) {
-        outerValue = v1;
-        innerValue = v2;
-      } else if (displayOutside.includes(v2)) {
-        outerValue = v2;
-        innerValue = v1;
-      }
-      if (innerValue === "list-item") {
-        switch (outerValue) {
-          case "block":
-          case "flow": {
-            return innerValue;
-          }
-          case "flow-root":
-          case "inline":
-          case "run-in": {
-            return `${outerValue} ${innerValue}`;
-          }
-          default:
-        }
-      } else if (outerValue === "block") {
-        switch (innerValue) {
-          case "flow": {
-            return outerValue;
+  const value = parsers.parsePropertyValue(property, v, {
+    globalObject,
+    inArray: true
+  });
+  if (Array.isArray(value) && value.length) {
+    switch (value.length) {
+      case 1: {
+        const [{ name, type }] = value;
+        switch (type) {
+          case "GlobalKeyword": {
+            return name;
           }
-          case "flow-root":
-          case "flex":
-          case "grid":
-          case "table": {
-            return innerValue;
-          }
-          case "ruby": {
-            return `${outerValue} ${innerValue}`;
-          }
-          default:
-        }
-      } else if (outerValue === "inline") {
-        switch (innerValue) {
-          case "flow": {
-            return outerValue;
-          }
-          case "flow-root": {
-            return `${outerValue}-block`;
-          }
-          case "flex":
-          case "grid":
-          case "table": {
-            return `${outerValue}-${innerValue}`;
-          }
-          case "ruby": {
-            return innerValue;
+          case "Identifier": {
+            if (name === "flow") {
+              return "block";
+            }
+            return name;
           }
           default:
         }
-      } else if (outerValue === "run-in") {
-        switch (innerValue) {
-          case "flow": {
-            return outerValue;
+        break;
+      }
+      case 2: {
+        const [part1, part2] = value;
+        const val1 = part1.type === "Identifier" && part1.name;
+        const val2 = part2.type === "Identifier" && part2.name;
+        if (val1 && val2) {
+          let outerValue = "";
+          let innerValue = "";
+          if (val1 === "list-item") {
+            outerValue = val2;
+            innerValue = val1;
+          } else if (val2 === "list-item") {
+            outerValue = val1;
+            innerValue = val2;
+          } else if (displayOutside.includes(val1)) {
+            outerValue = val1;
+            innerValue = val2;
+          } else if (displayOutside.includes(val2)) {
+            outerValue = val2;
+            innerValue = val1;
           }
-          case "flow-root":
-          case "flex":
-          case "grid":
-          case "table":
-          case "ruby": {
-            return `${outerValue} ${innerValue}`;
+          if (innerValue === "list-item") {
+            switch (outerValue) {
+              case "block":
+              case "flow": {
+                return innerValue;
+              }
+              case "flow-root":
+              case "inline":
+              case "run-in": {
+                return `${outerValue} ${innerValue}`;
+              }
+              default:
+            }
+          } else if (outerValue === "block") {
+            switch (innerValue) {
+              case "flow": {
+                return outerValue;
+              }
+              case "flow-root":
+              case "flex":
+              case "grid":
+              case "table": {
+                return innerValue;
+              }
+              case "ruby": {
+                return `${outerValue} ${innerValue}`;
+              }
+              default:
+            }
+          } else if (outerValue === "inline") {
+            switch (innerValue) {
+              case "flow": {
+                return outerValue;
+              }
+              case "flow-root": {
+                return `${outerValue}-block`;
+              }
+              case "flex":
+              case "grid":
+              case "table": {
+                return `${outerValue}-${innerValue}`;
+              }
+              case "ruby": {
+                return innerValue;
+              }
+              default:
+            }
+          } else if (outerValue === "run-in") {
+            switch (innerValue) {
+              case "flow": {
+                return outerValue;
+              }
+              case "flow-root":
+              case "flex":
+              case "grid":
+              case "table":
+              case "ruby": {
+                return `${outerValue} ${innerValue}`;
+              }
+              default:
+            }
           }
-          default:
         }
+        break;
       }
-      break;
-    }
-    case 3: {
-      let [v1, v2, v3] = values;
-      v1 = parsers.parseKeyword(v1, keywords);
-      v2 = parsers.parseKeyword(v2, keywords);
-      v3 = parsers.parseKeyword(v3, keywords);
-      if (!v1 || !v2 || !v3) {
-        return;
-      }
-      let outerValue = "";
-      let flowValue = "";
-      let listItemValue = "";
-      if (v1 === "list-item") {
-        listItemValue = v1;
-        if (displayFlow.includes(v2)) {
-          flowValue = v2;
-          outerValue = v3;
-        } else if (displayFlow.includes(v3)) {
-          flowValue = v3;
-          outerValue = v2;
-        }
-      } else if (v2 === "list-item") {
-        listItemValue = v2;
-        if (displayFlow.includes(v1)) {
-          flowValue = v1;
-          outerValue = v3;
-        } else if (displayFlow.includes(v3)) {
-          flowValue = v3;
-          outerValue = v1;
-        }
-      } else if (v3 === "list-item") {
-        listItemValue = v3;
-        if (displayFlow.includes(v1)) {
-          flowValue = v1;
-          outerValue = v2;
-        } else if (displayFlow.includes(v2)) {
-          flowValue = v2;
-          outerValue = v1;
-        }
-      }
-      if (outerValue && flowValue && listItemValue) {
-        switch (outerValue) {
-          case "block": {
-            if (flowValue === "flow") {
-              return listItemValue;
+      case 3: {
+        const [part1, part2, part3] = value;
+        const val1 = part1.type === "Identifier" && part1.name;
+        const val2 = part2.type === "Identifier" && part2.name;
+        const val3 = part3.type === "Identifier" && part3.name;
+        if (val1 && val2 && part3) {
+          let outerValue = "";
+          let flowValue = "";
+          let listItemValue = "";
+          if (val1 === "list-item") {
+            listItemValue = val1;
+            if (displayFlow.includes(val2)) {
+              flowValue = val2;
+              outerValue = val3;
+            } else if (displayFlow.includes(val3)) {
+              flowValue = val3;
+              outerValue = val2;
+            }
+          } else if (val2 === "list-item") {
+            listItemValue = val2;
+            if (displayFlow.includes(val1)) {
+              flowValue = val1;
+              outerValue = val3;
+            } else if (displayFlow.includes(val3)) {
+              flowValue = val3;
+              outerValue = val1;
+            }
+          } else if (val3 === "list-item") {
+            listItemValue = val3;
+            if (displayFlow.includes(val1)) {
+              flowValue = val1;
+              outerValue = val2;
+            } else if (displayFlow.includes(val2)) {
+              flowValue = val2;
+              outerValue = val1;
             }
-            return `${flowValue} ${listItemValue}`;
           }
-          case "inline":
-          case "run-in": {
-            if (flowValue === "flow") {
-              return `${outerValue} ${listItemValue}`;
+          if (outerValue && flowValue && listItemValue) {
+            switch (outerValue) {
+              case "block": {
+                if (flowValue === "flow") {
+                  return listItemValue;
+                }
+                return `${flowValue} ${listItemValue}`;
+              }
+              case "inline":
+              case "run-in": {
+                if (flowValue === "flow") {
+                  return `${outerValue} ${listItemValue}`;
+                }
+                return `${outerValue} ${flowValue} ${listItemValue}`;
+              }
             }
-            return `${outerValue} ${flowValue} ${listItemValue}`;
           }
         }
+        break;
       }
-      break;
+      default:
     }
-    default:
+  } else if (typeof value === "string") {
+    return value;
   }
 };
 
-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);
-    this._setProperty("display", module.exports.parse(v));
+    if (parsers.hasVarFunc(v)) {
+      this._setProperty(property, v);
+    } else {
+      const val = module.exports.parse(v, {
+        globalObject: this._global
+      });
+      if (typeof val === "string") {
+        const priority = this._priorities.get(property) ?? "";
+        this._setProperty(property, val, priority);
+      }
+    }
   },
   get() {
-    return this.getPropertyValue("display");
+    return this.getPropertyValue(property);
   },
   enumerable: true,
   configurable: true

package/lib/properties/flex.js

@@ -5,68 +5,167 @@ const flexGrow = require("./flexGrow");
 const flexShrink = require("./flexShrink");
 const flexBasis = require("./flexBasis");
 
+const property = "flex";
+
+module.exports.initialValues = new Map([
+  ["flex-grow", "0"],
+  ["flex-shrink", "1"],
+  ["flex-basis", "auto"]
+]);
+
 module.exports.shorthandFor = new Map([
   ["flex-grow", flexGrow],
   ["flex-shrink", flexShrink],
   ["flex-basis", flexBasis]
 ]);
 
-module.exports.parse = function parse(v) {
-  const key = parsers.parseKeyword(v, ["auto", "none"]);
-  if (key) {
-    if (key === "auto") {
-      return "1 1 auto";
-    }
-    if (key === "none") {
-      return "0 0 auto";
-    }
-    if (key === "initial") {
-      return "0 1 auto";
-    }
-    return;
+module.exports.parse = function parse(v, opt = {}) {
+  const { globalObject } = opt;
+  if (v === "") {
+    return v;
   }
-  const obj = parsers.parseShorthand(v, module.exports.shorthandFor);
-  if (obj) {
+  const value = parsers.parsePropertyValue(property, v, {
+    globalObject,
+    inArray: true
+  });
+  if (Array.isArray(value) && value.length) {
     const flex = {
       "flex-grow": "1",
       "flex-shrink": "1",
       "flex-basis": "0%"
     };
-    const items = Object.entries(obj);
-    for (const [property, value] of items) {
-      flex[property] = value;
+    if (value.length === 1) {
+      const [{ isNumber, name, type, unit, value: itemValue }] = value;
+      switch (type) {
+        case "Calc": {
+          if (isNumber) {
+            flex["flex-grow"] = `${name}(${itemValue})`;
+            return flex;
+          }
+          flex["flex-basis"] = `${name}(${itemValue})`;
+          return flex;
+        }
+        case "Dimension": {
+          flex["flex-basis"] = `${itemValue}${unit}`;
+          return flex;
+        }
+        case "GlobalKeyword": {
+          return name;
+        }
+        case "Identifier": {
+          if (name === "auto") {
+            flex["flex-basis"] = name;
+            return flex;
+          } else if (name === "none") {
+            return {
+              "flex-grow": "0",
+              "flex-shrink": "0",
+              "flex-basis": "auto"
+            };
+          }
+          break;
+        }
+        case "Number": {
+          flex["flex-grow"] = itemValue;
+          return flex;
+        }
+        case "Percentage": {
+          flex["flex-basis"] = `${itemValue}%`;
+          return flex;
+        }
+        default:
+      }
+    } else {
+      const [val1, val2, val3] = value;
+      if (val1.type === "Calc" && val1.isNumber) {
+        flex["flex-grow"] = `${val1.name}(${val1.value})`;
+      } else if (val1.type === "Number") {
+        flex["flex-grow"] = val1.value;
+      } else {
+        return;
+      }
+      if (val3) {
+        if (val2.type === "Calc" && val2.isNumber) {
+          flex["flex-shrink"] = `${val2.name}(${val2.value})`;
+        } else if (val2.type === "Number") {
+          flex["flex-shrink"] = val2.value;
+        } else {
+          return;
+        }
+        if (val3.type === "Calc" && !val3.isNumber) {
+          flex["flex-basis"] = `${val3.name}(${val3.value})`;
+        } else if (val3.type === "Dimension") {
+          flex["flex-basis"] = `${val3.value}${val3.unit}`;
+        } else if (val3.type === "Percentage") {
+          flex["flex-basis"] = `${val3.value}%`;
+        } else {
+          return;
+        }
+      } else {
+        switch (val2.type) {
+          case "Calc": {
+            if (val2.isNumber) {
+              flex["flex-shrink"] = `${val2.name}(${val2.value})`;
+            } else {
+              flex["flex-basis"] = `${val2.name}(${val2.value})`;
+            }
+            break;
+          }
+          case "Dimension": {
+            flex["flex-basis"] = `${val2.value}${val2.unit}`;
+            break;
+          }
+          case "Number": {
+            flex["flex-shrink"] = val2.value;
+            break;
+          }
+          case "Percentage": {
+            flex["flex-basis"] = `${val2.value}%`;
+            break;
+          }
+          default: {
+            return;
+          }
+        }
+      }
+      return flex;
+      // return [...Object.values(flex)].join(" ");
     }
-    return [...Object.values(flex)].join(" ");
+  } else if (typeof value === "string") {
+    return value;
   }
 };
 
-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._shorthandSetter("flex", "", module.exports.shorthandFor);
-      this._setProperty("flex", v);
+      for (const [longhand] of module.exports.shorthandFor) {
+        this._setProperty(longhand, "");
+      }
+      this._setProperty(property, v);
     } else {
-      this._shorthandSetter("flex", module.exports.parse(v), module.exports.shorthandFor);
+      const val = module.exports.parse(v, {
+        globalObject: this._global
+      });
+      const priority = this._priorities.get(property) ?? "";
+      if (typeof val === "string") {
+        for (const [longhand] of module.exports.shorthandFor) {
+          this._setProperty(longhand, val, priority);
+        }
+        this._setProperty(property, val, priority);
+      } else if (val) {
+        const values = [];
+        for (const [longhand, value] of Object.entries(val)) {
+          values.push(value);
+          this._setProperty(longhand, value, priority);
+        }
+        this._setProperty(property, values.join(" "), priority);
+      }
     }
   },
   get() {
-    let val = this.getPropertyValue("flex");
-    if (parsers.hasVarFunc(val)) {
-      return val;
-    }
-    val = this._shorthandGetter("flex", module.exports.shorthandFor);
-    if (parsers.hasVarFunc(val)) {
-      return "";
-    }
-    return val;
+    return this.getPropertyValue(property);
   },
   enumerable: true,
   configurable: true

package/lib/properties/flexBasis.js

@@ -2,31 +2,60 @@
 
 const parsers = require("../parsers");
 
-module.exports.parse = function parse(v) {
-  const val = parsers.parseMeasurement(v);
-  if (val) {
-    return val;
-  }
-  const keywords = ["content", "auto", "min-content", "max-content"];
-  return parsers.parseKeyword(v, keywords);
-};
+const property = "flex-basis";
+const shorthand = "flex";
 
-module.exports.isValid = function isValid(v) {
-  return typeof module.exports.parse(v) === "string";
+module.exports.parse = function parse(v, opt = {}) {
+  const { globalObject } = opt;
+  if (v === "") {
+    return v;
+  }
+  const value = parsers.parsePropertyValue(property, v, {
+    globalObject,
+    inArray: true
+  });
+  if (Array.isArray(value) && value.length === 1) {
+    const [{ isNumber, name, type, value: itemValue }] = value;
+    switch (type) {
+      case "Calc": {
+        if (isNumber) {
+          return;
+        }
+        return `${name}(${itemValue})`;
+      }
+      case "GlobalKeyword":
+      case "Identifier": {
+        return name;
+      }
+      default: {
+        return parsers.parseLengthPercentage(value);
+      }
+    }
+  } else if (typeof value === "string") {
+    return value;
+  }
 };
 
 module.exports.definition = {
   set(v) {
     v = parsers.prepareValue(v, this._global);
     if (parsers.hasVarFunc(v)) {
-      this._setProperty("flex", "");
-      this._setProperty("flex-basis", v);
+      this._setProperty(shorthand, "");
+      this._setProperty(property, v);
     } else {
-      this._setProperty("flex-basis", module.exports.parse(v));
+      const val = module.exports.parse(v, {
+        globalObject: this._global
+      });
+      if (typeof val === "string") {
+        const shorthandPriority = this._priorities.get(shorthand);
+        const prior = this._priorities.get(property) ?? "";
+        const priority = shorthandPriority && prior ? "" : prior;
+        this._flexBoxSetter(property, val, priority, shorthand);
+      }
     }
   },
   get() {
-    return this.getPropertyValue("flex-basis");
+    return this.getPropertyValue(property);
   },
   enumerable: true,
   configurable: true