Skip to content

Add new attributes to elements in your HTML

License

Notifications You must be signed in to change notification settings

posthtml/posthtml-extra-attributes

Repository files navigation

Extra Attributes

Add new attributes to elements in your HTML

Version Build License Downloads

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>