Inline styles using emogrifier

mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php

@@ -7,12 +7,11 @@ use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer;
 use MailPoet\EmailEditor\Engine\SettingsController;
 use MailPoet\EmailEditor\Engine\Templates\Templates;
 use MailPoet\Util\CdnAssetUrl;
-use MailPoet\Util\pQuery\DomNode;
-use MailPoetVendor\CSS as CssInliner;
 use MailPoetVendor\Html2Text\Html2Text;
+use MailPoetVendor\Pelago\Emogrifier\CssInliner;
+use WP_Style_Engine;
 
 class Renderer {
-  private CssInliner $cssInliner;
   private SettingsController $settingsController;
   private ContentRenderer $contentRenderer;
   private CdnAssetUrl $cdnAssetUrl;
@@ -23,14 +22,12 @@ class Renderer {
   const TEMPLATE_STYLES_FILE = 'template-canvas.css';
 
   public function __construct(
-    CssInliner $cssInliner,
     SettingsController $settingsController,
     ContentRenderer $contentRenderer,
     CdnAssetUrl $cdnAssetUrl,
     Templates $templates,
     ServicesChecker $servicesChecker
   ) {
-    $this->cssInliner = $cssInliner;
     $this->settingsController = $settingsController;
     $this->contentRenderer = $contentRenderer;
     $this->cdnAssetUrl = $cdnAssetUrl;
@@ -39,25 +36,24 @@ class Renderer {
   }
 
   public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array {
-    $layout = $this->settingsController->getLayout();
-    $themeStyles = $this->settingsController->getEmailStyles();
-    $width = $layout['contentSize'];
-    $paddingTop = $themeStyles['spacing']['padding']['top'] ?? '0px';
-    $paddingBottom = $themeStyles['spacing']['padding']['bottom'] ?? '0px';
-    $contentBackground = $themeStyles['color']['background']['content'] ?? 'inherit';
-    $layoutBackground = $themeStyles['color']['background']['layout'] ?? 'inherit';
-    $contentFontFamily = $themeStyles['typography']['fontFamily'] ?? 'inherit';
-    $logoHtml = $this->servicesChecker->isPremiumPluginActive() ? '' : '<img src="' . esc_attr($this->cdnAssetUrl->generateCdnUrl('email-editor/logo-footer.png')) . '" alt="MailPoet" style="margin: 24px auto; display: block;" />';
-
-    $templateStyles = file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_STYLES_FILE);
-    $templateStyles = apply_filters('mailpoet_email_renderer_styles', $templateStyles, $post);
-    $templateHtml = $this->contentRenderer->render($post, $this->templates->getBlockTemplate('mailpoet/mailpoet//email-general'));
-
     ob_start();
+    $logoHtml = $this->servicesChecker->isPremiumPluginActive() ? '' : '<img src="' . esc_attr($this->cdnAssetUrl->generateCdnUrl('email-editor/logo-footer.png')) . '" alt="MailPoet" style="margin: 24px auto; display: block;" />';
+    $templateHtml = $this->contentRenderer->render($post, $this->templates->getBlockTemplate('mailpoet/mailpoet//email-general'));
     include self::TEMPLATE_FILE;
     $renderedTemplate = (string)ob_get_clean();
-    $renderedTemplate = $this->inlineCSSStyles($renderedTemplate);
-    $renderedTemplate = $this->postProcessTemplate($renderedTemplate);
+
+    $emailStyles = $this->settingsController->getEmailStyles();
+    $templateStyles = WP_Style_Engine::compile_css(
+      [
+        'background-color' => $emailStyles['color']['background'] ?? 'inherit',
+        'padding-top' => $emailStyles['spacing']['padding']['top'] ?? '0px',
+        'padding-bottom' => $emailStyles['spacing']['padding']['bottom'] ?? '0px',
+        'font-family' => $emailStyles['typography']['fontFamily'] ?? 'inherit',
+      ],
+      'body, .email_layout_wrapper'
+    );
+    $templateStyles .= file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_STYLES_FILE);
+    $renderedTemplate = $this->inlineCSSStyles('<style>' . (string)apply_filters('mailpoet_email_renderer_styles', $templateStyles, $post) . '</style>' . $renderedTemplate);
 
     return [
       'html' => $renderedTemplate,
@@ -67,10 +63,10 @@ class Renderer {
 
   /**
    * @param string $template
-   * @return DomNode
+   * @return string
    */
   private function inlineCSSStyles($template) {
-    return $this->cssInliner->inlineCSS($template);
+    return CssInliner::fromHtml($template)->inlineCss()->render();
   }
 
   /**
@@ -81,15 +77,4 @@ class Renderer {
     $template = (mb_detect_encoding($template, 'UTF-8', true)) ? $template : mb_convert_encoding($template, 'UTF-8', mb_list_encodings());
     return @Html2Text::convert($template);
   }
-
-  /**
-   * @param DomNode $templateDom
-   * @return string
-   */
-  private function postProcessTemplate(DomNode $templateDom) {
-    // because tburry/pquery contains a bug and replaces the opening non mso condition incorrectly we have to replace the opening tag with correct value
-    $template = $templateDom->__toString();
-    $template = str_replace('<!--[if !mso]><![endif]-->', '<!--[if !mso]><!-- -->', $template);
-    return $template;
-  }
 }

mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.php

@@ -16,14 +16,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="format-detection" content="telephone=no" />
   <?php echo $metaRobots; ?>
-  <style type="text/css">
-    <?php echo $templateStyles; ?>
-  </style>
 </head>
-<body style="background:<?php echo esc_attr($layoutBackground); ?>;">
-    <div class="email_layout_wrapper" style="background:<?php echo esc_attr($layoutBackground); ?>">
-      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" width="<?php echo esc_attr($width); ?>" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
-      <div style="margin:0px auto;max-width:<?php echo esc_attr($width); ?>">
+<body>
+    <div class="email_layout_wrapper">
         <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
           <tbody>
             <tr>
@@ -32,7 +27,7 @@
               </td>
             </tr>
             <tr>
-              <td class="email_content_wrapper" style="font-family: <?php echo esc_attr($contentFontFamily); ?>;padding-top: <?php echo esc_attr($paddingTop); ?>;padding-bottom: <?php echo esc_attr($paddingBottom); ?>;background: <?php echo esc_attr($contentBackground); ?>;">
+              <td class="email_content_wrapper">
                 <?php echo $templateHtml; ?>
               </td>
             </tr>
@@ -44,7 +39,5 @@
           </tbody>
         </table>
   </div>
-    <!--[if mso | IE]></td></tr></table><![endif]-->
-  </div>
 </body>
 </html>

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -82,7 +82,7 @@ class SettingsController {
    *     padding: array{bottom: string, left: string, right: string, top: string}
    *   },
    *   color: array{
-   *     background: array{layout: string, content: string}
+   *     background: string
    *   },
    *   typography: array{
    *     fontFamily: string