CSS Inlining

Maizzle uses the Juice library to automatically inline your CSS.

Let's first take a look at all the options available:

// config.js
module.exports = {
  inlineCSS: {
    enabled: false,
    styleToAttribute: {
      'background-color': 'bgcolor',
      'background-image': 'background',
      'text-align': 'align',
      'vertical-align': 'valign',
    },
    applySizeAttribute: {
      width: [],
      height: [],
    },
    excludedProperties: null,
  },
  // ...
}

Options

Changing these options in your environment config will apply to all Templates when building emails for that environment.

enabled

Enable automatic CSS inlining. When set to false, inlining will not take place and all other settings inside inlineCSS will be ignored.

styleToAttribute

Defines which CSS properties should Juice duplicate as what HTML attributes.

For example, this property-attribute assignment:

styleToAttribute: {
  'background-color': 'bgcolor',
},

... will transform this:

<table class="bg-gray-300">
  <tr>
    <td>...</td>
  </tr>
</table>

... into this:

<table bgcolor="#e2e8f0">
  <tr>
    <td>...</td>
  </tr>
</table>

applySizeAttribute

Specify an array of HTML tag names for which the inliner should duplicate inline CSS widths and heights as width="" and height="" attributes.

These are passed to Juice, which will add any inline width and height CSS rules it finds as HTML attributes, but only for the tags specified here.

Example:

module.exports = {
  inlineCSS: {
    applySizeAttribute: {
      width: ['TABLE', 'TD', 'TH', 'IMG', 'VIDEO'],
      height: ['TABLE', 'TD', 'TH', 'IMG', 'VIDEO'],
    },
    //
  },
}

excludedProperties

Array of CSS property names that should be excluded from the CSS inlining process. Names are considered unique, so you need to specify each one you'd like to exclude.

For example:

'excludedProperties' => ['padding', 'padding-left'],

codeBlocks

An object where each value has a start and end to specify fenced code blocks that should be ignored during parsing and inlining.

// config.js
module.exports = {
  inlineCSS: {
    codeBlocks: {
      'ASP': {
        start: '<%',
        end: '%>'
      }
    }
    // ..
  },
}

Prevent inlining

Use the data-embed attribute on a <style> tag to prevent Juice from inlining the CSS inside it. Useful for writing email client CSS hacks, or for preserving CSS comments in tandem with the removeCSSComments: false Cleanup option.