bug #3363 [LiveComponent] Fix preservation of !important inline style changes (xDeSwa)

This PR was merged into the 2.x branch.

Discussion
----------

[LiveComponent] Fix preservation of !important inline style changes

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         | Fix #3317
| License        | MIT

Commits
-------

8ced30c fix properly apply inline styles with important priority

Author: Kocal

src/LiveComponent/assets/dist/live_controller.js

@@ -1048,7 +1048,8 @@ var ElementChanges = class {
 		element.classList.add(...this.addedClasses);
 		element.classList.remove(...this.removedClasses);
 		this.styleChanges.getChangedItems().forEach((change) => {
-			element.style.setProperty(change.name, change.value);
+			if (/!\s*important/i.test(change.value)) element.style.setProperty(change.name, change.value.replace(/!\s*important/i, "").trim(), "important");
+			else element.style.setProperty(change.name, change.value);
 		});
 		this.styleChanges.getRemovedItems().forEach((styleName) => {
 			element.style.removeProperty(styleName);

src/LiveComponent/assets/src/Rendering/ElementChanges.ts

@@ -67,8 +67,12 @@ export default class ElementChanges {
         element.classList.remove(...this.removedClasses);
 
         this.styleChanges.getChangedItems().forEach((change) => {
-            element.style.setProperty(change.name, change.value);
-            return;
+            // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
+            if (/!\s*important/i.test(change.value)) {
+                element.style.setProperty(change.name, change.value.replace(/!\s*important/i, '').trim(), 'important');
+            } else {
+                element.style.setProperty(change.name, change.value);
+            }
         });
 
         this.styleChanges.getRemovedItems().forEach((styleName) => {

src/LiveComponent/assets/test/unit/Rendering/ElementChanges.test.ts

@@ -74,4 +74,16 @@ describe('ElementChanges', () => {
         expect(element.style.color).toBe('blue');
         expect(element.getAttribute('data-foo')).toBe('baz');
     });
+
+    it('applies styles correctly when !important is used', async () => {
+        const element = document.createElement('div');
+        const changes = new ElementChanges();
+        changes.addStyle('z-index', '999 !important', null);
+        changes.addStyle('color', 'red ! IMPORTANT', null);
+        changes.applyToElement(element);
+        expect(element.style.getPropertyValue('z-index')).toBe('999');
+        expect(element.style.getPropertyPriority('z-index')).toBe('important');
+        expect(element.style.getPropertyValue('color')).toBe('red');
+        expect(element.style.getPropertyPriority('color')).toBe('important');
+    });
 });