Mjml: Allow for global CSS styling

[arnaudbreton]

Following up on issues #19, we want to provide MJML users with a way to add regular CSS styles in their MJML document. The idea here is to discuss openly here and to settle on a final implementation by the end of the week.

A new tag named mj-style is introduced to contain global CSS styles:

<mj-style>
 .foobar {
  color: red;
  width: 100px;
 }
</mj-style>

The MJML rendering engine will make the best effort at the end of the rendering process to inline all these CSS rules on the targetted HTML elements, since most email clients strip out the style element (in head section or anywhere else). The following example:

<mj-style>
 .foobar {
  color: red;
  width: 100px;
 }
</mj-style>
<mj-raw>
   <p class="foobar">Hello world!</p>
</mj-raw>

would lead to the following HTML (not repeating all the HTML code):

<p style="color: red; width: 100%">Hello world</p>

For better semantic and separation of content and meta definition, this tag is embedded in the new mjml root tag described in #78.

[ppawlak]

Hi,

I am currently considering using MJML to style my emails and not being able to define global CSS style is a deal breaker. So I am very interested into the resolution of this issue :)

Regarding your proposal I find awkward to have to use raw HTML to apply styling. IMO the point of using MJML is to avoid to use HTML whenever it's possible.
I would prefer something like:

<mj-text class="foobar">Hello world!</mj-text>

[arnaudbreton]

@ppawlak thanks for your feedback. To apply global attributes definition to MJML tags, please see the implementation suggested in #79

[ppawlak]

@arnaudbreton Thanks for pointing #79 out. _mj-class_ is definitely what I had in mind.

Now I understand the point of raw HTML.
In the CSS definition I think I will find it more useful to use a tag name instead of a class.

<mj-style>
 p {
  color: red;
  width: 100px;
 }
</mj-style>

Will it work too?

[arnaudbreton]

@ppawlak yes, as mentioned in the issue, the role of mj-style is to provide you with a tag containing regular CSS, not parsed, which will apply on the final HTML - once inlined.

[peteringram0]

Is this going in the next build?

[g0ddish]

How can we get about getting this rolled up? I would love this feature in the next build; is there anything I can do to help?

[evans-ben]

+1 Would love to see this feature too and happy to help where possible!

[jitendravyas]

+1 This would be helpful for raw HTML element. @ppawlak I would prefer to not to style HTML tags directly because it could be overridden by client's own styling with !important and also there are chances that we might need to style to different <p>tags differently in the same email and have to override default style each time

[ableandre]

+1 on getting this implemented in the next build. Just started using MJML this afternoon and the lack of this feature is going to be a deal breaker for me.

When this gets added, I'll try it out again. Back to Foundation Ink I guess.

[iRyusa]

We have to check how https://github.com/Automattic/juice can do the job for us.

[iRyusa]

Mj-style will most likely shipped with 2.4. If you want to test it, feel free to use the juice-css branch 👍

[ableandre]

Will do! Thanks
On Fri, Jul 8, 2016 at 7:17 AM Maxime Brazeilles [email protected]
wrote:

Mj-style will most likely shipped with 2.4. If you want to test it, feel
free to use the juice-css branch 👍

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/81#issuecomment-231370973, or mute
the thread
https://github.com/notifications/unsubscribe/AGlyLQs1iUkIXYxLSgxrwHKnoQh1ezuJks5qTluvgaJpZM4Hfcdl
.

[kdiogenes]

I added some global CSS with the following inside a mj-container:

<mj-raw>
  <style type="text/css">
    body {
      background-color: #ccc;
    }
  </style>
</mj-raw>

[iRyusa]

Hi there !

Mj-style is now in MJML 3 ! The CSS is inlined at the end so no media queries atm.

[br4nnigan]

Notice: the documentation gives the impression inline="inline" was optional, but this feature is only introduced in 3.3.0-beta.3

[ckrack]

The documentation contains some buggy HTML, which prevents the code example from being rendered.

[ngarnier]

Thanks, we'll update (if you click to see in the try it live, it's all good though)

[PickRelated]

Is there a way to use mj-style tag in files included by mj-include?

[iRyusa]

Yeah mj-include file can be a full MJML document :

<!-- head.mjml -->
<mjml> 
  <mj-head>
    <!-- will be added too -->
    <mj-style> things </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <!-- Everything here will replace the mj include tag -->
      <mj-section>...</mj-section>
    </mj-container>
  </mj-body>
</mjml>

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

[PickRelated]

@iRyusa wow thanks for rapid answer! I tried that, but it did not work. Obviously, I have missed something. I've tried it again and it definitely works! Thank you!

[terussell85]

Is this still working in the current 3.3.0 release? The try-it-live example from the dcoumentation appears to work (https://mjml.io/try-it-live/components/head-style) but running the same MJML template through a build locally with 3.3.0 doesn't appear inline the CSS.

[ngarnier]

Hi @terussell85, sorry for this, there was an issue in the 3.3.1 release. It's now fixed, you can update with npm install mjml

[terussell85]

@ngarnier No problem! Thanks for the quick response and hotfix!