Small bug fix in overwrite f

Author: lemnis

Diff for: dist/index.d.ts

@@ -3,6 +3,6 @@
  * @param element
  * @param propertyName Representing the CSS property name (hyphen case) to be modified.
  * @param newValue The new property value. If not specified, treated as the empty string.
- * @param overwrite
+ * @param overwrite Set to false when you want to have multiple values for one property, used for defining fallbacks.
  */
 export declare function setStyle(element: Element, propertyName: string, newValue: string | null, overwrite?: boolean): void;

Diff for: dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "style-element-instance",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "set inline styles for any elment instance",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

Diff for: dist/index.js.map

@@ -3,15 +3,15 @@
  * @param element
  * @param propertyName Representing the CSS property name (hyphen case) to be modified.
  * @param newValue The new property value. If not specified, treated as the empty string.
- * @param overwrite
+ * @param overwrite Set to false when you want to have multiple values for one property, used for defining fallbacks.
  */
 export function setStyle(
   element: Element,
   propertyName: string,
   newValue: string | null,
   overwrite = true
 ) {
-  if ((element as HTMLElement).style && !overwrite)
+  if ((element as HTMLElement).style && overwrite && !newValue)
     return (element as HTMLElement).style.setProperty(propertyName, newValue);
 
   let inlineCssText = element.getAttribute("style") || "";
@@ -21,7 +21,7 @@ export function setStyle(
       if (cssText) {
         let [property, value] = cssText.split(":");
         if (property) property = property.trim();
-        if (property !== propertyName) result += `; ${propertyName}:${value}`;
+        if (property !== propertyName) result += `; ${property}:${value}`;
       }
       return result;
     }, "");

Diff for: package.json

@@ -64,23 +64,35 @@ for (const { title, namespace, tagName } of testElements) {
         setStyle(
           testElement,
           "background-image",
-          "-webkit-linear-gradient(45deg, red 0%, blue 100%);"
+          "-webkit-linear-gradient(45deg, red 0%, blue 100%);",
+          false
         );
         setStyle(
           testElement,
           "background-image",
-          "-moz-linear-gradient(45deg, red 0%, blue 100%);"
+          "-moz-linear-gradient(45deg, red 0%, blue 100%);",
+          false
         );
         setStyle(
           testElement,
           "background-image",
-          "-ms-linear-gradient(45deg, red 0%, blue 100%);"
+          "-ms-linear-gradient(45deg, red 0%, blue 100%);",
+          false
         );
-        setStyle(testElement, "background-image", "foo");
+        setStyle(testElement, "background-image", "foo", false);
         expect(getComputedStyle(testElement).backgroundImage).to.have.string(
           "linear-gradient"
         );
       });
+
+      it("should keep other inline styles when one is removed", () => {
+        testElement.setAttribute(
+          "style",
+          "background-color: rgb(0, 255, 0); color: rgb(255, 0, 0)"
+        );
+        setStyle(testElement, "background-color", null);
+        expect(getComputedStyle(testElement).color).to.equal("rgb(255, 0, 0)");
+      });
     });
   });
 }