Split into CSSStyleDeclaration and CSSStyleProperties

Author: asamuzaK

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 npm-debug.log
-lib/generated/implementedProperties.js
 lib/generated/properties.js
+lib/generated/propertyList.js

lib/CSSStyleDeclaration.js

@@ -4,13 +4,11 @@
  */
 "use strict";
 
-const allProperties = require("./generated/allProperties");
-const implementedProperties = require("./generated/implementedProperties");
-const generatedProperties = require("./generated/properties");
+const propertyList = require("./generated/propertyList");
 const {
   borderProperties,
   getPositionValue,
-  normalizeBorderProperties,
+  normalizeProperties,
   prepareBorderProperties,
   prepareProperties,
   shorthandProperties
@@ -22,28 +20,21 @@ const {
   parsePropertyValue,
   prepareValue
 } = require("./parsers");
-const allExtraProperties = require("./utils/allExtraProperties");
-const { dashedToCamelCase } = require("./utils/camelize");
-const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
 const { asciiLowercase } = require("./utils/strings");
 
 /**
  * @see https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface
  */
 class CSSStyleDeclaration {
   /**
-   * @param {Function} onChangeCallback
-   * @param {object} [opt]
-   * @param {object} [opt.context] - Window, Element or CSSRule.
+   * @param {object} globalObject - Window
+   * @param {object} opt - Options
+   * @param {object} opt.context - Element or CSSStyleRule
+   * @param {Function} opt.onChange - Callback when cssText change or property removed
    */
-  constructor(onChangeCallback, opt = {}) {
-    // Make constructor and internals non-enumerable.
+  constructor(globalObject = globalThis, opt = {}) {
+    // Make internals non-enumerable.
     Object.defineProperties(this, {
-      constructor: {
-        enumerable: false,
-        writable: true
-      },
-
       // Window
       _global: {
         value: globalThis,
@@ -58,8 +49,8 @@ class CSSStyleDeclaration {
         writable: true
       },
 
-      // CSSRule
-      _parentNode: {
+      // CSSStyleRule
+      _parentRule: {
         value: null,
         enumerable: false,
         writable: true
@@ -71,6 +62,12 @@ class CSSStyleDeclaration {
         writable: true
       },
 
+      _options: {
+        value: null,
+        enumerable: false,
+        writable: true
+      },
+
       _values: {
         value: new Map(),
         enumerable: false,
@@ -90,7 +87,7 @@ class CSSStyleDeclaration {
       },
 
       _computed: {
-        value: false,
+        value: undefined,
         enumerable: false,
         writable: true
       },
@@ -101,34 +98,35 @@ class CSSStyleDeclaration {
         writable: true
       },
 
-      _setInProgress: {
+      _updating: {
         value: false,
         enumerable: false,
         writable: true
       }
     });
 
+    this._global = globalObject;
+
     const { context } = opt;
     if (context) {
-      if (typeof context.getComputedStyle === "function") {
-        this._global = context;
-        this._computed = true;
-        this._readonly = true;
-      } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
-        this._global = context.ownerDocument.defaultView;
+      if (context.nodeType === 1) {
         this._ownerNode = context;
       } else if (Object.hasOwn(context, "parentRule")) {
         this._parentRule = context;
-        // Find Window from the owner node of the StyleSheet.
-        const window = context?.parentStyleSheet?.ownerNode?.ownerDocument?.defaultView;
-        if (window) {
-          this._global = window;
-        }
       }
     }
-    if (typeof onChangeCallback === "function") {
-      this._onChange = onChangeCallback;
+    if (typeof opt.onChange === "function") {
+      this._onChange = opt.onChange;
+    }
+    if (opt.format === "computedValue") {
+      this._computed = true;
+    } else {
+      opt.format = "specifiedValue";
+    }
+    if (opt.readOnly) {
+      this._readonly = true;
     }
+    this._options = opt;
   }
 
   get cssText() {
@@ -150,7 +148,7 @@ class CSSStyleDeclaration {
       }
       properties.set(property, { property, value, priority });
     }
-    const normalizedProperties = normalizeBorderProperties(properties);
+    const normalizedProperties = normalizeProperties(properties);
     const parts = [];
     for (const { property, value, priority } of normalizedProperties.values()) {
       if (priority) {
@@ -171,10 +169,10 @@ class CSSStyleDeclaration {
     Array.prototype.splice.call(this, 0, this._length);
     this._values.clear();
     this._priorities.clear();
-    if (this._parentRule || (this._ownerNode && this._setInProgress)) {
+    if (this._parentRule || (this._ownerNode && this._updating)) {
       return;
     }
-    this._setInProgress = true;
+    this._updating = true;
     try {
       const valueObj = parseCSS(
         val,
@@ -206,7 +204,8 @@ class CSSStyleDeclaration {
               }
             } else {
               const parsedValue = parsePropertyValue(property, value, {
-                globalObject: this._global
+                globalObject: this._global,
+                options: this._options
               });
               if (parsedValue) {
                 if (properties.has(property)) {
@@ -224,7 +223,8 @@ class CSSStyleDeclaration {
           }
         }
         const parsedProperties = prepareProperties(properties, {
-          globalObject: this._global
+          globalObject: this._global,
+          options: this._options
         });
         for (const [property, item] of parsedProperties) {
           const { priority, value } = item;
@@ -235,7 +235,7 @@ class CSSStyleDeclaration {
     } catch {
       return;
     }
-    this._setInProgress = false;
+    this._updating = false;
     if (typeof this._onChange === "function") {
       this._onChange(this.cssText);
     }
@@ -255,36 +255,6 @@ class CSSStyleDeclaration {
     this._length = len;
   }
 
-  // Readonly
-  get parentRule() {
-    return this._parentRule;
-  }
-
-  get cssFloat() {
-    return this.getPropertyValue("float");
-  }
-
-  set cssFloat(value) {
-    this._setProperty("float", value);
-  }
-
-  /**
-   * @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 +274,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) || "";
   }
 
   /**
@@ -350,7 +312,7 @@ class CSSStyleDeclaration {
       return;
     }
     const property = asciiLowercase(prop);
-    if (!allProperties.has(property) && !allExtraProperties.has(property)) {
+    if (!propertyList.has(property)) {
       return;
     }
     if (priority) {
@@ -360,6 +322,45 @@ 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;
+  }
+
+  get parentRule() {
+    return this._parentRule;
+  }
+
+  // Non-standard
+  setOptions(opt = {}) {
+    for (const [key, value] of Object.entries(opt)) {
+      this._options[key] = value;
+      if (key === "readOnly") {
+        this._readonly = value;
+      }
+    }
+  }
 }
 
 // Internal methods
@@ -403,7 +404,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
       if (
         typeof this._onChange === "function" &&
         this.cssText !== originalText &&
-        !this._setInProgress
+        !this._updating
       ) {
         this._onChange(this.cssText);
       }
@@ -442,7 +443,8 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
         }
       }
       const parsedProperties = prepareBorderProperties(prop, val, prior, properties, {
-        globalObject: this._global
+        globalObject: this._global,
+        options: this._options
       });
       for (const [property, item] of parsedProperties) {
         const { priority, value } = item;
@@ -507,8 +509,10 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
             }
           } else {
             const parsedValue = shorthandItem.parse(longhandValues.join(" "));
-            const shorthandValue = Object.values(parsedValue).join(" ");
-            this._setProperty(shorthandProperty, shorthandValue, priority);
+            if (parsedValue) {
+              const shorthandValue = Object.values(parsedValue).join(" ");
+              this._setProperty(shorthandProperty, shorthandValue, priority);
+            }
           }
         }
       }
@@ -605,32 +609,14 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
         }
         if (longhandValues.length === shorthandFor.size) {
           const replacedValue = getPositionValue(longhandValues, shorthandPosition);
-          this._setProperty(shorthandProperty, replacedValue);
+          this._setProperty(shorthandProperty, replacedValue, priority);
         }
       }
     },
     enumerable: false
   }
 });
 
-// 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,
-  propertyList: Object.fromEntries(implementedProperties)
+  CSSStyleDeclaration
 };