From ecad4b282e8bfdb23d9fa0b24187dbfea3bc6a08 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 1 Oct 2021 11:54:13 +0000
Subject: [PATCH] [FIX] web_editor: properly convert inherited and inline color
 styles

The mass mailing transpiler wrongly applied inherited colors to children
and failed to take inline styles into account, while those are supposed
to have the highest specificity.

Part-of: odoo/odoo#77724
---
 .../static/src/js/backend/convert_inline.js        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 51df2f5ac2d..f3b79fc54a7 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -118,6 +118,14 @@ function getMatchedCSSRules(a) {
         return a*100 + b*10 + c;
     }
     css.sort(function (a, b) { return specificity(a[0]) - specificity(b[0]); });
+    // Add inline styles at the highest specificity.
+    if (a.style.length) {
+        const inlineStyles = {};
+        for (const styleName of a.style) {
+            inlineStyles[styleName] = a.style[styleName];
+        }
+        css.push([a, inlineStyles]);
+    }
 
     style = {};
     _.each(css, function (v,k) {
@@ -210,10 +218,10 @@ function getMatchedCSSRules(a) {
             const camelCased = styleName.replace(/-(\w)/g, match => match[1].toUpperCase());
             node.style[camelCased] = style[styleName];
             for (const child of $(node).children()) {
-                const childStyle = $(child).css(styleName);
-                if (childStyle && childStyle !== 'inherit') {
-                    _styleDescendants(child, styleName);
+                if (child.style[camelCased] !== style[styleName]) {
+                    break;
                 }
+                _styleDescendants(child, styleName);
             }
         }
         if (style.color) {