What are Transformers?

Transformers in Maizzle are functions that basically take a string of HTML, do something with it, and then return it for further processing.

They run after your Template has been compiled and allow you to manipulate the HTML in various ways, like prepending a base URL to all <img> tags or preventing widow words.

Some of the Transformers help you automate tedious tasks that are required when developing HTML emails, like inlining CSS, automatically adding attributes for better accessibility, or generating plaintext versions of your emails.

Transformers list

Most Transformers are enabled by default:

• Safe Class Names - rewrites Tailwind CSS class names to email-safe alternatives
• Filters - Liquid-like filters as HTML attributes
• Markdown - converts Markdown to HTML
• Prevent Widows - enables an HTML attribute that prevents widow words
• Add Attributes - improves accessibility by adding alt and role attributes
• Remove Attributes - removes empty style and class attributes
• Six-digit HEX - converts 3-digit HEX colors to 6-digit
• Outlook Tags - simplifies writing MSO conditionals for Outlook
• resolveProps - resolves CSS variables to their static values
• resolveCalc - resolves CSS calc() functions to their static values

However, some are opt-in and need to be explicitly enabled in your config.js:

• Inline CSS - inlines CSS styles into the HTML
• Purge CSS - removes unused CSS classes from your HTML
• Shorthand CSS - converts long-hand CSS to shorthand in style attributes
• Base URL - prepends a string to configured attributes in HTML
• URL parameters - adds URL parameters to configured HTML tags
• Replace strings - replaces strings through regular expressions
• Prettify - pretty-prints the HTML
• Minify - minifies the HTML

Disabling

You may disable all Transformers by setting useTransformers to false:

export default {
  useTransformers: false,
}

Execution order

Transformers in Maizzle need to run in a specific order, see it on the build process page.

API

Maizzle Transformers can also be used programmatically in your application. You can inline some CSS or minify HTML even without using Maizzle to build your emails.

See the documentation of each Transformer for usage examples.