posthtml-extra-attributes

Extra Attributes

Add new attributes to elements in your HTML

Introduction

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

Features:

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

Installation

npm i posthtml posthtml-extra-attributes

Usage

import posthtml from 'posthtml'
import addAttributes from '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>