⚡ Energize

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.nyc_output
+*.log

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - stable
+  - 12
+  - 10

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Cosmin Popovici
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,167 @@
+<div align="center">
+  <img width="150" height="150" title="PostHTML" src="https://posthtml.github.io/posthtml/logo.svg">
+  <h1>Extra Attributes</h1>
+  <p>Add new attributes to elements in your HTML</p>
+
+  [![Version][npm-version-shield]][npm]
+  [![License][license-shield]][license]
+  [![Build][travis-ci-shield]][travis-ci]
+  [![Downloads][npm-stats-shield]][npm-stats]
+</div>
+
+## 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
+
+```js
+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](https://github.com/phloe/posthtml-match-helper) selector.
+
+#### Select by tag
+
+Add `id="new"` to all `<div>` tags:
+
+```js
+const attributes = {
+  div: {
+    id: 'new'
+  },
+}
+```
+
+#### Select by class
+
+Add `editable="true"` to all elements with a `test` class:
+
+```js
+const attributes = {
+  '.test': {
+    'editable': true
+  },
+}
+```
+
+#### Select by id
+
+Add `class="new"` to any element with `id="test"`:
+
+```js
+const attributes = {
+  '#test': {
+    class: 'new'
+  },
+}
+```
+
+If the element already has a `class` attribute, the value will be appended:
+
+```html
+<div id="test" class="test">Test</div>
+```
+
+... will result in:
+
+```html
+<div id="test" class="test new">Test</div>
+```
+
+#### Select by attribute
+
+Adds `aria-roledescription="slide"` to all elements with a `role` attribute:
+
+```js
+const attributes = {
+  '[role]': {
+    'aria-roledescription': 'slide'
+  },
+}
+```
+
+#### Select multiple tags
+
+Add multiple attributes to multiple elements in one go:
+
+```js
+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:
+
+```js
+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>
+```
+
+[npm]: https://www.npmjs.com/package/posthtml-extra-attributes
+[npm-version-shield]: https://img.shields.io/npm/v/posthtml-extra-attributes.svg
+[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-extra-attributes
+[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-extra-attributes.svg
+[travis-ci]: https://travis-ci.org/posthtml/posthtml-extra-attributes/
+[travis-ci-shield]: https://img.shields.io/travis/posthtml/posthtml-extra-attributes/master.svg
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/npm/l/posthtml-extra-attributes.svg

lib/index.js

@@ -0,0 +1,32 @@
+const omit = require('lodash.omit')
+const matchHelper = require('posthtml-match-helper')
+
+module.exports = (options = {}) => tree => {
+  options.attributes = options.attributes || {}
+  options.overwrite = options.overwrite || false
+
+  const process = node => {
+    const attributes = Object.keys(options.attributes)
+    const matchers = attributes.map(attribute => matchHelper(attribute))
+
+    attributes.forEach((key, i) => {
+      tree.match(matchers[i], node => {
+        // For each attribute that we want to add...
+        Object.entries(options.attributes[key]).forEach(([k, v]) => {
+          if (k === 'class' && node.attrs && node.attrs.class) {
+            node.attrs.class = [...(new Set([...node.attrs.class.split(' '), ...v.split(' ')]))].join(' ')
+          } else {
+            const attributes = options.overwrite ? options.attributes[key] : omit(options.attributes[key], Object.keys(node.attrs || {}))
+            node.attrs = {...node.attrs, ...attributes}
+          }
+        })
+
+        return node
+      })
+    })
+
+    return node
+  }
+
+  return tree.walk(process)
+}