Remove properties from CSSStyleDeclaration

Author: asamuzaK

lib/CSSStyleDeclaration.js

@@ -1,8 +1,6 @@
 "use strict";
 
 const allProperties = require("./generated/allProperties");
-const implementedProperties = require("./generated/implementedProperties");
-const generatedProperties = require("./generated/properties");
 const {
   borderProperties,
   getPositionValue,
@@ -19,8 +17,6 @@ const {
   prepareValue
 } = require("./parsers");
 const allExtraProperties = require("./utils/allExtraProperties");
-const { dashedToCamelCase } = require("./utils/camelize");
-const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
 const { asciiLowercase } = require("./utils/strings");
 
 /**
@@ -118,6 +114,9 @@ class CSSStyleDeclaration {
       } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
         this._global = context.ownerDocument.defaultView;
         this._ownerNode = context;
+        if (typeof opt.onChange === "function") {
+          this._onChange = opt.onChange;
+        }
       } else if (Object.hasOwn(context, "parentRule")) {
         this._parentRule = context;
         // Find Window from the owner node of the StyleSheet.
@@ -127,10 +126,6 @@ class CSSStyleDeclaration {
         }
       }
     }
-    const { onChange } = opt;
-    if (typeof onChange === "function") {
-      this._onChange = onChange;
-    }
     if (!Object.hasOwn(opt, "format")) {
       opt.format = "specifiedValue";
     }
@@ -263,28 +258,6 @@ class CSSStyleDeclaration {
     this._length = len;
   }
 
-  // Readonly
-  get parentRule() {
-    return this._parentRule;
-  }
-
-  /**
-   * @param {string} property
-   */
-  getPropertyPriority(property) {
-    return this._priorities.get(property) || "";
-  }
-
-  /**
-   * @param {string} property
-   */
-  getPropertyValue(property) {
-    if (this._values.has(property)) {
-      return this._values.get(property).toString();
-    }
-    return "";
-  }
-
   /**
    * @param {...number} args
    */
@@ -304,26 +277,18 @@ class CSSStyleDeclaration {
   /**
    * @param {string} property
    */
-  removeProperty(property) {
-    if (this._readonly) {
-      const msg = `Property ${property} can not be modified.`;
-      const name = "NoModificationAllowedError";
-      throw new this._global.DOMException(msg, name);
-    }
-    if (!this._values.has(property)) {
-      return "";
-    }
-    const prevValue = this._values.get(property);
-    this._values.delete(property);
-    this._priorities.delete(property);
-    const index = Array.prototype.indexOf.call(this, property);
-    if (index >= 0) {
-      Array.prototype.splice.call(this, index, 1);
-      if (typeof this._onChange === "function") {
-        this._onChange(this.cssText);
-      }
+  getPropertyValue(property) {
+    if (this._values.has(property)) {
+      return this._values.get(property).toString();
     }
-    return prevValue;
+    return "";
+  }
+
+  /**
+   * @param {string} property
+   */
+  getPropertyPriority(property) {
+    return this._priorities.get(property) || "";
   }
 
   /**
@@ -360,6 +325,36 @@ class CSSStyleDeclaration {
     }
     this[property] = value;
   }
+
+  /**
+   * @param {string} property
+   */
+  removeProperty(property) {
+    if (this._readonly) {
+      const msg = `Property ${property} can not be modified.`;
+      const name = "NoModificationAllowedError";
+      throw new this._global.DOMException(msg, name);
+    }
+    if (!this._values.has(property)) {
+      return "";
+    }
+    const prevValue = this._values.get(property);
+    this._values.delete(property);
+    this._priorities.delete(property);
+    const index = Array.prototype.indexOf.call(this, property);
+    if (index >= 0) {
+      Array.prototype.splice.call(this, index, 1);
+      if (typeof this._onChange === "function") {
+        this._onChange(this.cssText);
+      }
+    }
+    return prevValue;
+  }
+
+  // Readonly
+  get parentRule() {
+    return this._parentRule;
+  }
 }
 
 // Internal methods
@@ -614,23 +609,6 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
   }
 });
 
-// Properties
-Object.defineProperties(CSSStyleDeclaration.prototype, generatedProperties);
-
-// 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);
-    }
-  }
-});
-
 module.exports = {
   CSSStyleDeclaration
 };

lib/normalize.js

@@ -513,7 +513,11 @@ exports.prepareBorderProperties = (property, value, priority, properties, opt =
         const longhandProperty = `${prop1}-${position}-${prop2}`;
         const longhandItem = getPropertyItem(longhandProperty, properties);
         if (propertyValue) {
-          positionItem.value = replaceBorderShorthandValue(propertyValue, positionItem.value, parseOpt);
+          positionItem.value = replaceBorderShorthandValue(
+            propertyValue,
+            positionItem.value,
+            parseOpt
+          );
         } else {
           positionItem.value = "";
         }
@@ -651,9 +655,7 @@ exports.prepareBorderProperties = (property, value, priority, properties, opt =
       const positionItem = getPropertyItem(positionProperty, properties);
       if (nameItem.value) {
         for (const positionValue of Object.values(value)) {
-          if (
-            !matchesBorderShorthandValue(property, positionValue, nameItem.value, parseOpt)
-          ) {
+          if (!matchesBorderShorthandValue(property, positionValue, nameItem.value, parseOpt)) {
             nameItem.value = "";
             break;
           }