Add attributes

Maizzle can automatically add attributes to HTML elements in your email templates.

This can be useful for:

adding default attributes based on build Environment or Template
not having to write required attributes all the time
automating email accessibility

The extraAttributes key in your config defines which elements in your emails should receive which attributes with what values.

Usage

Here is how you would add a role="article" attribute to a <div>:

config.js

module.exports = {
  extraAttributes: {
    div: {
      role: 'article'
    }
  }
}

Default attributes

By default, Maizzle makes any <table> accessible, resets its spacing, and ensures that an empty alt="" attribute is added to images that don't have it.

This is the default configuration:

let attributes = {
  table: {
    cellpadding: 0,
    cellspacing: 0,
    role: 'presentation'
  },
  img: {
    alt: ''
  }
}

Disabling

You may turn this off by setting extraAttributes to false in your config:

config.js

module.exports = {
  extraAttributes: false
}

Attributes will be added only if they're not already present on the element.

Selectors

Tag, class, id, and attribute selectors are supported:

config.js

module.exports = {
  extraAttributes: {
    div: {
      id: 'new'
    },
    '.test': {
      editable: true
    },
    '#test': {
      'data-foo': 'bar'
    },
    '[role]': {
      'aria-roledescription': 'slide'
    }
  }
}

Multiple selectors

Add multiple attributes to multiple elements in one go:

config.js

module.exports = {
  extraAttributes: {
    'div, p': {
      class: 'test'
    },
    'div[role=alert], section.alert': {
      class: 'alert'
    }
  }
}

Tailwind CSS

Any Tailwind CSS classes that you add with this Transformer need to be added to your content key:

tailwind.config.js

module.exports = {
  content: ['config.js'],
}

API

app.js

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

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