Magento2: xPath error in mails

[lgt]

I'm using magento 2.0.7 and I get the following error on order mail confirmation.Swicthing from default to production the error is still there. This seems to be related to the included css in header.
If I remove
{{inlinecss file="css/email-inline.css"}} than I do not get the error, but still need some styling!
How to suppress ?

CSS Inline Error: Warning: DOMXPath::query(): Invalid expression in .../vendor/pelago/emogrifier/Classes/Emogrifier.php on line 269

[designhunger]

I get the same error, but not exclusive in the order confirmation, but on all magento mails (magento 2.0.6)

[eug123]

Hi @lgt
What theme is applied? Have you deployed static content before switching to production?

[juliansthl]

We have the same issue.
Our theme is based on the blank theme. The issue even appears if we don't override the Magento_Email template files.

We have deployed static content.

[eug123]

Hi,

It seems that the error happens when converting styles from email-inline.css to the inline style attribute with Emogrifier tool.

Please try to update this package changing version to 1.0.0 in composer.json ("pelago/emogrifier": "1.0.0") and running composer update.

Could you also check if the issue appears on your environment when one of the native themes is applied?

[juliansthl]

Hi,

sorry for my late reply.
The issue was that email-inline.less was loading less files from our theme's source and the Emogrifier tool was having problems with a few style declarations.

Thanks,
Julian

[nickmarx12345678]

@eug123 I'm also having this issue, but I don't see emogrifier as a dependency in our composer.json

any other suggestios?

[nickmarx12345678]

@eug123 update, it may be a sub-dependency. In our composer.lock, emogrifier as version 0.1.1

how would you recommend proceeding to get that version bumped to 1.0.0?

[AntonEvers]

If you let Magento minify css ul > li becomes ul>li. Emogrify turns this into xpath //ul>li instead of //ul/li so the html nodes are never matched.

This is fixed in https://github.com/jjriv/emogrifier/commit/81947fddadbc829a9f31c7f138ae890e2f56e7a4 which is scheduled for version 1.1.0 of pelago/emogrifier. Will you upgrade to v1.1.0 when it's out?

[AntonEvers]

@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",

[DevManav]

Hi @lgt,
I'm also having this issue in all mail. Is there any solution for this issue? Please let me know if any one has a solution.

[adamraya]

I had this problem too, seems like emogrifier had trouble with a multiline comment /* code */ inside a media query in one of the .less files of our theme based on the blank theme.

[oliverklee]

@adamraya Could you please file a ticket at the Emogrifier issues list with the offending HTML and CSS? Then we can have a look at it. Thanks! :heart:

[veloraven]

@antonkril please have a look at this.

[DevManav]

@antonkril I had this problem in all mails same as @lgt. This error is comes when my custom created theme is applied , if i select default theme blank or luma email templates working fine. Is there any solution?

[itelebar]

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!

[mrkhoa99]

Hi all,
This issue also occurs because the email style will import some less files. And then, we add some unsupported selectors to these files. Read more: http://magento.stackexchange.com/a/132691/33057

[DevManav]

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

[Bartlomiejsz]

@veloraven @antonkril are there any updates? Do you know when pelago/emogrifier will be up to date with latest release?

[Laura021]

I did @DevManav solution and @ajpevers with out success. Not using font-awesome .

I am using CE ver. 2.0.7

