ivank
commented
3 weeks ago After reading https://thoughtbot.com/blog/building-templated-emails-with-mjml I figured the vscode extension should be able to do this! Turns out no, you can't switch to the .mjmlconfig.js file in order to use preprocessors.
I created a PR to fix this in this extension https://github.com/mjmlio/vscode-mjml/pull/47 but while we wait for them to approve / merge it, I've deployed my own forked version https://marketplace.visualstudio.com/items?itemName=IvanKeirn.vscode-mjml-custom-path
We're using that in order to preview files with handlebars templates - it's quite nice!
I use EJS templating alongside MJML (and the same would apply for handlebars). For example I have files like
my-template.mjml.ejs, and I render it in a pipeline likeRender EJS->Render MJML.This is all works fine, but's it's quite a pain to work with actually building the templates in the IDE with the MJML plugin. I can assign the
.mjml.ejsfile type to the MJML language no problem, but this MJML plugin pukes all over the place with EJS (or Handlebars) templating syntax.For example:
<mj-button background-color="<%= _.colourPrimary %>" >...</mj-button>like "Attribute xyz has invalid format"<% if (condition) { %><mj-text>...</mj-text><% } %>) in a non-end-tag element then it just pukes entirely and won't render anything past that point.I realise the scope of templating support in this plugin could be huge, and also it is out-of-scope for MJML itself. But seeing as templating with MJML is a very common use-case, it would be a much better developer experience if the MJML rendering plugin had some sort of leniency/compatibility with it.
For example, as a minimal solution, it could just be "aware" of EJS and Handlebars tags and just ignore anything inside a
/<%.*%>/or/{{.*}}/regex pattern. So that it least it can continue rendering.