MAGETWO-64085: [GitHub] Static versioning and styles minification break email fonts styles #8241

Author: anthoula

app/code/Magento/Email/Model/Template/Filter.php

@@ -149,9 +149,9 @@ class Filter extends \Magento\Framework\Filter\Template
     protected $urlModel;
 
     /**
-     * @var \Pelago\Emogrifier
+     * @var \Magento\Framework\Css\PreProcessor\Adapter\CssInliner
      */
-    protected $emogrifier;
+    protected $cssInliner;
 
     /**
      * @var \Magento\Email\Model\Source\Variables
@@ -180,7 +180,7 @@ class Filter extends \Magento\Framework\Filter\Template
      * @param \Magento\Framework\View\LayoutFactory $layoutFactory
      * @param \Magento\Framework\App\State $appState
      * @param \Magento\Framework\UrlInterface $urlModel
-     * @param \Pelago\Emogrifier $emogrifier
+     * @param \Magento\Framework\Css\PreProcessor\Adapter\CssInliner $cssInliner
      * @param \Magento\Email\Model\Source\Variables $configVariables
      * @param array $variables
      *
@@ -198,7 +198,7 @@ public function __construct(
         \Magento\Framework\View\LayoutFactory $layoutFactory,
         \Magento\Framework\App\State $appState,
         \Magento\Framework\UrlInterface $urlModel,
-        \Pelago\Emogrifier $emogrifier,
+        \Magento\Framework\Css\PreProcessor\Adapter\CssInliner $cssInliner,
         \Magento\Email\Model\Source\Variables $configVariables,
         $variables = []
     ) {
@@ -213,7 +213,7 @@ public function __construct(
         $this->_layoutFactory = $layoutFactory;
         $this->_appState = $appState;
         $this->urlModel = $urlModel;
-        $this->emogrifier = $emogrifier;
+        $this->cssInliner = $cssInliner;
         $this->configVariables = $configVariables;
         parent::__construct($string, $variables);
     }
@@ -975,14 +975,14 @@ public function applyInlineCss($html)
                     );
                 }
 
-                $emogrifier = $this->emogrifier;
-                $emogrifier->setHtml($html);
-                $emogrifier->setCss($cssToInline);
+                $this->cssInliner->setHtml($html);
+
+                $this->cssInliner->setCss($cssToInline);
 
                 // Don't parse inline <style> tags, since existing tag is intentionally for non-inline styles
-                $emogrifier->disableStyleBlocksParsing();
+                $this->cssInliner->disableStyleBlocksParsing();
 
-                $processedHtml = $emogrifier->emogrify();
+                $processedHtml = $this->cssInliner->process();
             } catch (\Exception $e) {
                 if ($this->_appState->getMode() == \Magento\Framework\App\State::MODE_DEVELOPER) {
                     $processedHtml = __('CSS inlining error:') . PHP_EOL . $e->getMessage()

app/code/Magento/Widget/Model/Template/Filter.php

@@ -33,7 +33,7 @@ class Filter extends \Magento\Cms\Model\Template\Filter
      * @param \Magento\Framework\View\LayoutFactory $layoutFactory
      * @param \Magento\Framework\App\State $appState
      * @param \Magento\Framework\UrlInterface $urlModel
-     * @param \Pelago\Emogrifier $emogrifier
+     * @param \Magento\Framework\Css\PreProcessor\Adapter\CssInliner $cssInliner
      * @param \Magento\Email\Model\Source\Variables $configVariables
      * @param \Magento\Widget\Model\ResourceModel\Widget $widgetResource
      * @param \Magento\Widget\Model\Widget $widget
@@ -51,7 +51,7 @@ public function __construct(
         \Magento\Framework\View\LayoutFactory $layoutFactory,
         \Magento\Framework\App\State $appState,
         \Magento\Framework\UrlInterface $urlModel,
-        \Pelago\Emogrifier $emogrifier,
+        \Magento\Framework\Css\PreProcessor\Adapter\CssInliner $cssInliner,
         \Magento\Email\Model\Source\Variables $configVariables,
         \Magento\Widget\Model\ResourceModel\Widget $widgetResource,
         \Magento\Widget\Model\Widget $widget
@@ -70,7 +70,7 @@ public function __construct(
             $layoutFactory,
             $appState,
             $urlModel,
-            $emogrifier,
+            $cssInliner,
             $configVariables
         );
     }

lib/internal/Magento/Framework/Css/PreProcessor/Adapter/CssInliner.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Magento\Framework\Css\PreProcessor\Adapter;
+use Pelago\Emogrifier;
+
+class CssInliner
+{
+    /**
+     * @var Emogrifier
+     */
+    private $emogrifier;
+
+    /**
+     * @param Emogrifier $emogrifier
+     */
+    public function __construct(Emogrifier $emogrifier)
+    {
+        $this->emogrifier = $emogrifier;
+    }
+
+    /**
+     * Sets the HTML to emogrify.
+     *
+     * @param string $html the HTML to emogrify, must be UTF-8-encoded
+     *
+     * @return void
+     */
+    public function setHtml($html)
+    {
+        $this->emogrifier->setHtml($html);
+    }
+
+    /**
+     * Sets the CSS to merge with the HTML.
+     *
+     * @param string $css the CSS to merge, must be UTF-8-encoded
+     *
+     * @return void
+     */
+    public function setCss($css)
+    {
+        /**
+         * Adds space to CSS string before passing to Emogrifier to fix known parsing issue with library.
+         * https://github.com/jjriv/emogrifier/issues/370
+         */
+        $cssWithAddedSpaces = preg_replace('#([\{\}>])#i', ' $1 ', $css);
+
+        $this->emogrifier->setCss($cssWithAddedSpaces);
+    }
+
+    /**
+     * Disables the parsing of <style> blocks.
+     *
+     * @return void
+     */
+    public function disableStyleBlocksParsing()
+    {
+        $this->emogrifier->disableStyleBlocksParsing();
+    }
+
+    /**
+     * Applies $this->css to $this->html and returns the HTML with the CSS
+     * applied.
+     *
+     * This method places the CSS inline.
+     *
+     * @return string
+     *
+     * @throws \BadMethodCallException
+     */
+    public function process()
+    {
+        return $this->emogrifier->emogrify();
+    }
+
+}