Any news? :(

[caseyjonesaustralia]

Same issue here. 2.1.2

[ghost]

same issue also, is there a workaround?

[rdeelstra]

Overrule in your theme and delete {{inlinecss file="css/email.css"}} in the Magento_Email/email/header.html else it includes your complete theme styles which might cause problems (as with me).

[spyrule]

Just in case anyone is looking for it, the full URL for the rdeelstra's comment is:
vendor/magento/module-email/view/frontend/email/header.html , line 27

[imgali]

Confirm 2.1.2

[sbw92]

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!

[sbw92]

Do not follow DevManav advice. So much work to fix what his advice did!

[sbw92]

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!

[stephansteiner]

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(
             '',
             '',
             '',
+            '',
         );

[caiyundong]

Magento 2 will find the email theme (email-inline.css) from your own theme first; if not found, then find it from the parent theme (e.g. blank theme).

Here is my solution without modifying the Emogrifier.php:

• After doing the "grunt exec:dom1" and "grunt less:dom1", generated css file for email will be at "pub/static/frontend/dom/dom1/en_US/css/email-inline.css".
• Copy the file to you theme folder "app/design/frontend/domino/domino1/web/css/"
• Edit the "app/design/frontend/domino/domino1/web/css/email-inline.css", remove the selectors
  
  
  
  • @-moz-keyframes
  
  
  • :before; :after
  
  
  • :hover; :focus
  
  
  • : child
  
  

Then redo "grunt exec:dom1" and "grunt less:dom1".

Hope it helps.

[jarhody]

The seems to be fixed on a fresh install 2.1.5 (white space are present around > in the email-inline.css file) however, I have an install that was upgraded from a previous version (either 2.1.2 or 2.1.3) and white spaces around the > symbol are removed during minification.

I have run setup:upgrade, compile and deploy commands to no avail.

[franckgarnier21]

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 ?

[1f47a]

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

[JamesonNetworks]

One thing you can check if you are still having this issue: Move certain sets of CSS outside of the _theme.less and move them into the _styles.less of your theme. A lot of time, Emogrifier can't handle some more advanced CSS specifiers and will be broken by things like animations.

[ionutdicu]

Solved: update pelago/emogrifier to the latest package: dev-master / 1.3.x-dev. See https://packagist.org/packages/pelago/emogrifier#dev-master

composer.json:
Add to the require:
"pelago/emogrifier": "dev-master as 0.1.1"
Then run: composer update

[franckgarnier21]

Prefer the last stable version whereas the dev master.

[oliverklee]

Are these issues solved with Emogrifier 1.2.0? If not, are they resolved with the current master? In that case, I could cut a new release.

[miguelbalparda]

Still waiting for a reply to @oliverklee before merging #10638

[oliverklee]

In the meantime, we have released Emogrifier 2.0.0. I've created a PR to update to this version: https://github.com/magento/magento2/pull/13132

[electricBonfire]

2 years later and this is still an issue... I'm really regretting choosing Magento :(

[magento-engcom-team]

Hi,
Looks like the issue has been fixed by updating to Emogrifier 2.0.0.
Thanks to everyone for collaboration!

[nikidexa]

Hi, I have the same problem, so it looks like been fixed by udpdating Emogrifier 2.0.0
How can I update this file? sorry fro this question, but I'm learning now to use magento 2
thanks

[Puru2016]

I am facing same issue in Magento ver 2.2.3,

My composer ver is:-
vendor\magento\magento2-basecomposer.json => "pelago/emogrifier": "1.2.0"

Please suggest the solution for this

[oliverklee]

@Puru2016 Does an upgrade to emogrifier ^2.0.0 solve the problem for you?

[Puru2016]

I have changed "pelago/emogrifier": "1.2.0" to "pelago/emogrifier": "2.0.0", and update the composer and then recompile the store , still same issue.

[mattkrupnik]

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.

[nikidexa]

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.

Im still using Magento 2.2.2... is it the same?

[mattkrupnik]

@nikidexa I think that it will be working on 2.2.2 but I did not test.

[nikidexa]

Yes, I can confirm that now is working good for me too....
so the solution is:
-add this line to composer.json : "pelago/emogrifier": "2.0.0 as 1.2.0"
-run -> composer update pelago/emogifier

thanks to everyone

[rcoelros]

It worked for me: https://magento.stackexchange.com/a/132691

[Puru2016]

Still issue is there as I am not able to update the "pelago/emogrifier" due to below error:-

Problem 1
- magento/magento2-base 2.2.3 requires pelago/emogrifier 1.2.0 -> satisfiable by pelago/emogrifier[V1.2.0] but these conflict with your requirements or minimum-stability.
- magento/magento2-base 2.2.3 requires pelago/emogrifier 1.2.0 -> satisfiable by pelago/emogrifier[V1.2.0] but these conflict with your requirements or minimum-stability.
- magento/magento2-base 2.2.3 requires pelago/emogrifier 1.2.0 -> satisfiable by pelago/emogrifier[V1.2.0] but these conflict with your requirements or minimum-stability.
- Installation request for magento/magento2-base (locked at 2.2.3) -> satisfiable by magento/magento2-base[2.2.3].

I have tried with below "pelago/emogrifier" version:-
"pelago/emogrifier": "1.0.0 as 0.1.1"
"pelago/emogrifier": "2.0.0 as 1.2.0",
"pelago/emogrifier": "1.0.0 as 0.1.1",
"pelago/emogrifier": "dev-master as 0.1.1",

in vendor\magento\magento2-basecomposer.json
Please suggest the solution if I am doing wrong in the above process.

My exact error is as below in email template:-
CSS inlining error: DOMXPath::query(): Invalid expression in selector >> 50% << in /var/www/html/magento2/vendor/pelago/emogrifier/Classes/Emogrifier.php on line 370"

[crtl]

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)"} []

