Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inlining styles makes all elements inside mj-raw tags lowercase #1450

Closed
wdonnell opened this issue Dec 12, 2018 · 4 comments
Closed

Inlining styles makes all elements inside mj-raw tags lowercase #1450

wdonnell opened this issue Dec 12, 2018 · 4 comments

Comments

@wdonnell
Copy link

Describe the bug
When using <mj-style inline="inline"> all html elements inside <mj-raw> and <mj-table> have their tag names and parameters set to lowercase, even if they aren't related to the css selectors.

My intended workflow is using MJML to render a freemarker template, which our application can process to dynamically generate unique emails. The freemarker tags include references to variables, so casing is important.

To Reproduce
Steps to reproduce the behavior:

  1. Render the following MJML using the cli application, or the try-it-live editor:
<mjml>
   <mj-head>
    <mj-style inline="inline">
      .myClass{
        background: red;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-raw>
      <#if someCheckHere()>
        <p class="myClass">${someValueHere}</p>
      </#if>
    </mj-raw>
  </mj-body>
</mjml>

Expected behavior
Body output is:

<body>
  <div style="">
    <#if someCheckHere()>
      <p class="myClass" style="background: red;>${someValueHere}</p>
    </#if>
  </div>
</body>

Ideally, the styles would be inlined with the <p> tag and the unrelated <#if> would remain unchanged. Or, since it's inside an mj-raw tag, everything including the <p> would remain untouched.

Actual behavior
Body output is:

<body>
  <div style="">
    <#if somecheckhere()="">
      <p class="myClass" style="background: red;">${someValueHere}</p>
    </#if>
  </div>
</body>

The style is applied, but the <#if> tag's attribute somecheckhere is lowercased

MJML environment (please complete the following information):

  • MacOS Mojave
  • mjml-core: 4.2.1
  • mjml-cli: 4.2.1
@iRyusa
Copy link
Member

iRyusa commented Dec 12, 2018

Might be related to juice rather than mjml here, @kmcb777 can you check there's an option on juice side ?

@iRyusa
Copy link
Member

iRyusa commented Dec 12, 2018 •
edited
Loading

And I haven't seen that it has been converted to <#if somecheckhere()="">. There's a really low chance that we'll be able to do anything on that part (even juice) because it's a parser issue with htmlparser :/

Thanks for reporting this @wdonnell with an example 👍

@wdonnell
Copy link
Author

Your comments set me on the right track. juice has a configuration option called codeBlocks that let you specify which tags you want ignored when inlining css. It includes a couple defaults. I was able to get this working by editing the source in juice/lib/cheerio.js and adding in the freemarker tags:

module.exports.codeBlocks = {
  EJS: { start: "<%", end: "%>" },
  HBS: { start: "{{", end: "}}" },
  freeMarker: { start: "<#", end: "</#" }
};

Exposing this configuration as a parameter would be a more permanent solution.

@iRyusa
Copy link
Member

iRyusa commented Dec 13, 2018

Maybe open a PR on juice side so we can update juice version for the next release ?

@kmcb777 kmcb777 added this to the 4.4 milestone Dec 21, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@iRyusa @wdonnell @kmcb777