posthtml-transform
PostHTML plugin to add/modify tags attributes.
Demo
;
Input
Output
Install
npm install posthtml-transform
Usage
const readFileSync = ;const posthtml = ;const transform = ; const input = ; ;
Configuration
Transformer as object
Plugin accepts one or array of transformers. Transformer is an object with following fields:
attr
- name of tag attribute to modify. If doesn't exists it will be created. Should be used in combination withvalue
.value
- attribute value to set. Should be used in combination withattr
.tag
- tag name to set. Should be used in combination withselector
(or without, if you want to rename all tags :).selector
(optional,*
by default) - CSS selector to find nodes. If not presented all nodes will be selected. Complete list of supported selectors see on posthtml-match-helper documentation. Here is a short list:- Tags
div
. - Ids
#id
. - Classes
.class
,.class1.class2
. - Attributes
[attr=value]
,[attr!=value]
etc. - Multiple selectors
path, .class, #id
. Nested selectors (g path
,g > path
) are not supported.
- Tags
Example
; // add fill="red" to all nodes; // add fill="red" only to paths; // add `stroke` attr to node with id="logo"; // rename all <g> to <symbol>
Transformer as URL query string
It is also possible to pass URL query params string to plugin. It will be parsed and converted to transformer params, e.g:
; // => { attr: 'fill', value: 'red' }; // => { attr: 'fill', value: 'red, selector: 'path' }
Parameter value has following syntax: attr_name=attr_value optional_selector
.
Parameters can be combined, eg fill=red&stroke=black
.
Examples:
fill=red
fill=red path
fill=red .class
fill=red #id, black .class
fill=red #id&stroke=black .class