url embedded resources

[Simonl9l]

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]:(https://github.com/milkshakesoftware/PreMailer.Net/pull/60/commits/5fd1b6ab907924699c719ac273e2d70304d1014c)

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(&quot;data:image/png; base64,iVBORw0KGgo...&quot;);background-repeat: no-repeat;></span>

where it seems to be HTML escaping the "'s as &quot's !!

[martinnormark]

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.

[Simonl9l]

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 !