[FIX] web_editor: fix handling of the CSS !important marker

Since [1] the mechanism that was introduced in [2] is broken because a
snapshot of the property value is used instead of the dynamically
computed property value to determine whether the `!important` marker
should be set on the modified property.

This commit makes sure the value is obtained for each comparison
instead of relying on a snapshot across all comparisons.

Steps to reproduce:
- Drop a Banner block in a website page.
- Select the box.
- Set the background to a custom solid color.
=> The `background-color` style has the `!important` marker on it, while
it should not.

[1]: https://github.com/odoo/odoo/commit/815d1f775c13ad9d4463c2d571dffc4691e81a35
[2]: https://github.com/odoo/odoo/commit/d3c3dab8950abc25b29937605091d8ce32305fa4

closes odoo/odoo#109117

X-original-commit: fff46efc04cbce3ff5bff1ded501197fbd5dca84
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -3347,10 +3347,8 @@ const SnippetOptionWidget = Widget.extend({
                 return true;
             }
 
-            const propertyValue = styles.getPropertyValue(cssProp);
-
             // This condition requires extraClass to NOT be set.
-            if (!weUtils.areCssValuesEqual(propertyValue, cssValue, cssProp, this.$target[0])) {
+            if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
                 // Property must be set => extraClass will be enabled.
                 if (params.extraClass) {
                     // The extraClass is temporarily removed during selectStyle
@@ -3363,7 +3361,7 @@ const SnippetOptionWidget = Widget.extend({
                     this.$target[0].classList.add(params.extraClass);
                     // Set inline style only if different from value defined
                     // with extraClass.
-                    if (!weUtils.areCssValuesEqual(propertyValue, cssValue, cssProp, this.$target[0])) {
+                    if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
                         this.$target[0].style.setProperty(cssProp, cssValue);
                     }
                 } else {
@@ -3372,7 +3370,7 @@ const SnippetOptionWidget = Widget.extend({
                 }
                 // If change had no effect then make it important.
                 // This condition requires extraClass to be set.
-                if (!weUtils.areCssValuesEqual(propertyValue, cssValue, cssProp, this.$target[0])) {
+                if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
                     this.$target[0].style.setProperty(cssProp, cssValue, 'important');
                 }
                 if (params.extraClass) {