Transformers in Node.js

You can import Transformers into your Node app and transform your HTML emails, even without using Maizzle to build them 🤯

To get started, simply import Maizzle:

const Maizzle = require('@maizzle/framework')

You now have access to all Transformers:

const html = Maizzle.inlineCSS('html string', {/*Juice inliner options*/}).then(html => html)

It's recommended that you only import the Transformers that you need:

const {inlineCSS) = require('@maizzle/framework')
const html = inlineCSS('html string', {}).then(html => html)

All Transformers are async, so you should use async/await or Promises.

Available Transformers

All Maizzle Transformers are available, and you can configure them as you'd expect.

attributeToStyle

By default, this does nothing to your HTML.

You'll need to pass an array of attributes as the second parameter:

const {attributeToStyle) = require('@maizzle/framework')

const html = attributeToStyle('html string', ['width'])

See supported attributes.

applyBaseImageUrl

const {applyBaseImageUrl} = require('@maizzle/framework')

const html = applyBaseImageUrl('<img src="image.jpg">', 'https://example.com/').then(html => html)

// https://example.com/image.jpg

applyExtraAttributes

const {applyExtraAttributes} = require('@maizzle/framework')

const html = applyExtraAttributes('<div></div>', {div: {role: 'article'}}).then(html => html)

// <div role="article"></div>

inlineCSS

You can pass your own CSS with the customCSS option, and inlineCSS will use it.

If you don't specify customCSS, your HTML will need to have a <style> with CSS tag in the <head>.

const {inlineCSS} = require('@maizzle/framework')

const html = inlineCSS('html string', {customCSS?, ...juiceOptions?}).then(html => html)

minify

const {minify} = require('@maizzle/framework')
const options = {/* html-crush options */}

const html = minify('html string', options).then(html => html)

markdown

const {markdown} = require('@maizzle/framework')
const options = {/* markdown-it options */}

const html = markdown('<md>### Heading 3</md>', options).then(html => html)

prettify

const {prettify} = require('@maizzle/framework')
const options = {/* prettify options */}

const html = prettify('html string', options).then(html => html)

preventWidows

const {preventWidows} = require('@maizzle/framework')

const html = preventWidows('lorem ipsum').then(html => html)

// lorem&nbsp;ipsum

removeAttributes

const {removeAttributes} = require('@maizzle/framework')
const options = [
  {name: 'role', value: 'article'}
]

const html = removeAttributes(`<div style="" role="article"></div>`, options).then(html => html)

// <div></div>

removeInlineBgColor

const {removeInlineBgColor} = require('@maizzle/framework')

const html = removeInlineBgColor(`<td style="background-color: red" bgcolor="red">test</td>`).then(html => html)

// <td style="" bgcolor="red">test</td>

removeInlineSizes

const {removeInlineSizes} = require('@maizzle/framework')
const options = {
  width: ['TD'],
  height: ['TD']
}

const html = removeInlineSizes(`<td style="width:100%;height:10px;">test</td>`).then(html => html)

// <td style="">test</td>

removeUnusedCSS

const {removeUnusedCSS} = require('@maizzle/framework')
const options = {/* email-comb options */}

const html = removeUnusedCSS(`<div class="unused">test</div>`, options).then(html => html)

// <div>test</div>

replaceStrings

const {replaceStrings} = require('@maizzle/framework')

const html = replaceStrings('initial text', {initial: 'updated'}).then(html => html)

// updated text

safeClassNames

const {safeClassNames} = require('@maizzle/framework')

const html = safeClassNames('<div class="sm:text-left w-1.5">foo</div>', {'.': '_dot_'}).then(html => html)

// <div class="sm-text-left w-1_dot_5">foo</div>

ensureSixHEX

const {ensureSixHEX} = require('@maizzle/framework')

const html = ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>').then(html => html)

// <td style="color: #ffffcc" bgcolor="#000000"></td>

transformContents

const {transformContents} = require('@maizzle/framework')

const html = transformContents('<div uppercase>test</div>', {uppercase: string => string.toUpperCase()}).then(html => html)

// <div>TEST</div>

addURLParams

const {addURLParams} = require('@maizzle/framework')

const html = addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'}).then(html => html)

// <a href="https://example.com?bar=baz&qix=qux">test</a>