on order place the email contains the following error and does not display properly
CSS Inline Error: Warning: DOMXPath::query(): Invalid expression in .../vendor/pelago/emogrifier/Classes/Emogrifier.php on line 269
How do I fix this?
on order place the email contains the following error and does not display properly
CSS Inline Error: Warning: DOMXPath::query(): Invalid expression in .../vendor/pelago/emogrifier/Classes/Emogrifier.php on line 269
How do I fix this?
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
Using Magento 2.2.2 and experiencing the same error and fixed it this way:
"pelago/emogrifier": "2.0.0 as 1.2.0"
as requirement in composer.json
composer update pelago/emogifier && magento setup:upgrade
Now i got solution
/var/www/html/vendor/pelago/emogrifier/Classes/Emogrifier.php
Line 595, find and replace below function
private function splitCssAndMediaQuery($css)
{
$media = '';
$css = preg_replace_callback(
'#@media\\s+(?:only\\s)?(?:[\\s{\\(]|screen|all)\\s?[^{]+{.*}\\s*}\\s*#misU',
function ($matches) use (&$media) {
$media .= $matches[0];
},
$css
);
// filter the CSS
$search = array(
// get rid of css comment code
'/\\/\\*.*\\*\\//sU',
// strip out any import directives
'/^\\s*@import\\s[^;]+;/misU',
// strip remains media enclosures
'/^\\s*@media\\s[^{]+{(.*)}\\s*}\\s/misU',
);
$replace = array(
'',
'',
'',
);
replace
private function splitCssAndMediaQuery($css)
{
$media = '';
$css = preg_replace_callback(
'#@media\\s+(?:only\\s)?(?:[\\s{\\(]|screen|all)\\s?[^{]+{.*}\\s*}\\s*#misU',
function ($matches) use (&$media) {
$media .= $matches[0];
},
$css
);
// filter the CSS
$search = array(
// get rid of css comment code
'/\\/\\*.*\\*\\//sU',
// strip out any import directives
'/^\\s*@import\\s[^;]+;/misU',
// strip remains media enclosures
'/^\\s*@media\\s[^{]+{(.*)}\\s*}\\s/misU',
'/^\\s*@-?[A-Za-z-]+\\s[^{]+{(.*)}\\s*}\\s/misU',
);
$replace = array(
'',
'',
'',
'',
);
I just recently came from similar problem. I hope these changes may help you.
found a solution for Magento 2
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
Please Note below
but each with the line "@import 'source/_theme.less';" commented out (or removed)