Printing eBay emails: parser hickup on @media only

[Quintus]

Hi there,

I'm using weasyprint with mutt to print HTML email. Specifically eBay sends emails that use horrible styling, but I need to print them still (proof material in court). Since one can print them with Thunderbird with proper formatting, there ought to be a way.

That is, weasyprint does process eBay emails, but the styling is torn apart. The logo is rendered huge over the entire first page of the target PDF for example.

A typical eBay HTML email processed by weasyprint generates this mass of output:

WARNING: Expected a media type, got only/**/screen/**/and/**/(max-width: 620px)
WARNING: Invalid media type " only screen and (max-width: 620px) " the whole @media rule was ignored at 5:1.
WARNING: Expected a media type, got only/**/screen/**/and/**/(max-width: 479px)
WARNING: Invalid media type " only screen and (max-width: 479px) " the whole @media rule was ignored at 112:1.
WARNING: Ignored `white-space: -moz-pre-wrap` at 343:3, invalid value.
WARNING: Ignored `white-space: -pre-wrap` at 344:3, invalid value.
WARNING: Ignored `white-space: -o-pre-wrap` at 345:3, invalid value.
WARNING: Ignored `-ms-word-break: break-all` at 347:3, unknown property.
WARNING: Ignored `-webkit-text-size-adjust: 100% ` at 350:32, unknown property.
WARNING: Ignored `-ms-text-size-adjust: 100% ` at 350:75, unknown property.
WARNING: Ignored `-webkit-font-smoothing: antialiased ` at 350:114, unknown property.
WARNING: Ignored `-ms-interpolation-mode: bicubic ` at 358:94, unknown property.
WARNING: Expected a media type, got only/**/screen/**/and/**/(max-width: 620px)
WARNING: Invalid media type " only screen and (max-width: 620px) " the whole @media rule was ignored at 3:1.
WARNING: Expected a media type, got screen/**/and/**/(max-width:480px)
WARNING: Invalid media type " screen and (max-width:480px) " the whole @media rule was ignored at 9:2.
WARNING: Ignored `display: inline block` at 1:1, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:62, unknown property.
WARNING: Ignored `height:1` at 1:11, invalid value.
WARNING: Ignored `background-color: 0654BA` at 1:124, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:71, unknown property.
WARNING: Ignored `font-weight: none` at 1:183, invalid value.
WARNING: Ignored `font-weight: none` at 1:183, invalid value.
WARNING: Ignored `font-weight: none` at 1:183, invalid value.
WARNING: Ignored `font-weight: none` at 1:183, invalid value.
WARNING: Ignored `height:1` at 1:11, invalid value.
WARNING: Ignored `height:1` at 1:11, invalid value.
WARNING: Error: Expected <ident> for declaration name, got dimension. at 1:1.
WARNING: Ignored `float: center` at 1:1, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:55, unknown property.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:76, unknown property.
WARNING: Ignored `word-break: break-word` at 1:24, unknown property.
WARNING: Error: Expected <ident> for declaration name, got dimension. at 1:1.
WARNING: Ignored `float: center` at 1:1, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:55, unknown property.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:76, unknown property.
WARNING: Ignored `word-break: break-word` at 1:24, unknown property.
WARNING: Error: Expected <ident> for declaration name, got dimension. at 1:1.
WARNING: Ignored `float: center` at 1:1, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:55, unknown property.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:76, unknown property.
WARNING: Ignored `word-break: break-word` at 1:24, unknown property.
WARNING: Error: Expected <ident> for declaration name, got dimension. at 1:1.
WARNING: Ignored `float: center` at 1:1, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:55, unknown property.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:76, unknown property.
WARNING: Ignored `word-break: break-word` at 1:24, unknown property.
WARNING: Error: Expected <ident> for declaration name, got dimension. at 1:1.
WARNING: Ignored `float: center` at 1:1, invalid value.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:55, unknown property.
WARNING: Ignored `-ms-interpolation-mode: bicubic` at 1:76, unknown property.
WARNING: Ignored `word-break: break-word` at 1:24, unknown property.

The first lines indicate to me that weasyprint's parser hickups on eBay's @media rules in the CSS. Here's how they look like:

@media only screen and (max-width: 620px) {

body[yahoo] .device-width {

	width: 450px !important

}

/*... cut ... */

@media only screen and (max-width: 620px) {
	table.dealmaker-600desktop-100mobile {
		width: 600px !important;
	}
}

 @media screen and (max-width:480px) {
/* ... cut ... */

}

It looks to me as if weasyprint doesn't understand the only clause in the @media rule.

While I could provide you with such an eBay HTML e-mail, I don't want to because of personal data in it. I'm sure you've some of eBay's awful HTML email available somewhere from your last eBay purchase. Export the text/html part from it and try to process it with weasyprint.

$ weasyprint --version
WeasyPrint version 0.42.3

[liZe]

Thank you for reporting this issue.

Media queries are not supported yet, it's already reported in #494. It's a good entry point in WeasyPrint if you're interested in contributing 😄.