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 baseconfig.js.
For example, running maizzle build production will tell Maizzle to look for the config.production.js file at your current location, and merge it on top of config.js.
When running maizzle build or maizzle serve, only the base config.js will be used.
beforeCreate()
The beforeCreate event (CLI-only) is triggered, giving you access to the config before Maizzle loops over your Templates to compile them.Clean destination
The destination directories that you have defined underbuild.output.path in your environment config are deleted.
Compile templates
Each Template file is parsed and compiled:Compute config
A unique Template
config is computed by merging the Template’s Front Matter keys with the Environment configbeforeRender() event
beforeRender() event is triggered
Render HTML
The HTML is rendered with PostHTMLYour Environment name and all
config options (including any you defined in Front Matter) are exposed under the page object, which you can access through expressions.PostHTML plugins that are used as part of the rendering process:- envTags - core plugin that enables
<env:?>tags - envAttributes - core plugin that enables attributes like
src-{env} - expandLinkTags - core plugin that expands local
<link>tags into<style>tags - postcssPlugin - this is where the Tailwind CSS magic happens
- fetchPlugin - enables the
<fetch>tag posthtml-component- the PostHTML plugin that powers Maizzle’s components
afterRender() event
afterRender() event is triggered
Transformers
The compiled HTML is now passed on to a series of Transformers. Most of them are enabled by default, but some need to be explicitly enabled in yourconfig.js.
The order in which they’re executed is exactly as follows:
coreTransformers
Remove
<plaintext> tags when developing locally, enable no-inline attribute for <style> tagssafeClassNames
safeClassNames - escaped characters in
<head> and <body> CSS classes are replaced with email-safe alternativesfilters
filters - Liquid-like filters are applied to the HTML
markdown
markdown is compiled
widowWords
widowWords - widow words are prevented in tags with the
prevent-widows attributeattributeToStyle
attributeToStyle - translates HTML attributes to inline CSS
inlineCSS
inlineCSS - CSS is inlined
removeAttributes
removeAttributes - HTML attribute removal based on your config
addAttributes
addAttributes - user-configured attributes are added to tags
baseURL
baseURL - a base URL is prepended to configured attribute values
urlParameters
urlParameters - configured parameters are added to URLs
sixHex
sixHex - ensures six digit HEX color codes are used in
bgcolor and color attributesposthtmlMSO
posthtmlMSO -
<outlook> tags are replaced with the correct MSO commentspurgeCSS
purgeCSS - unused CSS is removed from
<style> tags and HTML attributestemplateTag
templateTag -
<template> tags are replaced with their contentreplaceStrings
replaceStrings - strings are replaced based on your config
prettify
prettify - HTML is prettified
minify
minify - HTML is minified
afterTransformers()
The afterTransformers event is triggered.Plaintext
A plaintext version is created at the configured location, ifplaintext was enabled.
Write to disk
The compiled HTML is saved at the configured location, with the configured extension.Copy static files
All files and folders inbuild.static.source are copied to build.static.destination.