maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.2k stars 48 forks source link

<if condition ignores '@' escape for {{ }} code #1300

Closed guyqsmith closed 1 month ago

guyqsmith commented 1 month ago

Recent convert to Maizzle, using Laravel blade templates for emails, generated from Maizzle 'npm run build' into my project directories.

@{{ }} code is ignored during parsing (passed through as {{ }} to the blade template), as expected, but not when encapsulated in a conditional block:

                <if condition="page.env === 'production'">
                    <img src="@{{ url(config('app.url')) }}/img/emails/icon-phone-gray.png" width="16" class="mb-1">
                </if>
                <if condition="page.env === 'local'">
                    <img src="icon-phone-gray.png" width="16" class="mb-1">
                </if>

The @{{ url ... }} yields 'undefined' inside the conditional.

Remove the conditional and it works as expected.

You can recreate this quickly by changing 'production' to 'local' in the first if test to see /images/undefined/img ... in the output.

Not sure if this is resolved in the current 5.0 beta, I haven't tried this due to time constraints.

cossssmin commented 1 month ago

I know it sounds weird, but try using another @ when this happens:

<if condition="page.env === 'production'">
-    <img src="@{{ url(config('app.url')) }}/img/emails/icon-phone-gray.png" width="16" class="mb-1">
+    <img src="@@{{ url(config('app.url')) }}/img/emails/icon-phone-gray.png" width="16" class="mb-1">
  </if>
  <if condition="page.env === 'local'">
      <img src="icon-phone-gray.png" width="16" class="mb-1">
  </if>

The problem is with the <if> tag in posthtml-expressions, I think it double encodes entities for some reason.

But the issue with undefined will be fixed in Maizzle 5, yes.

However even in v5, the <if> tag will encode characters so if you use a single @ you will get this src value:

images/{{ url(config(&#039;app.url&#039;)) }}/img/emails/icon-phone-gray.png

The solution to that in Maizzle 5 is to either use @@{{ ... }} as above when using an <if>, or to use the new <env> tag that does not have this problem (and is shorter to write too):

<env:production>
  <img src="@{{ url(config('app.url')) }}/img/emails/icon-phone-gray.png" width="16" class="mb-1">
</env:production>
guyqsmith commented 1 month ago

Thank you - that fixed it. I look forward to being able to use tags when 5 comes out of beta. And great response time!