Add support for Included files to have mj-head #1585

TheWebTech · 2019-04-23T19:16:56Z

Is your feature request related to a problem? Please describe.
For a client I have to modularize all of our common Email components, so I'm separating them into includes. Right now I have to have the relevant mj-styles and mj-attributes in my parent file. I'd like to be able to put the styles relevant to a specific included file, within that child file itself, to keep the code clean and easy to maintain.

Describe alternatives you've considered
Someone had told me you can do mj-include inside of an mj-attributes which is great but requires me to have separate files for the module and it's styles.

The text was updated successfully, but these errors were encountered:

iRyusa · 2019-04-23T19:20:09Z

It should be already the case if you define a mjml root tag and a mj-head inside any mj included file

…

On 23 Apr 2019, at 21:16, Jon McLaren ***@***.***> wrote: Is your feature request related to a problem? Please describe. For a client I have to modularize all of our common Email components, so I'm separating them into includes. Right now I have to have the relevant mj-styles and mj-attributes in my parent file. I'd like to be able to put the styles relevant to a specific included file, within that child file itself, to keep the code clean and easy to maintain. Describe alternatives you've considered Someone had told me you can do mj-include inside of an mj-attributes which is great but requires me to have separate files for the module and it's styles. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

TheWebTech · 2019-04-23T19:25:19Z

If that is true then perhaps it's an issue with the MJML App and not MJML itself. The app Bombs when you try it. so I assumed it was an issue with MJML itself.

iRyusa · 2019-04-23T19:27:06Z

Please share some code, it should be handled properly within the app too. We just don’t look for infinite loop

…

On 23 Apr 2019, at 21:25, Jon McLaren ***@***.***> wrote: If that is true then perhaps it's an issue with the MJML App and not MJML itself. The app Bombs when you try it. so I assumed it was an issue with MJML itself. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

TheWebTech · 2019-04-23T19:40:21Z

Working on a reduced test case, I am seeing that when there's nothing else in the email it's okay with the mj-head being in the child file.

Same exact code for how I'm including it, and in the included file, just without the rest of the contents of the email.

Will post when I figure out what thing it doesn't like.

TheWebTech · 2019-04-23T20:12:01Z

Okay I was able to get a really simplified reduced test case going, It appears to be related to having other includes in the parent file.
PARENT MJML FILE

<mjml>
<!-- parent file -->
  <mj-body>
    
    
    <mj-include path="./modules/reduced-test-include.mjml" />

    <!-- if below include is removed  header displays fine. the attributes carry over -->
    <mj-include path="./modules/reduced-test-problem.mjml" />
    
  </mj-body>
</mjml>

REDUCED-TEST-INCLUDE.MJML (produces a red rectangle)

<mjml>
  <mj-head>
    <mj-attributes>
      
      <mj-class name="company-header" padding-top="21px" padding-bottom="19px" background-color="red" /> 
</mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section mj-class="company-header">
     
    </mj-section>
  
  </mj-body>
</mjml>

REDUCED-TEST-PROBLEM.MJML

<mjml>
  <mj-body>
   <!-- doesn't matter what's in here at all, just having it included kills it-->
  </mj-body>
</mjml>

TheWebTech · 2019-04-23T20:22:14Z

Updated the files to remove everything that was not necessary to reproduce/tell if you're seeing the issue.

Unless I'm missing something insanely obvious - there appears to be a bug in the way it's compiling.

When i try the copy html button in the mjml app it doesn't copy anything so that makes me think it's not compiling and is likely an issue with MJML itself, not the app.

I'm using MJML app version 2.11.0 on Mac OS X 10.14.4
MJML version 4.3.1

Oh and to confirm I am including the files properly, if I add text to the reduced-test-problem.mjml file and comment out the include to reduced-test-include.mjml it shows that text. So the problem is that the compiler doesn't like having both includes in the file.

probablyabear · 2019-04-23T22:49:08Z

FYI, I tested this with MJML 4.4.0-beta.1 without using the MJML app, and the multiple/duplicate includes looks to functioning correctly.

TheWebTech · 2019-04-24T02:12:50Z

FYI, I tested this with MJML 4.4.0-beta.1 without using the MJML app, and the multiple/duplicate includes looks to functioning correctly.

Duplicate?

probablyabear · 2019-04-24T18:31:03Z

Sorry, I misread your previous example.

Without using the app, I was able to include an MJML partial in my index with its styles contained in its mj-head. It compiles as expected.

index.mjml

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="green" color="green" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column width="100%">
        <mj-text mj-class="green">
          Basic column here. It's green.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-include path="./partials/testPartial.mjml" />
  </mj-body>
</mjml>

testPartial.mjml

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="red" color="red" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column width="100%">
        <mj-text mj-class="red">
          Include 1 is here. It's red.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

I did notice that if I try to include another MJML partial before the closing mj-body tag, the app errors out with a Error while rendering the file : TypeError: addMediaQuery is not a function at MjColumn.getColumnClass.

Example code that creates the error is below.

index.mjml

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="basic-column" color="green" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column width="100%">
        <mj-text mj-class="basic-column">
          Basic column here. It's green.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-include path="./partials/testPartial.mjml" />
    <!-- Including the second partial below causes the error -->
    <mj-include path="./partials/testPartialTwo.mjml" />
  </mj-body>
</mjml>

