magento2: xPath error in mails

found a solution for Magento 2.2.5:

created the files /web/css/email.less and /web/css/email-inline.less in my custom theme and added the content from /vendor/magento/theme-frontend-blank/web/css/email.less and /vendor/magento/theme-frontend-blank/web/css/email-inline.css respectively but each with the line “@import ‘source/_theme.less’;” commented out (or removed)

2 years later and this is still an issue… I’m really regretting choosing Magento 😦

Hi all, I solved this problem in my site by below step:- step-1:- copy email less and css file from blank theme under below path app/design/frontend/Your_vendor/Your_theme_neme/web/css app/design/frontend/Your_vendor/Your_theme_neme/web/css/source step-2:- After that run command setup:static-content:deploy Your_language.

step-3:- Clear below directory var/cache var/generation var/view_preprocessed That’s it Now check your email error is resolved and if you want to change your email design ,your email css is located in app/design/frontend/Your_vendor/Your_theme_neme/web/css/email-inline.css

@nickmarx12345678 put this in the require-dev part of composer.json:

"pelago/emogrifier": "1.0.0 as 0.1.1",

Or if you prefer the development version:

"pelago/emogrifier": "dev-master as 0.1.1",

I found out that in magento 2.1.4 all css files in pub/static/ contain statements like this:

@-moz-keyframes fade {
  0% {
    background-color: #514943;
  }
  100% {
    background-color: #ffffff;
  }
}

This apparently causes a problem in Emogrifier.php in line 269 as it is querying for a selector found in css like 0% or 100% using xpath expression //0% or //100%. This is not valid xpath expression and thus the error. I fixed it by stripping @-keyframe { … } statements in splitCssAndMediaQuery:

@@ -612,12 +614,14 @@ class Emogrifier
             '/^\\s*@import\\s[^;]+;/misU',
             // strip remains media enclosures
             '/^\\s*@media\\s[^{]+{(.*)}\\s*}\\s/misU',
+            '/^\\s*@-?[A-Za-z-]+\\s[^{]+{(.*)}\\s*}\\s/misU',
         );
 
         $replace = array(
             '',
             '',
             '',
+            '',
         );

Another day another closed, unfixed bug. Reported in 2016 and still not fixed. Why am I not surprised.

I have the same problem with Magento 2.1.7

Upgrade emogrifier to the last version solved the problem.

Add this to the composer require : “pelago/emogrifier”: “1.2.0 as 0.1.1”

When does Magento think about upgrade this vendor ?

I have a quick and dirty fix, go to Marketing -> Email Templates -> Add new template -> Name the template whatever -> Load the default header template -> remove {{inlinecss file=“css/email-inline.css”}} and then go to your themes email-inline.css file and copy it, then paste it into “template styles” and click save template. Then go to content -> Design -> Configuration -> edit theme -> transactional emails and then select your newly added header template. Done!

Magento 2 is a bloody disaster! I can’t go 2 hours making a site with magento without getting crazy errors and exceptions. Everything about it is a stress! Nearly every feature needs to be tweaked in order to work!

Magento 2.2.3 Just add this to the composer require "pelago/emogrifier": "2.0.0 as 1.2.0" then run composer update pelago/emogifier and it solved problem.

Ive recently updated from Magento 2.1.11 to 2.2.4 and got this exception. Installed version of pelago/emogrifier is v2.0.0.

Exception is: [2018-06-20 08:29:16] main.ERROR: DOMXPath::query(): Invalid expression in selector >> 100% << in /path/to/magento/vendor/pelago/emogrifier/Classes/Emogrifier.php on line 372 {"exception":"[object] (InvalidArgumentException(code: 1509279985): DOMXPath::query(): Invalid expression in selector >> 100% << in /path/to/magento/vendor/pelago/emogrifier/Classes/Emogrifier.php on line 372 at /path/to/magento/vendor/pelago/emogrifier/Classes/Emogrifier.php:1785)"} []

Hi everyone, we had this issue on one site and also noticed that it is not happening when using Luma so conclusion was it must be something we have included into our theme.

I our case Font Awesome we included was root of an issue.

In file font-awesome/_animated.less there are selectors that are breaking the flow. In this case those were keyframes definitions for start and end of animation.

As we don’t need this solution was simply disabling/commenting out font-awesome/_animated.less in file font-awesome/_font-awesome.less.

If you check official comment in vendor/magento/theme-frontend-blank/web/css/source/_email-base.less you will find that it is documented what kind of selectors are allowed. This might get updated in future but it is up to Emogrifier. Until all selectors are allowed we as developers should be aware of everything that is getting included and might possibly cause an error.

My advice is to use xDebug and keep an eye/breakpoint on vendor/pelago/emogrifier/Classes/Emogrifier.php (line 269) as this is place where exception is thrown. This way you can easily find out which part of CSS is causing an issue.

Hope this helps anyone!