url embedded resources
Simonl9l opened this issue · 2 comments
Hi,
Per PreMailer.Net ver 2.2.0
I have a CSS file that has base64 encoded images (as generated via webpack).
.pt-logo {
background-image: url(data:image/png;base64,iVBORw0KG...);
background-repeat: no-repeat; }
where iVBORw0KG...
is the start of the base64 encoded image (truncated for clarity/brevity), and similarly encoded svg's:
my-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); }
we have similar for fonts and other artifacts.
With the style linked, and given the HTML:
<span class="pt-logo"></span>
It seem that the PreMailer.MoveCssInline
call reduces this to:
<span class="pt-logo" style="background-image: url(data:image/png;background-repeat: no-repeat;></span>
The base64
image data (and similarly svg+xml
data for that matter) is eliminated e.g. base64,iVBORw0KG...
Am I doing something wrong or does PreMailer not currently handle this scenario? If the latter is this fixable?
I have attempted to ignoreElements: "pt-logo"
to no avail. Any recommendations?
Per [this]:(5fd1b6a)
and this CSS
content: url('data:image/jpeg; base64,/9j/4AAQSkZJRgA');
max-width: 200px;
height: auto;
}
(again data truncated for brevity) apparently works, the only difference I can see I the url
are spaces and the data is quoted ('
).
As an attempted workaround - If I modify the webpack generation as such as to add the need quotes:
test: /\.(png|jpe?g|gif)$/i,
use: {
loader: 'url-loader',
options: {
// The `mimetype` and `encoding` arguments will be obtained from your options
// The `resourcePath` argument is path to file.
generator: (content, mimetype, encoding, resourcePath) => {
if (/\.html$/i.test(resourcePath)) {
return `'data:${mimetype}, ${content.toString()}'`;
}
return `'data:${mimetype}${encoding ? `; ${encoding}` : ''
},${content.toString(encoding)}'`;
},
},
},
This results in the following CSS (note the CSS is unfortunately double quoted):
.pt-logo {
background-image: url("data:image/png; base64,iVBORw0KGgo...");
background-repeat: no-repeat; }
However the PreMailer.MoveCssInline
call reduces this to:
<span class="pt-logo" style="background-image: url("data:image/png; base64,iVBORw0KGgo...");background-repeat: no-repeat;></span>
where it seems to be HTML escaping the "
's as "
's !!
Thanks for such a detailed description!
It seems like a bug, I am unsure if the culprit is the CSS parser or the HTML formatter, but I will take a look.
Hi @martinnormark thanks for the quick response!
If there is anything you need or I can help in any way to resolve this bug classification that would be most helpful.
An additional observation, it seems that PreMailer is inserting Mac/safari based css tags -webkit-box-sizing: border-box;box-sizing: border-box;
as I'm developing on MacOs, but assume that would not be the case under linux, or is there some kind engine configuration to manage that?
I also have a case where base64 encoded images have ==
at end and the AES SES DotNet Client is miss encoding them to =3D=3D
...
Cheers !