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

mjml --validate does not parse .mjmlconfig #660

Closed
sastraxi opened this issue May 2, 2017 · 1 comment
Closed

mjml --validate does not parse .mjmlconfig #660

sastraxi opened this issue May 2, 2017 · 1 comment
Labels
CLI
Milestone
4.1.0

Comments

@sastraxi
Copy link

sastraxi commented May 2, 2017 •
edited

mjml version: 3.1.1
my .mjmlconfig:

{
  "packages": [
    "./lib/mjml/TrackingPixel.js"
  ]
}

my custom component (before babel):

import { MJMLElement } from 'mjml-core';
import React from 'react';
import Image from 'mjml-image';

const Component = ({ mjAttribute }) => // eslint-disable-line
  <Image
    src={mjAttribute('url')}
    width={1}
    height={1}
  />;

const TrackingPixel = MJMLElement(Component);

TrackingPixel.tagName = 'tracking-pixel';
TrackingPixel.parentTag = ['mj-container'];
TrackingPixel.endingTag = false;
TrackingPixel.defaultMJMLDefinition = {
  content: '',
  attributes: {
    url: '',
  },
};

export default TrackingPixel;

an example template:

<mjml>
  <mj-body>
    <mj-container>
      <tracking-pixel url={trackingurl} />
      <mj-section>
        <mj-column>

          <mj-image width="100" src="..."></mj-image>

          <mj-divider border-color="#F45E43"></mj-divider>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Password Reset</mj-text>
          
          <mj-text>
            A little bird told us that you're unable to log in. We're here to help!
          </mj-text>
          
          <mj-button href="{url}" font-family="Helvetica" background-color="#f45e43" color="white">
            Reset my password
          </mj-button>

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

Validating the template before compiling it to HTML gives me this:

cameron@hans $ mjml --validate templates/email/reset-password.mjml 
Line 4 (tracking-pixel) — Element tracking-pixel doesn't exist or is not registered

But compiling it to HTML works, and the tracking pixel shows up in the compiled template.

cameron@hans $ mjml -r ./templates/email/reset-password.mjml && cat reset-password.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <title></title>
  <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  p { display: block; margin: 13px 0; }
</style>
<!--[if !mso]><!-->
<style type="text/css">
  @media only screen and (max-width:480px) {
    @-ms-viewport { width:320px; }
    @viewport { width:320px; }
  }
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
  .outlook-group-fix {
    width:100% !important;
  }
</style>
<![endif]-->

<!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
    <style type="text/css">

        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

    </style>
  <!--<![endif]--><style type="text/css">
  @media only screen and (min-width:480px) {
    .mj-column-per-100 { width:100%!important; }
  }
</style>
</head>
<body>
  <div><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:1px;"><img alt="" title="" height="1" src="{trackingurl}" style="border:none;border-radius:0px;display:block;outline:none;text-decoration:none;width:100%;height:1px;" width="1"></td></tr></tbody></table><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0px auto;max-width:600px;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-wrap:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:100px;"><img alt="" title="" height="auto" src="..." style="border:none;border-radius:0px;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="100"></td></tr></tbody></table></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:10px 25px;"><p style="font-size:1px;margin:0px auto;border-top:4px solid #F45E43;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:4px solid #F45E43;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:10px 25px;" align="left"><div class="" style="cursor:auto;color:#F45E43;font-family:helvetica;font-size:20px;line-height:22px;text-align:left;">Password Reset</div></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:10px 25px;" align="left"><div class="" style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">A little bird told us that you're unable to log in. We're here to help!</div></td></tr><tr><td style="word-wrap:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0"><tbody><tr><td style="border:none;border-radius:3px;color:white;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#f45e43"><a href="{url}" style="text-decoration:none;line-height:100%;background:#f45e43;color:white;font-family:Helvetica;font-size:13px;font-weight:normal;text-transform:none;margin:0px;" target="_blank">Reset my password</a></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></div>
</body>
</html>
@iRyusa iRyusa added the CLI label May 10, 2017
@dhcdata dhcdata mentioned this issue Oct 25, 2017
Closed
@kmcb777
Copy link
Collaborator

kmcb777 commented Apr 25, 2018

--validate option in mjml4 will be reintroduced by b4c9f18
and .mjmlconfig handling is reintroduced by 7c77d44
so this issue will be fixed in v4.1.0

@kmcb777 kmcb777 added this to the 4.1.0 milestone Apr 25, 2018
@iRyusa iRyusa closed this as completed Jul 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CLI
Projects
None yet
Milestone
4.1.0
Development

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