From 116371805eb31ef53a10134d5fa5e241dd3490cc Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 11 Apr 2022 08:20:06 +0000
Subject: [PATCH] [FIX] mass_mailing: prevent creating non-sense styles

When adding a font-family style, we need to make sure it trickles down
to all its descendants. This implies adding selectors with a trailing
`*` to the selectors involved. The way it was done was
undiscriminatingly, leading to selectors ending in `* *`, which is
obvious non-sense.

task-2821155

X-original-commit: bb8685cc9829ab0e76d98c4c1196a344d2475759
Part-of: odoo/odoo#92138
---
 .../static/src/js/mass_mailing_design_constants.js    |  3 ++-
 .../static/src/js/mass_mailing_snippets.js            | 11 +++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js b/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js
index 3b7d5f838a4..c8d201ac68b 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_design_constants.js
@@ -31,6 +31,7 @@ export const PRIORITY_STYLES = {
     'hr': [],
 };
 export const RE_CSS_TEXT_MATCH = /([^{]+)([^}]+)/;
+export const RE_SELECTOR_ENDS_WITH_GT_STAR = />\s*\*\s*$/;
 
 /**
  * Take a css text and splits each comma-separated selector into separate
@@ -87,6 +88,6 @@ export const FONT_FAMILIES = [
 
 export default {
     CSS_PREFIX, BTN_SIZE_STYLES, DEFAULT_BUTTON_SIZE, PRIORITY_STYLES,
-    RE_CSS_TEXT_MATCH, FONT_FAMILIES,
+    RE_CSS_TEXT_MATCH, FONT_FAMILIES, RE_SELECTOR_ENDS_WITH_GT_STAR,
     splitCss, getFontName, normalizeFontFamily, initializeDesignTabCss,
 }
diff --git a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
index afcec4e4bad..164d2dd75be 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
@@ -6,7 +6,7 @@ const {ColorpickerWidget} = require('web.Colorpicker');
 const SelectUserValueWidget = options.userValueWidgetsRegistry['we-select'];
 const weUtils = require('web_editor.utils');
 const {
-    CSS_PREFIX, BTN_SIZE_STYLES,
+    CSS_PREFIX, BTN_SIZE_STYLES, RE_SELECTOR_ENDS_WITH_GT_STAR,
     DEFAULT_BUTTON_SIZE, PRIORITY_STYLES, FONT_FAMILIES,
     getFontName, normalizeFontFamily, initializeDesignTabCss
 } = require('mass_mailing.design_constants');
@@ -238,11 +238,18 @@ options.registry.DesignTab = options.Class.extend({
             value = weUtils.normalizeColor(value);
         }
         const selectors = this._getSelectors(params.selectorText);
+        const firstSelector = selectors[0].replace(CSS_PREFIX, '').trim();
         if (params.cssProperty === 'font-family') {
             // Ensure font-family gets passed to all descendants.
             selectors.push(...selectors.map(selector => selector + ' *'));
+            for (const selector of selectors) {
+                if (!selector.endsWith('*')) {
+                    selectors.push(`${selector} *`);
+                } else if (RE_SELECTOR_ENDS_WITH_GT_STAR.test(selector)) {
+                    selectors.push(selector.replace(RE_SELECTOR_ENDS_WITH_GT_STAR, ' *'));
+                }
+            }
         }
-        const firstSelector = selectors[0].replace(CSS_PREFIX, '').trim();
         for (const selector of selectors) {
             const priority = PRIORITY_STYLES[firstSelector].includes(params.cssProperty) ? ' !important' : '';
             const rule = this._getRule(selector);