[Improvement] define <mj-attributes> and alike in a template file called by <mj-include>

[grebett]

Hello there!

For now, we can define attributes within <mj-head> tag, which is a good DRY feature.
Yet, it is impossible to do the same within a template called by a <mj-include> tag, since these templates are usually within the <mj-body> tag. It means then you have to declare the attributes within the main file, which is not great regarding the separation of concern.

Why not aggregating all the <mj-head> parts along all the templates while compiling to HTML?

Thank you and happy coding!

[dalefish]

Define your attributes in a head.mjml file and include before the body:

For example:

<mj-include path="./head.mjml" />

<mj-body>
    <mj-container>

        <mj-include path="./pretext.mjml" />

        <mj-include path="./header.mjml" />

        <mj-include path="./hero.mjml" />   

        <mj-include path="./content.mjml" />

        <mj-include path="./grid.mjml" />

        <mj-include path="./social.mjml" />

        <mj-include path="./legal.mjml" />

        <mj-include path="./address.mjml" />

    </mj-container>
</mj-body>

[okeegan]

This works for me, and allows me to define specific styles for a template that aren't in the 'standard' head.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-include path="src/components/head.mjml" />
      <mj-class name="t-bg" background-color="#666666" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container mj-class="d-width" background-color="#dddddd">
      <mj-include path="src/components/preheader.mjml" />


    </mj-container>
  </mj-body>
</mjml>

[iRyusa]

Well it makes sense to merge all mj-head inside mj-include files, but I wonder if it will introduce style conflict between included part.

I'm adding a discussion label to this to see if it's relevant to keep

[Ndrou]

It would be great.

Now, it's very difficult to maintain a global template. If you want to change a global style to all email templates, you need to replace styles in all your templates. It's really tedious.

In the meantime, it is possible to use a module like gulp-include-file or gulp-include-file to fill this gap.

[iRyusa]

In 3.2, you'll be able to define an mj-head inside your partial and they will be merged inside the main MJML file.

Note that some file can override some of your current mj-head elements, so use this carefully !

We should drop a beta this week so feel free to give it a try 👍

[jdotjdot]

Great--these are all features that we're looking forward to. If we add an <mj-style> in the partial, will it merge the <mj-style> or override it?

[iRyusa]

@jdotjdot they will both be applied !

[iRyusa]

Hi there,

MJML 3.2 has been released on NPM so you can now use mj-head inside your partials !