cssstyle 5.3.6 → 6.0.0

package/lib/CSSStyleDeclaration.js

@@ -4,9 +4,7 @@
  */
 "use strict";
 
-const allProperties = require("./generated/allProperties");
-const implementedProperties = require("./generated/implementedProperties");
-const generatedProperties = require("./generated/properties");
+const propertyDescriptors = require("./generated/propertyDescriptors");
 const {
   borderProperties,
   getPositionValue,
@@ -15,16 +13,7 @@ const {
   prepareProperties,
   shorthandProperties
 } = require("./normalize");
-const {
-  hasVarFunc,
-  isGlobalKeyword,
-  parseCSS,
-  parsePropertyValue,
-  prepareValue
-} = require("./parsers");
-const allExtraProperties = require("./utils/allExtraProperties");
-const { dashedToCamelCase } = require("./utils/camelize");
-const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
+const { hasVarFunc, isGlobalKeyword, parseCSS, parsePropertyValue, prepareValue } = require("./parsers");
 const { asciiLowercase } = require("./utils/strings");
 
 /**
@@ -32,88 +21,38 @@ const { asciiLowercase } = require("./utils/strings");
  */
 class CSSStyleDeclaration {
   /**
-   * @param {Function} onChangeCallback
-   * @param {object} [opt]
-   * @param {object} [opt.context] - Window, Element or CSSRule.
+   * Creates a new CSSStyleDeclaration instance.
+   *
+   * @param {Function} [onChangeCallback] - Callback triggered when style changes.
+   * @param {object} [opt] - Options.
+   * @param {object} [opt.context] - The context object (Window, Element, or CSSRule).
    */
-  constructor(onChangeCallback, opt = {}) {
-    // Make constructor and internals non-enumerable.
-    Object.defineProperties(this, {
-      constructor: {
-        enumerable: false,
-        writable: true
-      },
-
-      // Window
-      _global: {
-        value: globalThis,
-        enumerable: false,
-        writable: true
-      },
-
-      // Element
-      _ownerNode: {
-        value: null,
-        enumerable: false,
-        writable: true
-      },
-
-      // CSSRule
-      _parentNode: {
-        value: null,
-        enumerable: false,
-        writable: true
-      },
-
-      _onChange: {
-        value: null,
-        enumerable: false,
-        writable: true
-      },
-
-      _values: {
-        value: new Map(),
-        enumerable: false,
-        writable: true
-      },
+  constructor(onChangeCallback, { context } = {}) {
+    // Internals for jsdom
+    this._global = globalThis;
+    this._onChange = onChangeCallback;
+
+    // Internals for CSS declaration block
+    // @see https://drafts.csswg.org/cssom/#css-declaration-blocks
+    this._computed = false;
+    this._ownerNode = null;
+    this._parentRule = null;
+    this._readonly = false;
+    this._updating = false;
+
+    // Other internals
+    this._length = 0;
+    this._propertyIndices = new Map();
+    this._priorities = new Map();
+    this._values = new Map();
 
-      _priorities: {
-        value: new Map(),
-        enumerable: false,
-        writable: true
-      },
-
-      _length: {
-        value: 0,
-        enumerable: false,
-        writable: true
-      },
-
-      _computed: {
-        value: false,
-        enumerable: false,
-        writable: true
-      },
-
-      _readonly: {
-        value: false,
-        enumerable: false,
-        writable: true
-      },
-
-      _setInProgress: {
-        value: false,
-        enumerable: false,
-        writable: true
-      }
-    });
-
-    const { context } = opt;
     if (context) {
       if (typeof context.getComputedStyle === "function") {
         this._global = context;
         this._computed = true;
-        this._readonly = true;
+        // FIXME: The `_readonly` flag should initially be `false` to be editable,
+        // but should eventually be set to `true`.
+        // this._readonly = true;
       } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
         this._global = context.ownerDocument.defaultView;
         this._ownerNode = context;
@@ -126,11 +65,13 @@ class CSSStyleDeclaration {
         }
       }
     }
-    if (typeof onChangeCallback === "function") {
-      this._onChange = onChangeCallback;
-    }
   }
 
+  /**
+   * Returns the textual representation of the declaration block.
+   *
+   * @returns {string} The serialized CSS text.
+   */
   get cssText() {
     if (this._computed) {
       return "";
@@ -162,28 +103,27 @@ class CSSStyleDeclaration {
     return parts.join(" ");
   }
 
-  set cssText(val) {
+  /**
+   * Sets the textual representation of the declaration block.
+   * This clears all existing properties and parses the new CSS text.
+   *
+   * @param {string} text - The new CSS text.
+   */
+  set cssText(text) {
     if (this._readonly) {
       const msg = "cssText can not be modified.";
       const name = "NoModificationAllowedError";
       throw new this._global.DOMException(msg, name);
     }
-    Array.prototype.splice.call(this, 0, this._length);
+    this._clearIndexedProperties();
     this._values.clear();
     this._priorities.clear();
-    if (this._parentRule || (this._ownerNode && this._setInProgress)) {
+    if (this._parentRule || (this._ownerNode && this._updating)) {
       return;
     }
-    this._setInProgress = true;
     try {
-      const valueObj = parseCSS(
-        val,
-        {
-          context: "declarationList",
-          parseValue: false
-        },
-        true
-      );
+      this._updating = true;
+      const valueObj = parseCSS(text, { context: "declarationList", parseValue: false });
       if (valueObj?.children) {
         const properties = new Map();
         let shouldSkipNext = false;
@@ -217,9 +157,7 @@ class CSSStyleDeclaration {
                 properties.set(property, { property, value, priority });
               }
             } else {
-              const parsedValue = parsePropertyValue(property, value, {
-                globalObject: this._global
-              });
+              const parsedValue = parsePropertyValue(property, value);
               if (parsedValue) {
                 if (properties.has(property)) {
                   const { priority: itemPriority } = properties.get(property);
@@ -235,9 +173,7 @@ class CSSStyleDeclaration {
             }
           }
         }
-        const parsedProperties = prepareProperties(properties, {
-          globalObject: this._global
-        });
+        const parsedProperties = prepareProperties(properties);
         for (const [property, item] of parsedProperties) {
           const { priority, value } = item;
           this._priorities.set(property, priority);
@@ -246,49 +182,65 @@ class CSSStyleDeclaration {
       }
     } catch {
       return;
+    } finally {
+      this._updating = false;
     }
-    this._setInProgress = false;
-    if (typeof this._onChange === "function") {
+    if (this._onChange) {
       this._onChange(this.cssText);
     }
   }
 
+  /**
+   * Returns the number of properties in the declaration block.
+   *
+   * @returns {number} The property count.
+   */
   get length() {
     return this._length;
   }
 
-  // This deletes indices if the new length is less then the current length.
-  // If the new length is more, it does nothing, the new indices will be
-  // undefined until set.
-  set length(len) {
-    for (let i = len; i < this._length; i++) {
-      delete this[i];
-    }
-    this._length = len;
-  }
-
-  // Readonly
+  /**
+   * Returns the CSSRule that is the parent of this declaration block.
+   *
+   * @returns {object|null} The parent CSSRule or null.
+   */
   get parentRule() {
     return this._parentRule;
   }
 
+  /**
+   * Alias for the "float" property.
+   *
+   * @returns {string} The value of the "float" property.
+   */
   get cssFloat() {
     return this.getPropertyValue("float");
   }
 
+  /**
+   * Sets the "float" property.
+   *
+   * @param {string} value - The new value for "float".
+   */
   set cssFloat(value) {
     this._setProperty("float", value);
   }
 
   /**
-   * @param {string} property
+   * Returns the priority of the specified property (e.g. "important").
+   *
+   * @param {string} property - The property name.
+   * @returns {string} The priority string, or empty string if not set.
    */
   getPropertyPriority(property) {
     return this._priorities.get(property) || "";
   }
 
   /**
-   * @param {string} property
+   * Returns the value of the specified property.
+   *
+   * @param {string} property - The property name.
+   * @returns {string} The property value, or empty string if not set.
    */
   getPropertyValue(property) {
     if (this._values.has(property)) {
@@ -298,7 +250,10 @@ class CSSStyleDeclaration {
   }
 
   /**
-   * @param {...number} args
+   * Returns the property name at the specified index.
+   *
+   * @param {...number} args - The index (only the first argument is used).
+   * @returns {string} The property name, or empty string if index is invalid.
    */
   item(...args) {
     if (!args.length) {
@@ -314,7 +269,10 @@ class CSSStyleDeclaration {
   }
 
   /**
-   * @param {string} property
+   * Removes the specified property from the declaration block.
+   *
+   * @param {string} property - The property name to remove.
+   * @returns {string} The value of the removed property.
    */
   removeProperty(property) {
     if (this._readonly) {
@@ -328,10 +286,10 @@ class CSSStyleDeclaration {
     const prevValue = this._values.get(property);
     this._values.delete(property);
     this._priorities.delete(property);
-    const index = Array.prototype.indexOf.call(this, property);
+    const index = this._getIndexOf(property);
     if (index >= 0) {
-      Array.prototype.splice.call(this, index, 1);
-      if (typeof this._onChange === "function") {
+      this._removeIndexedProperty(index);
+      if (this._onChange) {
         this._onChange(this.cssText);
       }
     }
@@ -339,30 +297,34 @@ class CSSStyleDeclaration {
   }
 
   /**
-   * @param {string} prop
-   * @param {string} val
-   * @param {string} prior
+   * Sets a property value with an optional priority.
+   *
+   * @param {string} property - The property name.
+   * @param {string} value - The property value.
+   * @param {string} [priority=""] - The priority (e.g. "important").
    */
-  setProperty(prop, val, prior) {
+  setProperty(property, value, priority = "") {
     if (this._readonly) {
-      const msg = `Property ${prop} can not be modified.`;
+      const msg = `Property ${property} can not be modified.`;
       const name = "NoModificationAllowedError";
       throw new this._global.DOMException(msg, name);
     }
-    const value = prepareValue(val, this._global);
+    value = prepareValue(value);
     if (value === "") {
-      this[prop] = "";
-      this.removeProperty(prop);
+      if (Object.hasOwn(propertyDescriptors, property)) {
+        // TODO: Refactor handlers to not require `.call()`.
+        propertyDescriptors[property].set.call(this, value);
+      }
+      this.removeProperty(property);
       return;
     }
-    const priority = prior === "important" ? "important" : "";
-    const isCustomProperty = prop.startsWith("--");
-    if (isCustomProperty) {
-      this._setProperty(prop, value, priority);
+    // Custom property
+    if (property.startsWith("--")) {
+      this._setProperty(property, value, priority);
       return;
     }
-    const property = asciiLowercase(prop);
-    if (!allProperties.has(property) && !allExtraProperties.has(property)) {
+    property = asciiLowercase(property);
+    if (!Object.hasOwn(propertyDescriptors, property)) {
       return;
     }
     if (priority) {
@@ -370,279 +332,282 @@ class CSSStyleDeclaration {
     } else {
       this._priorities.delete(property);
     }
-    this[property] = value;
+    propertyDescriptors[property].set.call(this, value);
   }
-}
 
-// Internal methods
-Object.defineProperties(CSSStyleDeclaration.prototype, {
-  _setProperty: {
-    /**
-     * @param {string} property
-     * @param {string} val
-     * @param {string} priority
-     */
-    value(property, val, priority) {
-      if (typeof val !== "string") {
-        return;
-      }
-      if (val === "") {
-        this.removeProperty(property);
-        return;
-      }
-      let originalText = "";
-      if (typeof this._onChange === "function" && !this._setInProgress) {
-        originalText = this.cssText;
-      }
-      if (this._values.has(property)) {
-        const index = Array.prototype.indexOf.call(this, property);
-        // The property already exists but is not indexed into `this` so add it.
-        if (index < 0) {
-          this[this._length] = property;
-          this._length++;
-        }
-      } else {
-        // New property.
-        this[this._length] = property;
-        this._length++;
-      }
-      if (priority === "important") {
-        this._priorities.set(property, priority);
-      } else {
-        this._priorities.delete(property);
-      }
-      this._values.set(property, val);
-      if (
-        typeof this._onChange === "function" &&
-        !this._setInProgress &&
-        this.cssText !== originalText
-      ) {
-        this._onChange(this.cssText);
-      }
-    },
-    enumerable: false
-  },
+  /**
+   * Clears all indexed properties, properties indices and resets length to 0.
+   *
+   * @private
+   */
+  _clearIndexedProperties() {
+    this._propertyIndices.clear();
+    for (let i = 0; i < this._length; i++) {
+      delete this[i];
+    }
+    this._length = 0;
+  }
 
-  _borderSetter: {
-    /**
-     * @param {string} prop
-     * @param {object|Array|string} val
-     * @param {string} prior
-     */
-    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) ?? "";
-        }
-        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 });
-          }
-        }
-      }
-      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);
-      }
-    },
-    enumerable: false
-  },
+  /**
+   * Removes an indexed property at the specified index, shifts others, and updates indices.
+   *
+   * @private
+   * @param {number} index - The index of the property to remove.
+   */
+  _removeIndexedProperty(index) {
+    this._propertyIndices.delete(this[index]);
+    for (let i = index; i < this._length - 1; i++) {
+      const property = this[i + 1];
+      this[i] = property;
+      this._propertyIndices.set(property, i);
+    }
+    delete this[this._length - 1];
+    this._length--;
+  }
 
-  _flexBoxSetter: {
-    /**
-     * @param {string} prop
-     * @param {string} val
-     * @param {string} prior
-     * @param {string} shorthandProperty
-     */
-    value(prop, val, prior, shorthandProperty) {
-      if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
-        return;
-      }
-      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
-  },
+  /**
+   * Returns the index of the specified property.
+   *
+   * @private
+   * @param {string} property - The property name to search for.
+   * @returns {number} The index of the property, or -1 if not found.
+   */
+  _getIndexOf(property) {
+    return this._propertyIndices.get(property) ?? -1;
+  }
 
-  _positionShorthandSetter: {
-    /**
-     * @param {string} prop
-     * @param {Array|string} val
-     * @param {string} prior
-     */
-    value(prop, val, prior) {
-      if (!shorthandProperties.has(prop)) {
-        return;
-      }
-      const shorthandValues = [];
-      if (Array.isArray(val)) {
-        shorthandValues.push(...val);
-      } else if (typeof val === "string") {
-        shorthandValues.push(val);
-      } else {
-        return;
-      }
-      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);
+  /**
+   * Sets a property and update indices.
+   *
+   * @private
+   * @param {string} property - The property name.
+   * @param {string} value - The property value.
+   * @param {string} priority - The priority.
+   */
+  _setProperty(property, value, priority) {
+    if (typeof value !== "string") {
+      return;
+    }
+    if (value === "") {
+      this.removeProperty(property);
+      return;
+    }
+    let originalText = "";
+    if (this._onChange && !this._updating) {
+      originalText = this.cssText;
+    }
+    if (!this._values.has(property)) {
+      // New property.
+      this[this._length] = property;
+      this._propertyIndices.set(property, this._length);
+      this._length++;
+    }
+    if (priority === "important") {
+      this._priorities.set(property, priority);
+    } else {
+      this._priorities.delete(property);
+    }
+    this._values.set(property, value);
+    if (this._onChange && !this._updating && this.cssText !== originalText) {
+      this._onChange(this.cssText);
+    }
+  }
+
+  /**
+   * Helper to handle border property expansion.
+   *
+   * @private
+   * @param {string} property - The property name (e.g. "border").
+   * @param {object|Array|string} value - The value to set.
+   * @param {string} priority - The priority.
+   */
+  _borderSetter(property, value, priority) {
+    const properties = new Map();
+    if (typeof priority !== "string") {
+      priority = this._priorities.get(property) ?? "";
+    }
+    if (property === "border") {
+      properties.set(property, { propery: property, value, priority });
+    } else {
+      for (let i = 0; i < this._length; i++) {
+        const itemProperty = this[i];
+        if (borderProperties.has(itemProperty)) {
+          const itemValue = this.getPropertyValue(itemProperty);
+          const longhandPriority = this._priorities.get(itemProperty) ?? "";
+          let itemPriority = longhandPriority;
+          if (itemProperty === property) {
+            itemPriority = priority;
           }
+          properties.set(itemProperty, {
+            property: itemProperty,
+            value: itemValue,
+            priority: itemPriority
+          });
         }
       }
-      if (hasPriority) {
-        this.removeProperty(prop);
-      } else {
-        const shorthandValue = getPositionValue(shorthandValues, position);
-        this._setProperty(prop, shorthandValue, priority);
-      }
-    },
-    enumerable: false
-  },
+    }
+    const parsedProperties = prepareBorderProperties(property, value, priority, properties);
+    for (const [itemProperty, item] of parsedProperties) {
+      const { priority: itemPriority, value: itemValue } = item;
+      this._setProperty(itemProperty, itemValue, itemPriority);
+    }
+  }
 
-  _positionLonghandSetter: {
-    /**
-     * @param {string} prop
-     * @param {string} val
-     * @param {string} prior
-     * @param {string} shorthandProperty
-     */
-    value(prop, val, prior, shorthandProperty) {
-      if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
-        return;
-      }
-      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 { shorthandFor, position: shorthandPosition } =
-          shorthandProperties.get(shorthandProperty);
-        for (const [longhandProperty] of shorthandFor) {
+  /**
+   * Helper to handle flexbox shorthand expansion.
+   *
+   * @private
+   * @param {string} property - The property name.
+   * @param {string} value - The property value.
+   * @param {string} priority - The priority.
+   * @param {string} shorthandProperty - The shorthand property name.
+   */
+  _flexBoxSetter(property, value, priority, shorthandProperty) {
+    if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
+      return;
+    }
+    const shorthandPriority = this._priorities.get(shorthandProperty);
+    this.removeProperty(shorthandProperty);
+    if (typeof priority !== "string") {
+      priority = this._priorities.get(property) ?? "";
+    }
+    this.removeProperty(property);
+    if (shorthandPriority && priority) {
+      this._setProperty(property, value);
+    } else {
+      this._setProperty(property, value, priority);
+    }
+    if (value && !hasVarFunc(value)) {
+      const longhandValues = [];
+      const shorthandItem = shorthandProperties.get(shorthandProperty);
+      let hasGlobalKeyword = false;
+      for (const [longhandProperty] of shorthandItem.shorthandFor) {
+        if (longhandProperty === property) {
+          if (isGlobalKeyword(value)) {
+            hasGlobalKeyword = true;
+          }
+          longhandValues.push(value);
+        } else {
           const longhandValue = this.getPropertyValue(longhandProperty);
           const longhandPriority = this._priorities.get(longhandProperty) ?? "";
           if (!longhandValue || longhandPriority !== priority) {
-            return;
+            break;
+          }
+          if (isGlobalKeyword(longhandValue)) {
+            hasGlobalKeyword = true;
           }
           longhandValues.push(longhandValue);
         }
-        if (longhandValues.length === shorthandFor.size) {
-          const replacedValue = getPositionValue(longhandValues, shorthandPosition);
-          this._setProperty(shorthandProperty, replacedValue);
+      }
+      if (longhandValues.length === shorthandItem.shorthandFor.size) {
+        if (hasGlobalKeyword) {
+          const [firstValue, ...restValues] = longhandValues;
+          if (restValues.every((val) => val === 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
+    }
   }
-});
 
-// Properties
-Object.defineProperties(CSSStyleDeclaration.prototype, generatedProperties);
+  /**
+   * Helper to handle position shorthand expansion.
+   *
+   * @private
+   * @param {string} property - The property name.
+   * @param {Array|string} value - The property value.
+   * @param {string} priority - The priority.
+   */
+  _positionShorthandSetter(property, value, priority) {
+    if (!shorthandProperties.has(property)) {
+      return;
+    }
+    const shorthandValues = [];
+    if (Array.isArray(value)) {
+      shorthandValues.push(...value);
+    } else if (typeof value === "string") {
+      shorthandValues.push(value);
+    } else {
+      return;
+    }
+    if (typeof priority !== "string") {
+      priority = this._priorities.get(property) ?? "";
+    }
+    const { position, shorthandFor } = shorthandProperties.get(property);
+    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);
+        }
+      }
+    }
+    if (hasPriority) {
+      this.removeProperty(property);
+    } else {
+      const shorthandValue = getPositionValue(shorthandValues, position);
+      this._setProperty(property, shorthandValue, priority);
+    }
+  }
 
-// Additional properties
-[...allProperties, ...allExtraProperties].forEach((property) => {
-  if (!implementedProperties.has(property)) {
-    const declaration = getPropertyDescriptor(property);
-    Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
-    const camel = dashedToCamelCase(property);
-    Object.defineProperty(CSSStyleDeclaration.prototype, camel, declaration);
-    if (/^webkit[A-Z]/.test(camel)) {
-      const pascal = camel.replace(/^webkit/, "Webkit");
-      Object.defineProperty(CSSStyleDeclaration.prototype, pascal, declaration);
+  /**
+   * Helper to handle position longhand updates affecting shorthands.
+   *
+   * @private
+   * @param {string} property - The property name.
+   * @param {string} value - The property value.
+   * @param {string} priority - The priority.
+   * @param {string} shorthandProperty - The shorthand property name.
+   */
+  _positionLonghandSetter(property, value, priority, shorthandProperty) {
+    if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
+      return;
+    }
+    const shorthandPriority = this._priorities.get(shorthandProperty);
+    this.removeProperty(shorthandProperty);
+    if (typeof priority !== "string") {
+      priority = this._priorities.get(property) ?? "";
+    }
+    this.removeProperty(property);
+    if (shorthandPriority && priority) {
+      this._setProperty(property, value);
+    } else {
+      this._setProperty(property, value, priority);
+    }
+    if (value && !hasVarFunc(value)) {
+      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);
+      }
     }
   }
-});
+}
+
+// TODO: Remove once the CSSStyleDeclaration is fully spec-compliant.
+// @see https://github.com/jsdom/cssstyle/issues/255#issuecomment-3630183207
+Object.defineProperties(CSSStyleDeclaration.prototype, propertyDescriptors);
 
 module.exports = {
-  CSSStyleDeclaration,
-  propertyList: Object.fromEntries(implementedProperties)
+  CSSStyleDeclaration
 };