Export as single object and fix nits

Author: asamuzaK

lib/CSSStyleDeclaration.js

@@ -1,10 +1,14 @@
+/**
+ * This is a fork from the CSS Style Declaration part of
+ * https://github.com/NV/CSSOM
+ */
 "use strict";
 
 const allProperties = require("./generated/allProperties");
 const {
   borderProperties,
   getPositionValue,
-  normalizeBorderProperties,
+  normalizeProperties,
   prepareBorderProperties,
   prepareProperties,
   shorthandProperties
@@ -24,9 +28,13 @@ const { asciiLowercase } = require("./utils/strings");
  */
 class CSSStyleDeclaration {
   /**
-   * @param {object} context - Window, Element or CSSRule
-   * @param {object} opt - options
-   * @param {object} [opt.onChange] - on change callback
+   * @param {object} context - Window, Element or CSSStyleRule
+   * @param {object} opt - Options
+   * @param {object} opt.element - Required when the context is a Window
+   * @param {string} opt.pseudoElement - Applies when the context is a Window
+   * @param {Function} opt.onChange
+   *   - Executed when cssText changes or property is removed
+   *   - Applies when the context is an Element
    */
   constructor(context = globalThis, opt = {}) {
     // Make constructor and internals non-enumerable.
@@ -111,6 +119,9 @@ class CSSStyleDeclaration {
         this._global = context;
         this._computed = true;
         this._readonly = true;
+        if (opt.element && opt.element.nodeType === 1) {
+          this._ownerNode = opt.element;
+        }
       } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
         this._global = context.ownerDocument.defaultView;
         this._ownerNode = context;
@@ -151,7 +162,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) {

lib/CSSStyleProperties.js

@@ -17,23 +17,29 @@ class CSSStyleProperties extends CSSStyleDeclaration {
   }
 
   set cssFloat(value) {
-    this._setProperty("float", value);
+    this.setProperty("float", value);
   }
 }
 
 // Properties
 Object.defineProperties(CSSStyleProperties.prototype, generatedProperties);
 
 // Additional properties
-[...allProperties, ...allExtraProperties].forEach((property) => {
+const propertiesUnion = allProperties.union(allExtraProperties);
+//  typeof allProperties.union === "function"
+//    ? allProperties.union(allExtraProperties)
+//    : new Set([...allProperties, ...allExtraProperties]);
+propertiesUnion.forEach((property) => {
   if (!implementedProperties.has(property)) {
     const declaration = getPropertyDescriptor(property);
     Object.defineProperty(CSSStyleProperties.prototype, property, declaration);
     const camel = dashedToCamelCase(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);
+    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);
+      }
     }
   }
 });

lib/index.js

@@ -1,7 +1,3 @@
-/**
- * This is a fork from the CSS Style Declaration part of
- * https://github.com/NV/CSSOM
- */
 "use strict";
 
 const { CSSStyleDeclaration } = require("./CSSStyleDeclaration");

lib/normalize.js

@@ -18,7 +18,7 @@ const padding = require("./properties/padding");
 
 const borderImageProperty = "border-image";
 
-exports.shorthandProperties = new Map([
+const shorthandProperties = new Map([
   ["background", background],
   [
     "border",
@@ -45,7 +45,7 @@ exports.shorthandProperties = new Map([
   ["padding", padding]
 ]);
 
-exports.borderProperties = new Set([
+const borderProperties = new Set([
   "border",
   borderImageProperty,
   ...border.shorthandFor.keys(),
@@ -56,7 +56,7 @@ exports.borderProperties = new Set([
   ...borderLeft.shorthandFor.keys()
 ]);
 
-exports.getPositionValue = (positionValues, position) => {
+const getPositionValue = (positionValues, position) => {
   switch (positionValues.length) {
     case 1: {
       const [val1] = positionValues;
@@ -351,7 +351,7 @@ const replacePositionValue = (value, positionValues, position) => {
   }
 };
 
-exports.prepareBorderProperties = (property, value, priority, properties, opt = {}) => {
+const prepareBorderProperties = (property, value, priority, properties, opt = {}) => {
   if (typeof property !== "string" || value === null) {
     return;
   }
@@ -796,7 +796,7 @@ exports.prepareBorderProperties = (property, value, priority, properties, opt =
   if (!borderItems.has(name)) {
     return;
   }
-  const borderProperties = new Map([[name, borderItems.get(name)]]);
+  const borderProps = new Map([[name, borderItems.get(name)]]);
   for (const line of lines) {
     const lineProperty = `${name}-${line}`;
     const lineItem = borderItems.get(lineProperty) ??
@@ -805,7 +805,7 @@ exports.prepareBorderProperties = (property, value, priority, properties, opt =
         value: "",
         priority: ""
       };
-    borderProperties.set(lineProperty, lineItem);
+    borderProps.set(lineProperty, lineItem);
   }
   for (const position of positions) {
     const positionProperty = `${name}-${position}`;
@@ -815,7 +815,7 @@ exports.prepareBorderProperties = (property, value, priority, properties, opt =
         value: "",
         priority: ""
       };
-    borderProperties.set(positionProperty, positionItem);
+    borderProps.set(positionProperty, positionItem);
     for (const line of lines) {
       const longhandProperty = `${name}-${position}-${line}`;
       const longhandItem = borderItems.get(longhandProperty) ??
@@ -824,16 +824,16 @@ exports.prepareBorderProperties = (property, value, priority, properties, opt =
           value: "",
           priority: ""
         };
-      borderProperties.set(longhandProperty, longhandItem);
+      borderProps.set(longhandProperty, longhandItem);
     }
   }
   const borderImageItem = borderItems.get(borderImageProperty) ?? {
     property: borderImageProperty,
     value: "",
     priority: ""
   };
-  borderProperties.set(borderImageProperty, borderImageItem);
-  return borderProperties;
+  borderProps.set(borderImageProperty, borderImageItem);
+  return borderProps;
 };
 
 const generateBorderLineShorthand = (items, property, prior) => {
@@ -842,7 +842,7 @@ const generateBorderLineShorthand = (items, property, prior) => {
     const { value: itemValue } = item;
     values.push(itemValue);
   }
-  const value = exports.getPositionValue(values);
+  const value = getPositionValue(values);
   const priority = prior ? prior : "";
   return [property, { property, value, priority }];
 };
@@ -1149,7 +1149,7 @@ const prepareBorderShorthands = (properties) => {
   return properties;
 };
 
-exports.prepareProperties = (properties, opt = {}) => {
+const prepareProperties = (properties, opt = {}) => {
   const { globalObject, options } = opt;
   const parseOpt = {
     globalObject,
@@ -1158,13 +1158,13 @@ exports.prepareProperties = (properties, opt = {}) => {
   const { positions } = borderElements;
   const parsedProperties = new Map();
   const prepareShorthands = new Map();
-  const borderProperties = new Map();
+  const borderProps = new Map();
   for (const [property, item] of properties) {
     const { value, priority } = item;
     const { logicalPropertyGroup: shorthandProperty } = implementedProperties.get(property) ?? {};
-    if (exports.borderProperties.has(property)) {
-      borderProperties.set(property, { property, value, priority });
-    } else if (exports.shorthandProperties.has(shorthandProperty)) {
+    if (borderProperties.has(property)) {
+      borderProps.set(property, { property, value, priority });
+    } else if (shorthandProperties.has(shorthandProperty)) {
       if (!prepareShorthands.has(shorthandProperty)) {
         prepareShorthands.set(shorthandProperty, new Map());
       }
@@ -1183,8 +1183,8 @@ exports.prepareProperties = (properties, opt = {}) => {
         prepareShorthands.set(shorthandProperty, longhandItems);
       }
       parsedProperties.set(property, item);
-    } else if (exports.shorthandProperties.has(property)) {
-      const shorthandItem = exports.shorthandProperties.get(property);
+    } else if (shorthandProperties.has(property)) {
+      const shorthandItem = shorthandProperties.get(property);
       const parsedValues = shorthandItem.parse(value, parseOpt);
       let omitShorthandProperty = false;
       if (Array.isArray(parsedValues)) {
@@ -1199,7 +1199,7 @@ exports.prepareProperties = (properties, opt = {}) => {
               }
             }
             const { position } = longhandItem;
-            const longhandValue = exports.getPositionValue([parsedValue], position);
+            const longhandValue = getPositionValue([parsedValue], position);
             parsedProperties.set(longhandProperty, {
               property: longhandProperty,
               value: longhandValue,
@@ -1235,7 +1235,7 @@ exports.prepareProperties = (properties, opt = {}) => {
   }
   if (prepareShorthands.size) {
     for (const [property, item] of prepareShorthands) {
-      const shorthandItem = exports.shorthandProperties.get(property);
+      const shorthandItem = shorthandProperties.get(property);
       if (item.size === shorthandItem.shorthandFor.size) {
         if (shorthandItem.position) {
           const positionValues = [];
@@ -1246,7 +1246,7 @@ exports.prepareProperties = (properties, opt = {}) => {
               priority = longhandPriority;
             }
           }
-          const value = exports.getPositionValue(positionValues, shorthandItem.position);
+          const value = getPositionValue(positionValues, shorthandItem.position);
           parsedProperties.set(property, {
             property,
             value,
@@ -1256,10 +1256,10 @@ exports.prepareProperties = (properties, opt = {}) => {
       }
     }
   }
-  if (borderProperties.size) {
+  if (borderProps.size) {
     const longhandProperties = new Map();
-    for (const [property, item] of borderProperties) {
-      if (exports.shorthandProperties.has(property)) {
+    for (const [property, item] of borderProps) {
+      if (shorthandProperties.has(property)) {
         const { value, priority } = item;
         if (property === "border") {
           const lineItems = border.parse(value, parseOpt);
@@ -1297,13 +1297,13 @@ exports.prepareProperties = (properties, opt = {}) => {
             });
           }
         } else {
-          const shorthandItem = exports.shorthandProperties.get(property);
+          const shorthandItem = shorthandProperties.get(property);
           const parsedItem = shorthandItem.parse(value, parseOpt);
           if (Array.isArray(parsedItem)) {
             const [namePart, linePart] = property.split("-");
             for (const position of positions) {
               const longhandProperty = `${namePart}-${position}-${linePart}`;
-              const longhandValue = exports.getPositionValue(parsedItem, position);
+              const longhandValue = getPositionValue(parsedItem, position);
               const longhandItem = {
                 property: longhandProperty,
                 value: longhandValue,
@@ -1362,7 +1362,7 @@ exports.prepareProperties = (properties, opt = {}) => {
   return parsedProperties;
 };
 
-exports.normalizeBorderProperties = (properties) => {
+const normalizeProperties = (properties) => {
   const { lines, name, positions } = borderElements;
   if (properties.has(name)) {
     for (const line of lines) {
@@ -1406,3 +1406,12 @@ exports.normalizeBorderProperties = (properties) => {
   }
   return properties;
 };
+
+module.exports = {
+  borderProperties,
+  getPositionValue,
+  normalizeProperties,
+  prepareBorderProperties,
+  prepareProperties,
+  shorthandProperties
+};