E-Mail: InlineStyle removes style tags, making responsive email impossible #16715
Description
Bug report
Summary
MODX 3 added InlineStyle to modPHPMailer which is inlining CSS or style tags into the HTML for best email client support. Thats nice, but with the current implementation / configuration it is also removing any <style> tags before sending the email, based on the assumption that the styles have been inlined.
That works, until you want to send responsive emails – which is a thing nowadays – because it removes the style tag with the media queries. You can not inline media queries.
Step to reproduce
$mailer = $modx->getService('mail', modPHPMailer::class);
$mailer->set(modMail::MAIL_FROM, '[email protected]');
$mailer->set(modMail::MAIL_SUBJECT, 'Lorem Ipsum');
$mailer->address('to', '[email protected]');
$mailer->setHTML(true);
$mailer->set(modMail::MAIL_BODY, <<<HTMLTPL
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Subject</title>
<style>
body {background:#000;color:#fff;}
@media only screen and (max-width: 620px) {
body {background:red !important;}
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
HTMLTPL);
$mailer->send();
$mailer->reset();
Observed behavior
<style> tag is removed from send email. For the example: On small (mobile) viewports (<620px) background is still black, not red.
Expected behavior
Styles should be inlined but <style> tag should be left in the markup and not removed. For the example: On small (mobile) viewports (<620px) background should become red. Black on desktop.
Environment
MODX 3.1.1-pl
Quick fix
see https://github.com/modxcms/revolution/blob/3.x/core/src/Revolution/Mail/modPHPMailer.php#L231
extractStylesheets allows disabling the removal of style tags:
$html->applyStylesheet($html->extractStylesheets(remove: false));
Related
#16116 – I think its a good idea to make the whole inlining process optional via a setting. Inlining can be a complicated process, and developers might decide to use a different package for that.