[rszczepaniec]

Same situation here. Magento 2.2.4, pelago/emogrifier in version 2.0.0.
Issue is still valid.

[chammedinger]

Again having the same issue on Magento 2.2.5.
I had it fixed with the composer line "pelago/emogrifier": "2.0.0 as 1.2.0" on Magento 2.2.3
but sadly on 2.2.5 this fix does not work anymore.

[chammedinger]

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)

[tehtea]

@chammedinger your fixed worked, thank you! If you don't mind sharing, what is your thought process towards fixing the bug?

[jorgb90]

@tehtea Probably your _theme.less file is causing the css problem for the transactional emails, so by including the email-inline.less and email.less into your theme you are overwriting it and by commenting @import _theme.less you fix the error by excluding it :)

[pratikhmehta]

composer.json >> require-dev >> "pelago/emogrifier": "dev-master as 0.1.1"
Then composer update.

[pablobae]

Still present on 2.2.7 and the fix doesn't work
composer.json >> require-dev >> "pelago/emogrifier": "dev-master as 0.1.1" Then composer update.

[chammedinger]

@pablobae

thats correct. but my fix above for 2.2.5 still works on 2.2.7

[pablobae]

@pablobae

thats correct. but my fix above for 2.2.5 still works on 2.2.7

hmm I've done that too, but it doesn't work.. not on my M2 instance. I will try tomorrow this:

https://magento.stackexchange.com/questions/116952/order-mail-confirmation-generates-domxpathquery-error/132691#132691

I think, in my case, the issue comes from others files. The error appears in the newsletter confirmation mail. I've tried even remove all lines with import sentences on email.less, email-fonts.less and email-inline.css. With that the static file generated has no content (for example https://www.DOMAIN.com/pub/static/version1549392940/frontend/grand/theme/es_ES/css/email-fonts.css )
`/**

• Copyright © 2013-2017 Magento, Inc. All rights reserved.
• See COPYING.txt for license details.
  */`

But the issue happens yet...

[sumeetmobiwebtech]

Warning: DOMXPath::query(): Invalid expression in /var/www/html/xxx/xxx/vendor/magento/framework/Config/Dom.php on line 277

Getting this error when send email to customer programatically.
I tried this -
"pelago/emogrifier": "dev-master as 0.1.1"
"pelago/emogrifier": "2.0.0 as 1.2.0"
pelago/emogrifier is v2.0.0

But nothing work
please anyone here, i need help

I am using magento 2.3 version

[Ravindrasinh]

CSS inlining error: DOMXPath::query(): Invalid expression in selector >> @-webkit-keyframes bounceIn << in /var/www/html/vendor/pelago/emogrifier/src/Emogrifier.php on line 530

Getting this error Load Email template and check preview.

And currently my Pelago version ""pelago/emogrifier": "^2.0.0","

But nothing work
Please anyone here,i need help.

I am using magento 2.3.2 version.

[Ravindrasinh]

CSS inlining error: DOMXPath::query(): Invalid expression in selector >> @-webkit-keyframes bounceIn << in /var/www/html/vendor/pelago/emogrifier/src/Emogrifier.php on line 530

Getting this error Load Email template and check preview.

And currently my Pelago version ""pelago/emogrifier": "^2.0.0","

But nothing work
Please anyone here,i need help.

I am using magento 2.3.2 version.

[JJBalso]

@Ravindrasinh

I believe that error is only shown in develop/default mode. Try to set the mode to production:

php bin/magento deploy:mode:set production