Split CSSStyleDeclaration into CSSStyleDeclaration and CSSStyleProperties

lib/CSSStyleProperties.js

@@ -0,0 +1,50 @@
+"use strict";
+
+const { CSSStyleDeclaration } = require("./CSSStyleDeclaration");
+const allProperties = require("./generated/allProperties");
+const implementedProperties = require("./generated/implementedProperties");
+const generatedProperties = require("./generated/properties");
+const allExtraProperties = require("./utils/allExtraProperties");
+const { dashedToCamelCase } = require("./utils/camelize");
+const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
+
+/**
+ * @see https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface
+ */
+class CSSStyleProperties extends CSSStyleDeclaration {
+  get cssFloat() {
+    return this.getPropertyValue("float");
+  }
+
+  set cssFloat(value) {
+    this.setProperty("float", value);
+  }
+}
+
+// Properties
+Object.defineProperties(CSSStyleProperties.prototype, generatedProperties);
+
+// Additional properties
+const unifiedProperties =
+  typeof allProperties.union === "function"
+    ? allProperties.union(allExtraProperties)
+    : new Set([...allProperties, ...allExtraProperties]);
+
+unifiedProperties.forEach((property) => {
+  if (!implementedProperties.has(property)) {
+    const declaration = getPropertyDescriptor(property);
+    Object.defineProperty(CSSStyleProperties.prototype, property, declaration);
+    const camel = dashedToCamelCase(property);
+    if (camel !== property) {
+      Object.defineProperty(CSSStyleProperties.prototype, camel, declaration);
+      if (/^webkit[A-Z]/.test(camel)) {
+        const pascal = camel.replace(/^webkit/, "Webkit");
+        Object.defineProperty(CSSStyleProperties.prototype, pascal, declaration);
+      }
+    }
+  }
+});
+
+module.exports = {
+  CSSStyleProperties
+};

lib/generated/allProperties.js

@@ -1,5 +1,5 @@
 "use strict";
-// autogenerated - 2025-05-14
+// autogenerated - 2025-08-02
 // https://www.w3.org/Style/CSS/all-properties.en.html
 
 module.exports = new Set([
@@ -57,21 +57,29 @@ module.exports = new Set([
   "border-block-color",
   "border-block-end",
   "border-block-end-color",
+  "border-block-end-radius",
   "border-block-end-style",
   "border-block-end-width",
   "border-block-start",
   "border-block-start-color",
+  "border-block-start-radius",
   "border-block-start-style",
   "border-block-start-width",
   "border-block-style",
   "border-block-width",
   "border-bottom",
   "border-bottom-color",
   "border-bottom-left-radius",
+  "border-bottom-radius",
   "border-bottom-right-radius",
   "border-bottom-style",
   "border-bottom-width",
   "border-boundary",
+  "border-clip",
+  "border-clip-bottom",
+  "border-clip-left",
+  "border-clip-right",
+  "border-clip-top",
   "border-collapse",
   "border-color",
   "border-end-end-radius",
@@ -86,37 +94,49 @@ module.exports = new Set([
   "border-inline-color",
   "border-inline-end",
   "border-inline-end-color",
+  "border-inline-end-radius",
   "border-inline-end-style",
   "border-inline-end-width",
   "border-inline-start",
   "border-inline-start-color",
+  "border-inline-start-radius",
   "border-inline-start-style",
   "border-inline-start-width",
   "border-inline-style",
   "border-inline-width",
   "border-left",
   "border-left-color",
+  "border-left-radius",
   "border-left-style",
   "border-left-width",
+  "border-limit",
   "border-radius",
   "border-right",
   "border-right-color",
+  "border-right-radius",
   "border-right-style",
   "border-right-width",
+  "border-shape",
   "border-spacing",
   "border-start-end-radius",
   "border-start-start-radius",
   "border-style",
   "border-top",
   "border-top-color",
   "border-top-left-radius",
+  "border-top-radius",
   "border-top-right-radius",
   "border-top-style",
   "border-top-width",
   "border-width",
   "bottom",
   "box-decoration-break",
   "box-shadow",
+  "box-shadow-blur",
+  "box-shadow-color",
+  "box-shadow-offset",
+  "box-shadow-position",
+  "box-shadow-spread",
   "box-sizing",
   "box-snap",
   "break-after",
@@ -158,6 +178,23 @@ module.exports = new Set([
   "content",
   "content-visibility",
   "continue",
+  "corner-block-end-shape",
+  "corner-block-start-shape",
+  "corner-bottom-left-shape",
+  "corner-bottom-right-shape",
+  "corner-bottom-shape",
+  "corner-end-end-shape",
+  "corner-end-start-shape",
+  "corner-inline-end-shape",
+  "corner-inline-start-shape",
+  "corner-left-shape",
+  "corner-right-shape",
+  "corner-shape",
+  "corner-start-end-shape",
+  "corner-start-start-shape",
+  "corner-top-left-shape",
+  "corner-top-right-shape",
+  "corner-top-shape",
   "counter-increment",
   "counter-reset",
   "counter-set",
@@ -382,6 +419,7 @@ module.exports = new Set([
   "overflow-wrap",
   "overflow-x",
   "overflow-y",
+  "overlay",
   "overscroll-behavior",
   "overscroll-behavior-block",
   "overscroll-behavior-inline",

lib/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+const { CSSStyleDeclaration } = require("./CSSStyleDeclaration");
+const { CSSStyleProperties } = require("./CSSStyleProperties");
+const implementedProperties = require("./generated/implementedProperties");
+
+module.exports = {
+  CSSStyleDeclaration,
+  CSSStyleProperties,
+  propertyList: Object.fromEntries(implementedProperties)
+};