Search code examples
prettiermjmlprettier-vscode

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

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:

Solution

  • 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>

    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.