[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

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,
 }

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);