Improve formatting of [if mso | IE] markup

bryancasler commented 4 years ago

Is your feature request related to a problem? Please describe. The formatting of [if mso | IE] markup is less than desirable, even when beautify is enabled for output (e.g. https://d.pr/i/CA5lDZ). I believe this is because it's inside an HTML comment which the beautifier does not touch, so it maintains the formatting present in the code structure.

Describe the solution you'd like Either update the code structure to match the desired output, or find a way to allow the beautifier (js-beautify) to format those chunks of content.

One idea is to output full comments for the opening and closing tags. For example output  instead of  instead of <![endif]-->. Then have the beautifier run on that output afterwich a find / replace operation happens to revert them to their original state, find  and replace with <![endif]-->. Maybe that's along the lines of what mergeOutlookConditionnals.js is already doing.

Describe alternatives you've considered The alternative is just to not worry about the formatting of HTML output.

Additional context Example of Current Output

    ...
    <!--[if mso | IE]>
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
      >
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->
      ...

Example of Proposed Output

    ...
    <!--[if mso | IE]>
    <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600">
      <tr>
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
        <![endif]-->
        ...

iRyusa commented 4 years ago

Hi,

As there's no real benefit to "beautify" those (and they are minified anyway for production build), we won't do anything about this.

bryancasler commented 4 years ago

Thanks for responding @iRyusa, I should have explained the use case for this. The prettified and compiled HTML is the "production" HTML that would be used for the use case I had in mind when logging this. That email beautified markup would serve as an email template in Engaging Networks. Engaging Networks is a non-profit CRM that also has built in email blast support to send newsletters, advocacy appeals, and donation ask emails. Usually the folks staffing that tool are not developers.

That tools built in Email Editor is rudimentary but does allow for editing sections of the email at a time, versus the whole document. This opens the selected in a WYSIWYG editor where you can view and edit the source code. That source code will include the poorly formatted <!--[if mso | IE]>markup.

This is definitely something that can be solved in our own process, but I just wanted to give feedback since it's grounded in a real word use case and where the "Production" markup is the beautified markup and not the minimized markup. Their tool then handles the minification as part of their send process.

iRyusa commented 4 years ago

Well as they are HTML comment there's no way to format them nicely as you said, no beautifier would be able to do so.

It's not really worth to sanitize Outlook conditionnals for such thing, and no one should really modify those in a first place.

If you send email in production, you'll need to minify the HTML at some point because some clients like Gmail have a size limitation.

mjmlio / mjml

Improve formatting of [if mso | IE] markup #2088