Keep priorities when updating individual sub-properties

jsdom · Dec 28, 2023 · d5b019e · d5b019e
1 parent 65b18d1
commit d5b019e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
@@ -415,7 +415,44 @@ describe('CSSStyleDeclaration', () => {
           }
         }
       }
-  });
+    }
+  );
+
+  test.each(['margin', 'padding'])(
+    'setting additional %s properties keeps important status of others',
+    (property) => {
+      var style = new CSSStyleDeclaration();
+      var importantProperty = property + '-top: 3px !important;';
+      style.cssText = importantProperty;
+      expect(style.cssText).toContain(importantProperty);
+
+      style[property + 'Right'] = '4px';
+      style[property + 'Bottom'] = '5px';
+      style[property + 'Left'] = '6px';
+
+      expect(style.cssText).toContain(importantProperty);
+      expect(style.cssText).toContain(property + '-right: 4px;');
+      expect(style.cssText).toContain(property + '-bottom: 5px;');
+      expect(style.cssText).toContain(property + '-left: 6px;');
+      expect(style.cssText).not.toContain('margin:');
+    }
+  );
+
+  test.each(['margin', 'padding'])(
+    'setting individual %s keeps important status of others',
+    (property) => {
+      var style = new CSSStyleDeclaration();
+      style.cssText = property + ': 3px !important;';
+
+      style[property + 'Top'] = '4px';
+
+      expect(style.cssText).toContain(property + '-top: 4px;');
+      expect(style.cssText).toContain(property + '-right: 3px !important;');
+      expect(style.cssText).toContain(property + '-bottom: 3px !important;');
+      expect(style.cssText).toContain(property + '-left: 3px !important;');
+      expect(style.cssText).not.toContain('margin:');
+    }
+  );
 
   test('setting a value to 0 should return the string value', () => {
     var style = new CSSStyleDeclaration();

diff --git a/lib/parsers.js b/lib/parsers.js
@@ -695,17 +695,26 @@ exports.subImplicitSetter = function (prefix, part, isValid, parser) {
     v = parser(v);
     this._setProperty(property, v);
 
-    var parts = subparts.map(subpart => this._values[subpart]);
-    if (parts.every(p => p !== '' && p != null)) {
+    var combinedPriority = this.getPropertyPriority(prefix);
+    var parts = subparts.map((subpart) => this._values[subpart]);
+    var priorities = subparts.map((subpart) => this.getPropertyPriority(subpart));
+    // Combine into a single property if all values are set and have the same priority
+    if (
+      parts.every((p) => p !== '' && p != null) &&
+      priorities.every((p) => p === priorities[0]) &&
+      priorities[0] === combinedPriority
+    ) {
       for (var i = 0; i < subparts.length; i++) {
         this.removeProperty(subparts[i]);
         this._values[subparts[i]] = parts[i];
       }
-      this._setProperty(prefix, parts.join(' '));
+      this._setProperty(prefix, parts.join(' '), priorities[0]);
     } else {
       this.removeProperty(prefix);
-      for (var i = 0; i < subparts.length; i++) {
-        this._setProperty(subparts[i], parts[i]);
+      for (var j = 0; j < subparts.length; j++) {
+        // The property we're setting won't be important, the rest will either keep their priority or inherit it from the combined property
+        var priority = subparts[j] === property ? '' : priorities[j] || combinedPriority;
+        this._setProperty(subparts[j], parts[j], priority);
       }
     }
     return v;