cssstyle 5.2.1 → 5.3.0

package/lib/CSSStyleDeclaration.js

@@ -3,19 +3,26 @@
  * https://github.com/NV/CSSOM
  */
 "use strict";
-const allExtraProperties = require("./allExtraProperties");
-const { shorthandProperties } = require("./shorthandProperties");
+
 const allProperties = require("./generated/allProperties");
 const implementedProperties = require("./generated/implementedProperties");
 const generatedProperties = require("./generated/properties");
+const {
+  borderProperties,
+  getPositionValue,
+  normalizeBorderProperties,
+  prepareBorderProperties,
+  prepareProperties,
+  shorthandProperties
+} = require("./normalize");
 const {
   hasVarFunc,
-  isValidPropertyValue,
+  isGlobalKeyword,
   parseCSS,
-  parseShorthand,
-  prepareValue,
-  splitValue
+  parsePropertyValue,
+  prepareValue
 } = require("./parsers");
+const allExtraProperties = require("./utils/allExtraProperties");
 const { dashedToCamelCase } = require("./utils/camelize");
 const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
 const { asciiLowercase } = require("./utils/strings");
@@ -132,25 +139,30 @@ class CSSStyleDeclaration {
     for (let i = 0; i < this._length; i++) {
       const property = this[i];
       const value = this.getPropertyValue(property);
-      const priority = this.getPropertyPriority(property);
-      if (priority === "important") {
-        properties.set(property, `${property}: ${value} !${priority};`);
-      } else {
-        if (shorthandProperties.has(property)) {
-          const longhandProperties = shorthandProperties.get(property);
-          for (const [longhandProperty] of longhandProperties) {
-            if (properties.has(longhandProperty) && !this.getPropertyPriority(longhandProperty)) {
-              properties.delete(longhandProperty);
-            }
+      const priority = this._priorities.get(property) ?? "";
+      if (shorthandProperties.has(property)) {
+        const { shorthandFor } = shorthandProperties.get(property);
+        for (const [longhand] of shorthandFor) {
+          if (priority || !this._priorities.get(longhand)) {
+            properties.delete(longhand);
           }
         }
-        properties.set(property, `${property}: ${value};`);
+      }
+      properties.set(property, { property, value, priority });
+    }
+    const normalizedProperties = normalizeBorderProperties(properties);
+    const parts = [];
+    for (const { property, value, priority } of normalizedProperties.values()) {
+      if (priority) {
+        parts.push(`${property}: ${value} !${priority};`);
+      } else {
+        parts.push(`${property}: ${value};`);
       }
     }
-    return [...properties.values()].join(" ");
+    return parts.join(" ");
   }
 
-  set cssText(value) {
+  set cssText(val) {
     if (this._readonly) {
       const msg = "cssText can not be modified.";
       const name = "NoModificationAllowedError";
@@ -165,7 +177,7 @@ class CSSStyleDeclaration {
     this._setInProgress = true;
     try {
       const valueObj = parseCSS(
-        value,
+        val,
         {
           context: "declarationList",
           parseValue: false
@@ -173,23 +185,52 @@ class CSSStyleDeclaration {
         true
       );
       if (valueObj?.children) {
+        const properties = new Map();
         for (const item of valueObj.children) {
           const {
             important,
             property,
-            value: { value: rawValue }
+            value: { value }
           } = item;
-          const isCustomProperty = property.startsWith("--");
-          if (
-            isCustomProperty ||
-            hasVarFunc(rawValue) ||
-            isValidPropertyValue(property, rawValue)
-          ) {
-            this.setProperty(property, rawValue, important ? "important" : "");
-          } else {
-            this.removeProperty(property);
+          if (typeof property === "string" && typeof value === "string") {
+            const priority = important ? "important" : "";
+            const isCustomProperty = property.startsWith("--");
+            if (isCustomProperty || hasVarFunc(value)) {
+              if (properties.has(property)) {
+                const { priority: itemPriority } = properties.get(property);
+                if (!itemPriority) {
+                  properties.set(property, { property, value, priority });
+                }
+              } else {
+                properties.set(property, { property, value, priority });
+              }
+            } else {
+              const parsedValue = parsePropertyValue(property, value, {
+                globalObject: this._global
+              });
+              if (parsedValue) {
+                if (properties.has(property)) {
+                  const { priority: itemPriority } = properties.get(property);
+                  if (!itemPriority) {
+                    properties.set(property, { property, value, priority });
+                  }
+                } else {
+                  properties.set(property, { property, value, priority });
+                }
+              } else {
+                this.removeProperty(property);
+              }
+            }
           }
         }
+        const parsedProperties = prepareProperties(properties, {
+          globalObject: this._global
+        });
+        for (const [property, item] of parsedProperties) {
+          const { priority, value } = item;
+          this._priorities.set(property, priority);
+          this.setProperty(property, value, priority);
+        }
       }
     } catch {
       return;
@@ -252,8 +293,8 @@ class CSSStyleDeclaration {
       const msg = "1 argument required, but only 0 present.";
       throw new this._global.TypeError(msg);
     }
-    let [index] = args;
-    index = parseInt(index);
+    const [value] = args;
+    const index = parseInt(value);
     if (Number.isNaN(index) || index < 0 || index >= this._length) {
       return "";
     }
@@ -286,121 +327,50 @@ class CSSStyleDeclaration {
   }
 
   /**
-   * @param {string} property
-   * @param {string} value
-   * @param {string?} [priority] - "important" or null
+   * @param {string} prop
+   * @param {string} val
+   * @param {string} prior
    */
-  setProperty(property, value, priority = null) {
+  setProperty(prop, val, prior) {
     if (this._readonly) {
-      const msg = `Property ${property} can not be modified.`;
+      const msg = `Property ${prop} can not be modified.`;
       const name = "NoModificationAllowedError";
       throw new this._global.DOMException(msg, name);
     }
-    value = prepareValue(value, this._global);
+    const value = prepareValue(val, this._global);
     if (value === "") {
-      this[property] = "";
-      this.removeProperty(property);
+      this[prop] = "";
+      this.removeProperty(prop);
       return;
     }
-    const isCustomProperty = property.startsWith("--");
+    const priority = prior === "important" ? "important" : "";
+    const isCustomProperty = prop.startsWith("--");
     if (isCustomProperty) {
-      this._setProperty(property, value, priority);
+      this._setProperty(prop, value, priority);
       return;
     }
-    property = asciiLowercase(property);
+    const property = asciiLowercase(prop);
     if (!allProperties.has(property) && !allExtraProperties.has(property)) {
       return;
     }
-    this[property] = value;
     if (priority) {
       this._priorities.set(property, priority);
     } else {
       this._priorities.delete(property);
     }
+    this[property] = value;
   }
 }
 
 // Internal methods
 Object.defineProperties(CSSStyleDeclaration.prototype, {
-  _shorthandGetter: {
-    /**
-     * @param {string} property
-     * @param {object} shorthandFor
-     */
-    value(property, shorthandFor) {
-      const parts = [];
-      for (const key of shorthandFor.keys()) {
-        const val = this.getPropertyValue(key);
-        if (hasVarFunc(val)) {
-          return "";
-        }
-        if (val !== "") {
-          parts.push(val);
-        }
-      }
-      if (parts.length) {
-        return parts.join(" ");
-      }
-      if (this._values.has(property)) {
-        return this.getPropertyValue(property);
-      }
-      return "";
-    },
-    enumerable: false
-  },
-
-  _implicitGetter: {
-    /**
-     * @param {string} property
-     * @param {Array.<string>} positions
-     */
-    value(property, positions = []) {
-      const parts = [];
-      for (const position of positions) {
-        const val = this.getPropertyValue(`${property}-${position}`);
-        if (val === "" || hasVarFunc(val)) {
-          return "";
-        }
-        parts.push(val);
-      }
-      if (!parts.length) {
-        return "";
-      }
-      switch (positions.length) {
-        case 4: {
-          const [top, right, bottom, left] = parts;
-          if (top === right && top === bottom && right === left) {
-            return top;
-          }
-          if (top !== right && top === bottom && right === left) {
-            return `${top} ${right}`;
-          }
-          if (top !== right && top !== bottom && right === left) {
-            return `${top} ${right} ${bottom}`;
-          }
-          return `${top} ${right} ${bottom} ${left}`;
-        }
-        case 2: {
-          const [x, y] = parts;
-          if (x === y) {
-            return x;
-          }
-          return `${x} ${y}`;
-        }
-        default:
-          return "";
-      }
-    },
-    enumerable: false
-  },
-
   _setProperty: {
     /**
      * @param {string} property
      * @param {string} val
-     * @param {string?} [priority]
+     * @param {string} priority
      */
-    value(property, val, priority = null) {
+    value(property, val, priority) {
       if (typeof val !== "string") {
         return;
       }
@@ -424,12 +394,12 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
         this[this._length] = property;
         this._length++;
       }
-      this._values.set(property, val);
-      if (priority) {
+      if (priority === "important") {
         this._priorities.set(property, priority);
       } else {
         this._priorities.delete(property);
       }
+      this._values.set(property, val);
       if (
         typeof this._onChange === "function" &&
         this.cssText !== originalText &&
@@ -441,178 +411,201 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
     enumerable: false
   },
 
-  _shorthandSetter: {
+  _borderSetter: {
     /**
-     * @param {string} property
-     * @param {string} val
-     * @param {object} shorthandFor
+     * @param {string} prop
+     * @param {object|Array|string} val
+     * @param {string} prior
      */
-    value(property, val, shorthandFor) {
-      val = prepareValue(val, this._global);
-      const obj = parseShorthand(val, shorthandFor);
-      if (!obj) {
-        return;
-      }
-      for (const subprop of Object.keys(obj)) {
-        // In case subprop is an implicit property, this will clear *its*
-        // subpropertiesX.
-        const 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.set(subprop, obj[subprop]);
+    value(prop, val, prior) {
+      const properties = new Map();
+      if (prop === "border") {
+        let priority = "";
+        if (typeof prior === "string") {
+          priority = prior;
+        } else {
+          priority = this._priorities.get(prop) ?? "";
         }
-      }
-      for (const [subprop] of shorthandFor) {
-        if (!Object.hasOwn(obj, subprop)) {
-          this.removeProperty(subprop);
-          this._values.delete(subprop);
+        properties.set(prop, { propery: prop, value: val, priority });
+      } else {
+        for (let i = 0; i < this._length; i++) {
+          const property = this[i];
+          if (borderProperties.has(property)) {
+            const value = this.getPropertyValue(property);
+            const longhandPriority = this._priorities.get(property) ?? "";
+            let priority = longhandPriority;
+            if (prop === property && typeof prior === "string") {
+              priority = prior;
+            }
+            properties.set(property, { property, value, priority });
+          }
         }
       }
-      // 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);
-      const calculated = this._shorthandGetter(property, shorthandFor);
-      if (calculated !== "") {
-        this._setProperty(property, calculated);
+      const parsedProperties = prepareBorderProperties(prop, val, prior, properties, {
+        globalObject: this._global
+      });
+      for (const [property, item] of parsedProperties) {
+        const { priority, value } = item;
+        this._setProperty(property, value, priority);
       }
-      return obj;
     },
     enumerable: false
   },
 
-  // Companion to shorthandSetter, but for the individual parts which takes
-  // position value in the middle.
-  _midShorthandSetter: {
+  _flexBoxSetter: {
     /**
-     * @param {string} property
+     * @param {string} prop
      * @param {string} val
-     * @param {object} shorthandFor
-     * @param {Array.<string>} positions
+     * @param {string} prior
+     * @param {string} shorthandProperty
      */
-    value(property, val, shorthandFor, positions = []) {
-      val = prepareValue(val, this._global);
-      const obj = this._shorthandSetter(property, val, shorthandFor);
-      if (!obj) {
+    value(prop, val, prior, shorthandProperty) {
+      if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
         return;
       }
-      for (const position of positions) {
-        this.removeProperty(`${property}-${position}`);
-        this._values.set(`${property}-${position}`, val);
+      const shorthandPriority = this._priorities.get(shorthandProperty);
+      this.removeProperty(shorthandProperty);
+      let priority = "";
+      if (typeof prior === "string") {
+        priority = prior;
+      } else {
+        priority = this._priorities.get(prop) ?? "";
+      }
+      this.removeProperty(prop);
+      if (shorthandPriority && priority) {
+        this._setProperty(prop, val);
+      } else {
+        this._setProperty(prop, val, priority);
+      }
+      if (val && !hasVarFunc(val)) {
+        const longhandValues = [];
+        const shorthandItem = shorthandProperties.get(shorthandProperty);
+        let hasGlobalKeyword = false;
+        for (const [longhandProperty] of shorthandItem.shorthandFor) {
+          if (longhandProperty === prop) {
+            if (isGlobalKeyword(val)) {
+              hasGlobalKeyword = true;
+            }
+            longhandValues.push(val);
+          } else {
+            const longhandValue = this.getPropertyValue(longhandProperty);
+            const longhandPriority = this._priorities.get(longhandProperty) ?? "";
+            if (!longhandValue || longhandPriority !== priority) {
+              break;
+            }
+            if (isGlobalKeyword(longhandValue)) {
+              hasGlobalKeyword = true;
+            }
+            longhandValues.push(longhandValue);
+          }
+        }
+        if (longhandValues.length === shorthandItem.shorthandFor.size) {
+          if (hasGlobalKeyword) {
+            const [firstValue, ...restValues] = longhandValues;
+            if (restValues.every((value) => value === firstValue)) {
+              this._setProperty(shorthandProperty, firstValue, priority);
+            }
+          } else {
+            const parsedValue = shorthandItem.parse(longhandValues.join(" "));
+            const shorthandValue = Object.values(parsedValue).join(" ");
+            this._setProperty(shorthandProperty, shorthandValue, priority);
+          }
+        }
       }
     },
     enumerable: false
   },
 
-  _implicitSetter: {
+  _positionShorthandSetter: {
     /**
-     * @param {string} prefix
-     * @param {string} part
-     * @param {string} val
-     * @param {Function} isValid
-     * @param {Function} parser
-     * @param {Array.<string>} positions
+     * @param {string} prop
+     * @param {Array|string} val
+     * @param {string} prior
      */
-    value(prefix, part, val, isValid, parser, positions = []) {
-      val = prepareValue(val, this._global);
-      if (typeof val !== "string") {
+    value(prop, val, prior) {
+      if (!shorthandProperties.has(prop)) {
         return;
       }
-      part ||= "";
-      if (part) {
-        part = `-${part}`;
-      }
-      const shorthandProp = `${prefix}${part}`;
-      let parts = [];
-      if (val === "") {
-        parts.push(val);
-      } else if (isValidPropertyValue(shorthandProp, val)) {
-        parts.push(...splitValue(val));
-      }
-      if (!parts.length || parts.length > positions.length || !parts.every(isValid)) {
+      const shorthandValues = [];
+      if (Array.isArray(val)) {
+        shorthandValues.push(...val);
+      } else if (typeof val === "string") {
+        shorthandValues.push(val);
+      } else {
         return;
       }
-      parts = parts.map((p) => parser(p));
-      this._setProperty(shorthandProp, parts.join(" "));
-      switch (positions.length) {
-        case 4:
-          if (parts.length === 1) {
-            parts.push(parts[0], parts[0], parts[0]);
-          } else if (parts.length === 2) {
-            parts.push(parts[0], parts[1]);
-          } else if (parts.length === 3) {
-            parts.push(parts[1]);
-          }
-          break;
-        case 2:
-          if (parts.length === 1) {
-            parts.push(parts[0]);
+      let priority = "";
+      if (typeof prior === "string") {
+        priority = prior;
+      } else {
+        priority = this._priorities.get(prop) ?? "";
+      }
+      const { position, shorthandFor } = shorthandProperties.get(prop);
+      let hasPriority = false;
+      for (const [longhandProperty, longhandItem] of shorthandFor) {
+        const { position: longhandPosition } = longhandItem;
+        const longhandValue = getPositionValue(shorthandValues, longhandPosition);
+        if (priority) {
+          this._setProperty(longhandProperty, longhandValue, priority);
+        } else {
+          const longhandPriority = this._priorities.get(longhandProperty) ?? "";
+          if (longhandPriority) {
+            hasPriority = true;
+          } else {
+            this._setProperty(longhandProperty, longhandValue, priority);
           }
-          break;
-        default:
+        }
       }
-      for (let i = 0; i < positions.length; i++) {
-        const property = `${prefix}-${positions[i]}${part}`;
-        this.removeProperty(property);
-        this._values.set(property, parts[i]);
+      if (hasPriority) {
+        this.removeProperty(prop);
+      } else {
+        const shorthandValue = getPositionValue(shorthandValues, position);
+        this._setProperty(prop, shorthandValue, priority);
       }
     },
     enumerable: false
   },
 
-  // Companion to implicitSetter, but for the individual parts.
-  // This sets the individual value, and checks to see if all sub-parts are
-  // set. If so, it sets the shorthand version and removes the individual parts
-  // from the cssText.
-  _subImplicitSetter: {
+  _positionLonghandSetter: {
     /**
-     * @param {string} prefix
-     * @param {string} part
+     * @param {string} prop
      * @param {string} val
-     * @param {Function} isValid
-     * @param {Function} parser
-     * @param {Array.<string>} positions
+     * @param {string} prior
+     * @param {string} shorthandProperty
      */
-    value(prefix, part, val, isValid, parser, positions = []) {
-      val = prepareValue(val, this._global);
-      if (typeof val !== "string" || !isValid(val)) {
+    value(prop, val, prior, shorthandProperty) {
+      if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
         return;
       }
-      val = parser(val);
-      const property = `${prefix}-${part}`;
-      this._setProperty(property, val);
-      const combinedPriority = this.getPropertyPriority(prefix);
-      const subparts = [];
-      for (const position of positions) {
-        subparts.push(`${prefix}-${position}`);
+      const shorthandPriority = this._priorities.get(shorthandProperty);
+      this.removeProperty(shorthandProperty);
+      let priority = "";
+      if (typeof prior === "string") {
+        priority = prior;
+      } else {
+        priority = this._priorities.get(prop) ?? "";
       }
-      const parts = subparts.map((subpart) => this._values.get(subpart));
-      const priorities = subparts.map((subpart) => this.getPropertyPriority(subpart));
-      const [priority] = priorities;
-      // Combine into a single property if all values are set and have the same
-      // priority.
-      if (
-        priority === combinedPriority &&
-        parts.every((p) => p) &&
-        priorities.every((p) => p === priority)
-      ) {
-        for (let i = 0; i < subparts.length; i++) {
-          this.removeProperty(subparts[i]);
-          this._values.set(subparts[i], parts[i]);
-        }
-        this._setProperty(prefix, parts.join(" "), priority);
+      this.removeProperty(prop);
+      if (shorthandPriority && priority) {
+        this._setProperty(prop, val);
       } else {
-        this.removeProperty(prefix);
-        for (let i = 0; i < subparts.length; i++) {
-          // The property we're setting won't be important, the rest will either
-          // keep their priority or inherit it from the combined property
-          const subPriority = subparts[i] === property ? "" : priorities[i] || combinedPriority;
-          this._setProperty(subparts[i], parts[i], subPriority);
+        this._setProperty(prop, val, priority);
+      }
+      if (val && !hasVarFunc(val)) {
+        const longhandValues = [];
+        const { shorthandFor, position: shorthandPosition } =
+          shorthandProperties.get(shorthandProperty);
+        for (const [longhandProperty] of shorthandFor) {
+          const longhandValue = this.getPropertyValue(longhandProperty);
+          const longhandPriority = this._priorities.get(longhandProperty) ?? "";
+          if (!longhandValue || longhandPriority !== priority) {
+            return;
+          }
+          longhandValues.push(longhandValue);
+        }
+        if (longhandValues.length === shorthandFor.size) {
+          const replacedValue = getPositionValue(longhandValues, shorthandPosition);
+          this._setProperty(shorthandProperty, replacedValue);
         }
       }
     },
@@ -624,7 +617,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
 Object.defineProperties(CSSStyleDeclaration.prototype, generatedProperties);
 
 // Additional properties
-[...allProperties, ...allExtraProperties].forEach(function (property) {
+[...allProperties, ...allExtraProperties].forEach((property) => {
   if (!implementedProperties.has(property)) {
     const declaration = getPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
@@ -637,4 +630,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, generatedProperties);
   }
 });
 
-exports.CSSStyleDeclaration = CSSStyleDeclaration;
+module.exports = {
+  CSSStyleDeclaration,
+  propertyList: Object.fromEntries(implementedProperties)
+};