From 475c2942e4231ac265824b2c26efec984b934570 Mon Sep 17 00:00:00 2001
From: Leah Hirst <leah@mutinyhq.com>
Date: Thu, 25 Aug 2022 14:36:14 +0100
Subject: [PATCH] fix: ensure priority is set before calling the onchange
 callback

---
 lib/CSSStyleDeclaration.js      |  3 ++-
 lib/CSSStyleDeclaration.test.js | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js
index bded9a44..5372cee5 100644
--- a/lib/CSSStyleDeclaration.js
+++ b/lib/CSSStyleDeclaration.js
@@ -59,6 +59,7 @@ CSSStyleDeclaration.prototype = {
     var isCustomProperty = name.indexOf('--') === 0;
     if (isCustomProperty) {
       this._setProperty(name, value, priority);
+      this._onChange(this.cssText);
       return;
     }
     var lowercaseName = name.toLowerCase();
@@ -68,6 +69,7 @@ CSSStyleDeclaration.prototype = {
 
     this[lowercaseName] = value;
     this._importants[lowercaseName] = priority;
+    this._onChange(this.cssText);
   },
   _setProperty: function(name, value, priority) {
     if (value === undefined) {
@@ -91,7 +93,6 @@ CSSStyleDeclaration.prototype = {
     }
     this._values[name] = value;
     this._importants[name] = priority;
-    this._onChange(this.cssText);
   },
 
   /**
diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
index 9fa8ed3b..be3f8341 100644
--- a/lib/CSSStyleDeclaration.test.js
+++ b/lib/CSSStyleDeclaration.test.js
@@ -359,6 +359,20 @@ describe('CSSStyleDeclaration', () => {
     style.setProperty('opacity', 0);
   });
 
+  test('onchange callback should be called when priority is specified on a setProperty call', () => {
+    var style = new CSSStyleDeclaration(function(cssText) {
+      expect(cssText).toEqual('opacity: 0 !important;');
+    });
+    style.setProperty('opacity', 0, 'important');
+  });
+
+  test('onchange callback should be called when custom property is set', () => {
+    var style = new CSSStyleDeclaration(function(cssText) {
+      expect(cssText).toEqual('--test-prop: 0;');
+    });
+    style.setProperty('--test-prop', 0);
+  });
+
   test('setting float should work the same as cssfloat', () => {
     var style = new CSSStyleDeclaration();
     style.float = 'left';