maizzle/framework v2.6.0

on GitHub

This release introduces a new attributeToStyle Transformer and exposes all Transformer methods, so you can import them into your Node app and transform your HTML emails even without using Maizzle to build them.

New Features

attributeToStyle

Allows duplicating certain HTML attributes as inline CSS.

attributeToStyle is disabled by default, so your HTML won't change unless you want it to.

Enable for all supported attributes:

// config.production.js
module.exports = {
  inlineCSS: {
    attributeToStyle: true
  }
}

Enable only for these attributes:

// config.production.js
module.exports = {
  inlineCSS: {
    attributeToStyle: ['width', 'bgcolor', 'background']
  }
}

Supported attributes

width

Inlined as: width: ${value}${unit}

Notes: supports only px and % values (defaults to px)

height

Inlined as: height: ${value}${unit}

Notes: supports only px and % values (defaults to px)

bgcolor

Inlined as: background-color: ${value}

background

Inlined as: background-image: url('${value}')

align

On <table> elements:

• inlines float: ${value} for left or right values
• inlines margin-left: auto; margin-right: auto for center

On any other elements, gets inlined as text-align: ${value}

valign

Inlined as vertical-align: ${value}

applyWidthAttributes

New inlineCSS option that now makes duplicating inline CSS width as HTML attributes opt-in.

Array of HTML elements that will receive width attributes based on inline CSS width.

Example:

module.exports = {
  inlineCSS: {
    enabled: true,
    applyWidthAttributes: ['TABLE', 'TD', 'TH']
  }
}

By default, this is set to an empty array [] so that no width attributes are added.

applyHeightAttributes

New inlineCSS option that now makes duplicating inline CSS height as HTML attributes opt-in.

Array of HTML elements that will receive height attributes based on inline CSS height.

Example:

module.exports = {
  inlineCSS: {
    enabled: true,
    applyHeightAttributes: ['TABLE', 'TD', 'TH']
  }
}

By default, this is set to an empty array [] so that no height attributes are added.

Transformers in Node.js

You can now use any of Maizzle's Transformers right in your Node app.

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

• attributeToStyle
• applyBaseImageUrl
• applyExtraAttributes
• inlineCSS
• minify
• markdown
• prettify
• preventWidows
• removeAttributes
• removeInlineBgColor
• removeInlineSizes
• removeUnusedCSS
• replaceStrings
• safeClassNames
• ensureSixHEX
• transformContents
• addURLParams

Changed

styleToAttribute defaults

[styleToAttribute] will now only duplicate vertical-align as align by default (403e9ec)

Fixed

• fix(posthtml): check if key exists #354, 02ae409

v2.5.1...v2.6.0