0

Getting following error in magento 2 email.

CSS inlining error: Warning: DOMXPath::query(): Invalid expression in /home/patios/public_html/vendor/pelago/emogrifier/Classes/Emogrifier.php on line 294 

I have already tried to update pelado vendor. But still getting error.

"pelago/emogrifier": "1.0.0 as 0.1.1"

My magento version is 2.2.1

Update

Before upgrading pelago to to 1.0.0, error was like following...

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

Warning: Invalid argument supplied for foreach() in /home/public_html/vendor/pelago/emogrifier/Classes/Emogrifier.php on line 272
2
  • what is your php version ? May 2, 2019 at 13:49
  • just downgrade the php version 7.3 to 7.2 every thing is working fine May 2, 2019 at 14:01

2 Answers 2

0

Magento email will import some default less files.

So, if we added some unsupported selectors to these files, that may cause this issue: Order mail confirmation generates DOMXPath::query() error

Reference CSS error in email template in magento 2

0

This may be a bug of Emogrifier module.

Put this in the require-dev part of composer.json:

"pelago/emogrifier": "1.0.0 as 0.1.1"

Or prefer the development version:

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

There is a notice: seem that this issue also occurs when processing static content deploy.

UPDATE:

We should take a look:

vendor/magento/theme-frontend-blank/web/css/email.less

@import 'source/lib/_lib.less'; // Global lib
@import 'source/lib/variables/_email.less'; // Global email variables
@import 'source/_theme.less'; // Global variables override
@import 'source/_variables.less'; // Local theme variables
@import 'source/_email-variables.less'; // Theme variables for emails

Magento email will import some less files. So, if we added some unsupported selectors to these files, that may cause this issue.

vendor/magento/theme-frontend-blank/web/css/source/_email-base.less

Unsupported selectors (examples in parenthesis):
      * first-child (div:first-child)
      * last-child (div:last-child)
      * nth-child (div:nth-child(3n+1))
      * universal (*)
      * pseudo (a:hover, a:active, a:focus, span:before, span:after, etc)

For example, in our custom theme, we add some unsupported selectors:

app/design/frontend/VendorTheme/default/web/css/source/_theme.less

...
#customer-service-menu li.item:nth-child(2) {position: absolute;}
...

This issue will occurs again.

SOLUTION:

We should create a new folder which contains the stand less files for our email styles. And, these files are only for email.

app/design/frontend/VendorTheme/default/web/css/email.less

@import 'source/lib/email/stand/_lib.less'; // Global lib
@import 'source/lib/email/stand/variables/_email.less'; // Global email variables

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.