testPartial.mjml

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="red" color="red" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column width="100%">
        <mj-text mj-class="red">
          Include 1 is here. It's red.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

testPartialTwo.mjml

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="blue" color="blue" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column width="100%">
        <mj-text mj-class="blue">
          Test include 2 is here. It's blue.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
``

iRyusa · 2019-04-24T19:14:49Z

We'll fix this in the next beta then if you can reproduce on cli good job !

…

On Wed, Apr 24, 2019 at 8:31 PM stephenrust ***@***.***> wrote: Sorry, I misread your previous example. Without using the app, I was able to include an MJML partial in my index with its styles contained in mj-head. It compiles as expected. *index.mjml* <mjml> <mj-head> <mj-attributes> <mj-class name="green" color="green" /> </mj-attributes> </mj-head> <mj-body> <mj-section> <mj-column width="100%"> <mj-text mj-class="green"> Basic column here. It's green. </mj-text> </mj-column> </mj-section> <mj-include path="./partials/testPartial.mjml" /> </mj-body> </mjml> *testPartial.mjml* <mjml> <mj-head> <mj-attributes> <mj-class name="red" color="red" /> </mj-attributes> </mj-head> <mj-body> <mj-section> <mj-column width="100%"> <mj-text mj-class="red"> Include 1 is here. It's red. </mj-text> </mj-column> </mj-section> </mj-body> </mjml> I did notice that if I try to include another MJML partial before the closing mj-body tag, the app errors out with a Error while rendering the file : TypeError: addMediaQuery is not a function at MjColumn.getColumnClass . Example code that creates the error is below. *index.mjml* <mjml> <mj-head> <mj-attributes> <mj-class name="basic-column" color="green" /> </mj-attributes> </mj-head> <mj-body> <mj-section> <mj-column width="100%"> <mj-text mj-class="basic-column"> Basic column here. It's green. </mj-text> </mj-column> </mj-section> <mj-include path="./partials/testPartial.mjml" />  <mj-include path="./partials/testPartialTwo.mjml" /> </mj-body> </mjml> *testPartial.mjml* <mjml> <mj-head> <mj-attributes> <mj-class name="red" color="red" /> </mj-attributes> </mj-head> <mj-body> <mj-section> <mj-column width="100%"> <mj-text mj-class="red"> Include 1 is here. It's red. </mj-text> </mj-column> </mj-section> </mj-body> </mjml> *testPartialTwo.mjml* <mjml> <mj-head> <mj-attributes> <mj-class name="blue" color="blue" /> </mj-attributes> </mj-head> <mj-body> <mj-section> <mj-column width="100%"> <mj-text mj-class="blue"> Test include 2 is here. It's blue. </mj-text> </mj-column> </mj-section> </mj-body> </mjml> `` — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1585 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAELHTI6LBADPJYD6U7SAOLPSCROTANCNFSM4HH5UU3Q> .

TheWebTech · 2019-04-29T14:31:57Z

Thank you for working on a fix!

I'll be honest the fix goes over my head. Glad you guys who have more experience in this project are active. I don't know that I could have figured that fix out on my own.

fix #1585 fix handling of mj-head and includedIn in mj-includes

iRyusa added a commit that referenced this issue Apr 29, 2019

Merge pull request #1590 from mjmlio/fix-1585

1090e83

fix #1585 fix handling of mj-head and includedIn in mj-includes

iRyusa mentioned this issue May 27, 2019

Mj Include crash on latest Beta #1607

Closed

kmcb777 closed this as completed in 55416cc Jul 17, 2019

Sojaner mentioned this issue Aug 23, 2023

Not possible to include root element SebastianStehle/mjml-net#177

Closed

jaredculp mentioned this issue Mar 13, 2024

<mj-include> does not work inside <mj-head> mgd020/mjml-python#26

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for Included files to have mj-head #1585

Add support for Included files to have mj-head #1585

TheWebTech commented Apr 23, 2019

iRyusa commented Apr 23, 2019 via email

TheWebTech commented Apr 23, 2019

iRyusa commented Apr 23, 2019 via email

TheWebTech commented Apr 23, 2019

TheWebTech commented Apr 23, 2019 •

edited

Loading

TheWebTech commented Apr 23, 2019 •

edited

Loading

probablyabear commented Apr 23, 2019

TheWebTech commented Apr 24, 2019

probablyabear commented Apr 24, 2019 •

edited

Loading

iRyusa commented Apr 24, 2019 via email

TheWebTech commented Apr 29, 2019

Add support for Included files to have mj-head #1585

Add support for Included files to have mj-head #1585

Comments

TheWebTech commented Apr 23, 2019

iRyusa commented Apr 23, 2019 via email

TheWebTech commented Apr 23, 2019

iRyusa commented Apr 23, 2019 via email

TheWebTech commented Apr 23, 2019

TheWebTech commented Apr 23, 2019 • edited Loading

TheWebTech commented Apr 23, 2019 • edited Loading

probablyabear commented Apr 23, 2019

TheWebTech commented Apr 24, 2019

probablyabear commented Apr 24, 2019 • edited Loading

iRyusa commented Apr 24, 2019 via email

TheWebTech commented Apr 29, 2019

TheWebTech commented Apr 23, 2019 •

edited

Loading

TheWebTech commented Apr 23, 2019 •

edited

Loading

probablyabear commented Apr 24, 2019 •

edited

Loading