Is there a way to configure Prettier so that it doesn't minify inline CSS in .mjml templates?

Question

I'm using .mjml templates and VSCode. I had to install an extension for the highlighting to work correctly but I noticed by Prettier seems to transform inline CSS (which is pretty common in emails) from this:

p,
h1 {
  color: #ffffff;
}
h1,
.text-h1 h1 {
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 16px 0;
  font-weight: 700;
}

to this:

p, h1 { color: #ffffff; } h1, .text-h1 h1 { font-size: 32px; line-height: 1.1; margin: 0 0 16px 0; font-weight: 700; }

The only way I was able to prevent this is by adding a <!-- prettier-ignore --> before the <mj-style> tag but I was wondering if there isn't a better way (configuration?) to get the same result without the extra markup.

See:

• https://github.com/mjmlio/mjml/issues/2557
• Is there a way to tell Prettier that the following "block" has a specific markup type?

Answer 1

Based on my research and also the lack of answers, it looks like the overall MJML tooling ecosystem is not in the best of states. I think for now the best option is to use the workaround I provided. Here is a detailed breakdown of the options available.

Style element <mj-style>: (most likely the best option)

<!-- prettier-ignore -->
<mj-style css-inline="inline" />  
  .content {
     color: green !important;
  }
</mj-style>

• Pros:

  • Works in the online visual editor by copy/pasting the markup.

• Cons:

  • No Prettier formatting (ref).

An external CSS file:

<mj-include path="./default.css" type="css" css-inline="inline" />

• Pros:
  • You can import a CSS file that will get normal Prettier treatment.
  • Standard pattern where CSS lives outside the document.
• Cons:
  • It also won't work with the online MJML editor tool without merging back your CSS file. This is very annoying and makes it hard to maintain.
  • <mj-include> can report miss flagged error depending on our your project is setup.
  • It does not work with the "official" VSCode plugin (you have to use this one).

MJML inline styles:

<mj-text color="#fff" padding="0" font-weight="400" font-size="16px" line-height="1.65" />

• Pros:
  • You don't need CSS.
• Cons:
  • You possibly will repeat a lot of the same style and maintenance can become problematic.

Style element <mj-class>:

<mj-class name="blue" color="blue" />

Pros:

• Benefits from the re-usability of CSS without having to use CSS, avoiding Prettier issues.

Cons:

• Not as flexible as CSS in terms of selectors which can lead to repetition and maintenance issues.