Add proper indentation for HTML comments

[hteumeuleu]

• Maizzle Version: 4.6.0
• Node.js Version: 16.13.1

One of my most common use case with Maizzle is to build emails to then hand off to clients so they can either edit them manually or import on their own ESP or anything. As such, I like to be able to hand off a clean HTML with proper indentation. While this mostly work great by default, it seems off with HTML comments (including mso conditionnal comments). The first line of an HTML is properly indented where it should be. But all the other lines miss one or more indentations.

                        <div>
                          <a href="https://example.com" style="display: inline-block; border-radius: 4px; background-color: #4338ca; padding: 16px 24px; font-size: 16px; font-weight: 600; line-height: 1; color: #f8fafc; text-decoration: none">
                            <!--[if mso]>
      <i style="mso-font-width: -100%; letter-spacing: 32px; mso-text-raise: 30px" hidden>&nbsp;</i>
    <![endif]-->
                            <span style="mso-text-raise: 16px">
                          Read more &rarr;
                        </span>
                            <!--[if mso]>
      <i style="mso-font-width: -100%; letter-spacing: 32px;" hidden>&nbsp;</i>
    <![endif]-->
                          </a>
                        </div>

Not a big issue as this is purely code cosmetic, but I'd love if there were a quick fix here.

[cossssmin]

Yeah I'd love to get this fixed too, it's pretty annoying.

We're using pretty which uses js-beautify basically. Their online editor looks to be handling these well, but I haven't been able to nail down the exact settings required for it to work like that.

Would love to get some help on this 👍

[cossssmin]

Actually scratch that, just came back to this and used your example on beautifier.io again, and this is the output:

                        <div>
                          <a href="https://example.com" style="display: inline-block; border-radius: 4px; background-color: #4338ca; padding: 16px 24px; font-size: 16px; font-weight: 600; line-height: 1; color: #f8fafc; text-decoration: none">
                            <!--[if mso]>
      <i style="mso-font-width: -100%; letter-spacing: 32px; mso-text-raise: 30px" hidden>&nbsp;</i>
    <![endif]-->
                            <span style="mso-text-raise: 16px"> Read more &rarr; </span>
                            <!--[if mso]>
      <i style="mso-font-width: -100%; letter-spacing: 32px;" hidden>&nbsp;</i>
    <![endif]-->
                          </a>
                        </div>

There are a bunch of open issues in js-beautify regarding HTML comments, for example this one from Avi.

[cossssmin]

So I've been testing prettier for Maizzle 5 and it does handle HTML comments pretty well.

A few things that I don't like about it:

1. Always self-closes void elements

No matter the doctype (you'd always see <img /> even if you coded it as <img> and have an HTML 5 doctype. Unfortunately it's by design and can't be turned off.

2. Weird CSS formatting

Not sure why, but even though printWidth: 500, something like this:

<!--[if mso]>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
  </style>
<![endif]-->

... ends up like this:

<!--[if mso]>
  <style>
    td,
    th,
    div,
    p,
    a,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "Segoe UI", sans-serif;
      mso-line-height-rule: exactly;
    }
  </style>
<![endif]-->

Also this:

<div class="sm-px-4" style="font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">

... ends up like this:

<div
  class="sm-px-4"
  style="
    font-family:
      ui-sans-serif,
      system-ui,
      -apple-system,
      'Segoe UI',
      sans-serif;
  "
>

1. could be fixed by detecting your doctype and PostHTML xmlMode preference, and we'd just do a string replacement to remove that closing slash. Downside is extra code we need to maintain, and more processing with strings/regex that impacts performance.

For 2. I'm not sure yet, still playing with prettier. Worst case scenario we could handle it manually after prettier runs, though I'd like to avoid that and hoping there's some config we can do in prettier...

[cossssmin]

Wrote some regex/replace for 1, would've preferred to avoid double processing, but it works 🤷‍♂️

Opened prettier/prettier#15905 for issue 2, let's see 🤞

[hteumeuleu]

Thanks for the update! I don't mind 1 at all as I usually code this way. But yeah, 2 is… yuck. Hope there'll be a solution.

[cossssmin]

Looks like 2 or more comma-delimited values in the CSS selector or property value will cause this. Not seeing any way around it and I don't think I want to write a custom prettier plugin just for this, so I'll try with regex.

[cossssmin]

Fixed it with regex, though might need to test some more to make sure it doesn't screw up other things.

If you have some super ugly HTML that you've always wanted Maizzle to get right when prettifying, send it over and I'll run a test.

I'll start working on a feature release for v4.7.0 meanwhile 👍

[cossssmin]

Released v4.7.0 that fixes this issue:

https://github.com/maizzle/framework/releases/tag/v4.7.0