Extra Attributes

Add new attributes to elements in your HTML

Introduction

This PostHTML plugin can add extra attributes to elements in your HTML:

• does not overwrite existing attributes (configurable)
• appends class names to existing ones
• supports a variety of CSS-like selectors

Installation

$ npm i posthtml posthtml-extra-attributes

Usage

const posthtml = require('posthtml')
const addAttributes = require('posthtml-extra-attributes')

posthtml([
    addAttributes({
      attributes: {
        div: {
          class: 'new',
          id: 'new'
        }
      }
    })
  ])
  .process('<div class="test">Test</div>')
  .then(result => console.log(result.html))

  // <div class="test new" id="new">Test</div>

Options

attributes

Type: object
Default: {}

An object defining which elements should get what attributes.

Elements can be any posthtml-match-helper selector.

Select by tag

Add id="new" to all <div> tags:

const attributes = {
  div: {
    id: 'new'
  },
}

Select by class

Add editable="true" to all elements with a test class:

const attributes = {
  '.test': {
    'editable': true
  },
}

Select by id

Add class="new" to any element with id="test":

const attributes = {
  '#test': {
    class: 'new'
  },
}

If the element already has a class attribute, the value will be appended:

<div id="test" class="test">Test</div>

... will result in:

<div id="test" class="test new">Test</div>

Select by attribute

Adds aria-roledescription="slide" to all elements with a role attribute:

const attributes = {
  '[role]': {
    'aria-roledescription': 'slide'
  },
}

Select multiple tags

Add multiple attributes to multiple elements in one go:

const attributes = {
  'div, p': {
    class: 'test',
  },
  'div[role=alert], section.alert': {
    class: 'alert'
  },
}

overwrite

Type: boolean
Default: false

By default, the plugin will not overwrite existing attribute values.

Set this option to true to enable attribute value overwriting:

posthtml([
    addAttributes({
      attributes: {
        div: {
          id: 'new'
        }
      },
      overwrite: true
    })
  ])
  .process('<div id="test">Test</div>')
  .then(result => console.log(result.html))

  // <div id="new">Test</div>