Build process
When you run maizzle build
, your templates go through a series of events that compile them to plain HTML and apply various, email-specific transformations.
To get a better understanding of how Maizzle builds your emails, here's a step-by-step guide of what's going on under the hood:
Environment config
First, a global configuration object is computed by merging your Environment config on top of the base config.js
.
For example, running maizzle build production
will tell Maizzle to look for the config.production.js
Environment config at your current location, and merge it on top of config.js
.
Otherwise, if you're simply running the maizzle build
or maizzle serve
commands, only the base config.js
will be used.
Compile Tailwind CSS
Tailwind CSS is compiled, and various PostCSS plugins are enabled depending on the build environment and your config.
Clean destination
The destination directories that you have defined under destination.path
in your environment config are deleted.
Copy sources
All of your source Templates are copied over to the destination.path
directories.
This is done so that we can then process the files in-place, which makes it easier to preserve your directory structure.
beforeCreate()
The beforeCreate event (CLI-only) is triggered, giving you access to the config before Maizzle loops over your Templates to compile them.
Compile templates
Each Template is parsed and compiled in-place, in your destination directory:
- Maizzle reads the Template file
- It extracts its Front Matter
- A unique Template
config
is computed by merging the Template's Front Matter keys with the Environmentconfig
- beforeRender event is triggered
- PostHTML renders the template string
Your Environment name, the compiled Tailwind CSS, and allconfig
options (including any you defined in Front Matter) are exposed to all your templating parts as PostHTML expressions that you can use, under thepage
object. - afterRender event is triggered
- The compiled HTML is now passed on to a series of Transformers.
The order of events is exactly as follows, and they all happen (or not) depending on how you've configured them in your Environment config or in the Template's Front Matter:- Escaped characters in
<head>
and<body>
CSS classes are replaced with email-safe alternatives filters
are applied to the HTML. For example,<style postcss|tailwindcss>
tags are compiled with PostCSS/Tailwind CSS. posthtml-content is used to transform content marked with those custom attributes.- Markdown is compiled with posthtml-markdownit
- prevent-widows looks for tags containing the
prevent-widows
attribute. When it finds one, it will replace the last space in your text with a
. - attributeToStyle translates HTML attributes to inline CSS
- CSS is inlined with Juice
- Longhand CSS in
style
attributes is converted to shorthand-form - Unused CSS is removed with email-comb
- Inline CSS sizes are removed (
width=""
andheight=""
are preserved) - Inline background colors are removed (
bgcolor=""
is preserved) - Attributes are removed based on your config. By default, Maizzle cleans up any empty
style=""
andclass=""
attributes. - Any extra attributes defined are added to tags
- baseURL is prepended to configured tags
- urlParameters are added to links
- Ensure six digit HEX color codes are used in
bgcolor
andcolor
attributes <outlook>
tags are replaced with the correct MSO comments- Code is prettified/indented for humans, with pretty
- Code is minified with html-crush
- Strings are replaced based on your
replaceStrings
definitions
- Escaped characters in
- afterTransformers event is triggered
- The compiled email template is saved.
9.1. A plaintext version is created at the configured location, if
plaintext
was enabled. Note thatplaintext
processing uses PostHTML, which may transform the compiled HTML. 9.2. The compiled HTML is saved at the configured location, with the configured extension. - Your assets are copied to the destination folder. All files and folders in
templates.assets.source
are copied totemplates.assets.destination
afterBuild()
The afterBuild event is triggered (CLI-only).