Fix normalize.js

Author: asamuzaK

lib/CSSStyleDeclaration.js

@@ -193,22 +193,10 @@ class CSSStyleDeclaration {
             property,
             value: { value }
           } = item;
-          const priority = important ? "important" : "";
-          const isCustomProperty = property.startsWith("--");
-          if (isCustomProperty || hasVarFunc(value)) {
-            if (properties.has(property)) {
-              const { priority: itemPriority } = properties.get(property);
-              if (!itemPriority) {
-                properties.set(property, { property, value, priority });
-              }
-            } else {
-              properties.set(property, { property, value, priority });
-            }
-          } else {
-            const parsedValue = parsePropertyValue(property, value, {
-              globalObject: this._global
-            });
-            if (parsedValue) {
+          if (typeof property === "string" && typeof value === "string") {
+            const priority = important ? "important" : "";
+            const isCustomProperty = property.startsWith("--");
+            if (isCustomProperty || hasVarFunc(value)) {
               if (properties.has(property)) {
                 const { priority: itemPriority } = properties.get(property);
                 if (!itemPriority) {
@@ -218,7 +206,21 @@ class CSSStyleDeclaration {
                 properties.set(property, { property, value, priority });
               }
             } else {
-              this.removeProperty(property);
+              const parsedValue = parsePropertyValue(property, value, {
+                globalObject: this._global
+              });
+              if (parsedValue) {
+                if (properties.has(property)) {
+                  const { priority: itemPriority } = properties.get(property);
+                  if (!itemPriority) {
+                    properties.set(property, { property, value, priority });
+                  }
+                } else {
+                  properties.set(property, { property, value, priority });
+                }
+              } else {
+                this.removeProperty(property);
+              }
             }
           }
         }
@@ -227,6 +229,7 @@ class CSSStyleDeclaration {
         });
         for (const [property, item] of parsedProperties) {
           const { priority, value } = item;
+          this._priorities.set(property, priority);
           this.setProperty(property, value, priority);
         }
       }
@@ -453,19 +456,27 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
     enumerable: false
   },
 
+  // TODO: Working, but check later if this is really the right way to do.
   _shorthandSetter: {
     /**
      * @param {string} property
      * @param {string} val
+     * @param {string} prior
      * @param {object} shorthandFor
      */
-    value(property, val, shorthandFor) {
+    value(property, val, prior, shorthandFor) {
       const obj = parseShorthand(val, shorthandFor, {
         globalObject: this._global
       });
       if (!obj) {
         return;
       }
+      let priority = "";
+      if (typeof prior === "string") {
+        priority = prior;
+      } else {
+        priority = this._priorities.get(property) ?? "";
+      }
       for (const subprop of Object.keys(obj)) {
         // In case subprop is an implicit property, this will clear *its*
         // subpropertiesX.
@@ -476,7 +487,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
         this.removeProperty(subprop);
         // Don't add in empty properties.
         if (obj[subprop] !== "") {
-          this._values.set(subprop, obj[subprop]);
+          this._values.set(subprop, obj[subprop], priority);
         }
       }
       for (const [subprop] of shorthandFor) {
@@ -492,9 +503,8 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
       this.removeProperty(property);
       const calculated = this._shorthandGetter(property, shorthandFor);
       if (calculated !== "") {
-        this._setProperty(property, calculated);
+        this._setProperty(property, calculated, priority);
       }
-      return obj;
     },
     enumerable: false
   },
@@ -503,8 +513,9 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
     /**
      * @param {string} prop
      * @param {Array|string} val
+     * @param {string} prior
      */
-    value(prop, val) {
+    value(prop, val, prior) {
       if (!shorthandProperties.has(prop)) {
         return;
       }
@@ -516,24 +527,33 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
       } else {
         return;
       }
-      const priority = this._priorities.get(prop) ?? "";
-      const { shorthandFor } = shorthandProperties.get(prop);
+      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, { position }] of shorthandFor) {
-        const longhandValue = getPositionValue(shorthandValues, position);
-        const longhandPriority = this._priorities.get(longhandProperty) ?? "";
+      for (const [longhandProperty, longhandItem] of shorthandFor) {
+        const { position: longhandPosition } = longhandItem;
+        const longhandValue = getPositionValue(shorthandValues, longhandPosition);
         if (priority) {
-          this._setProperty(longhandProperty, longhandValue, longhandPriority);
-        } else if (longhandPriority) {
-          hasPriority = true;
+          this._setProperty(longhandProperty, longhandValue, priority);
         } else {
-          this._setProperty(longhandProperty, longhandValue, longhandPriority);
+          const longhandPriority = this._priorities.get(longhandProperty) ?? "";
+          if (longhandPriority) {
+            hasPriority = true;
+          } else {
+            this._setProperty(longhandProperty, longhandValue, priority);
+          }
         }
       }
       if (hasPriority) {
         this.removeProperty(prop);
       } else {
-        this._setProperty(prop, shorthandValues.join(" "), priority);
+        const shorthandValue = getPositionValue(shorthandValues, position);
+        this._setProperty(prop, shorthandValue, priority);
       }
     }
   },
@@ -542,15 +562,21 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
     /**
      * @param {string} prop
      * @param {string} val
+     * @param {string} prior
      */
-    value(prop, val) {
+    value(prop, val, prior) {
       const { logicalPropertyGroup: shorthandProperty } = implementedProperties.get(prop) ?? {};
       if (!shorthandProperty || !shorthandProperties.has(shorthandProperty)) {
         return;
       }
       const shorthandPriority = this._priorities.get(shorthandProperty);
-      const priority = this._priorities.get(prop) ?? "";
       this._setProperty(shorthandProperty, "");
+      let priority = "";
+      if (typeof prior === "string") {
+        priority = prior;
+      } else {
+        priority = this._priorities.get(prop) ?? "";
+      }
       if (shorthandPriority && priority) {
         this._setProperty(prop, val);
       } else {
@@ -580,18 +606,28 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
     /**
      * @param {string} prop
      * @param {object|Array|string} val
+     * @param {string} prior
      */
-    value(prop, val) {
+    value(prop, val, prior) {
       const properties = new Map();
       if (prop === "border") {
-        const priority = this._priorities.get(prop) ?? "";
+        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 priority = this._priorities.get(property) ?? "";
+            const longhandPriority = this._priorities.get(property) ?? "";
+            let priority = longhandPriority;
+            if (prop === property && typeof prior === "string") {
+              priority = prior;
+            }
             properties.set(property, { property, value, priority });
           }
         }
@@ -612,7 +648,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
 Object.defineProperties(CSSStyleDeclaration.prototype, generatedProperties);
 
 // Additional properties
-[...allProperties, ...allExtraProperties].forEach(function (property) {
+[...allProperties, ...allExtraProperties].forEach((property) => {
   if (!implementedProperties.has(property)) {
     const declaration = getPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);