Inliner encoding verbatim Twig code

readtedium commented 5 years ago

Hi, this is a useful tool, thanks for making it! I have it mostly working the way I want but I wanted to flag an issue I caught with unwanted URL encoding.

I have a template that I set up to essentially copy-paste the raw code in my email provider, and my provider has a tag that's set up for unsubscribes that uses brackets. There are two solutions in Twig to get around this:

{{ '{{UnsubscribeURL}}' }}

and

{% verbatim %}{{UnsubscribeURL}}{% endverbatim %}

Generally, the code respects the original intent. However, the plugin URL-encodes it so the result looks like this:

%7B%7BUnsubscribeURL%7D%7D

Is it possible for the plugin to respect verbatim requests like this? I think it might also come in handy for code portions that users may not want inlined.

mdcpepper commented 5 years ago

Hi Ernie,

Thanks for opening this issue. I've not been able to reproduce it myself using a normal frontend template with the twig code in the readme in Craft 3.0.36, with both of those two options copy & pasted in. Is that how you're using the plugin?

readtedium commented 5 years ago

I just did some testing on my end. If the link is unwrapped, the issue does not arise, but it looks like the issue crops up when the verbatim reference is wrapped in an anchor tag, as it would generally be in this case.

If it helps for confirming, here's a line of code I'm using in this case. I think I added the inlining to it during my testing:

<a href="{{ '{{UnsubscribeURL}}' }}" style="color: #c00c20; font-family: NexaSlabHeavy, Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 500; display: inline-block;">unsubscribe from this list </a>

mdcpepper commented 5 years ago

Ah yes, I see. I'm not sure how best to fix that in this plugin, as the {% inlinecss %} tag passes the HTML straight through to tijsverkoyen/CssToInlineStyles.

One thing you can do for now, for this specific issue, is set the entire thing as a string and use Craft's replace filter:

{% set html %}
{% inlinecss %}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        a { color: blue }
    </style>
</head>
<body>
<a href="{{ '{{UnsubscribeURL}}' }}">unsubscribe from this list </a>
</body>
</html>
{% endinlinecss %}
{% endset %}

{{- html|replace('/\\%7B\\%7B(.*)\\%7D\\%7D/', '{{\\1}}')|raw -}}

readtedium commented 5 years ago

Thanks for this—it's a decent stopgap fix for the issue. I think one other potential idea here would be to allow for only portions of the document to be inlined. Links like this are bound to be furniture so they often can be pre-inlined. Just an idea. Either way, appreciate the help!

Christo55 commented 5 years ago

Im doing this too, but it's not working 100%

What is strangest is that when I inspect the page with devtools and right click on the html tag then pick > Edit html I can see the correct entities as defined in craft entry pages, but all entities as defined in templates are lost. For example I could add a non breaking space in my entries title, that is kept, but not the copyright symbol in my twig footer template.

BUT switching to Source view, the result is inversed. All entities added in craft are lost, while all defined in twig templates are kept.

Christo55 commented 5 years ago

Ive done some research and using alt + space on mac generates the correct space, which I can replace using the replace filter, and generate the   back.

Christo55 commented 5 years ago

EDIT: this only works in code source view.

leecrosdale commented 5 years ago

Closed as the answer is the same as the below issue, unless you apply the above stopgap.

https://github.com/enovatedesign/craft-style-inliner/issues/3#issuecomment-467347784

enovatedesign / craft-style-inliner

Inliner encoding verbatim Twig code #2