Package Exports

posthtml
posthtml/lib/api
posthtml/lib/parser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (posthtml) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostHTML

PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.

All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.

Usage

Install PostHTML

npm install --save-dev posthtml

Simple example

var posthtml = require('posthtml');

var html = '<myComponent><myTitle>Super Title</myTitle><myText>Awesome Text</myText></myComponent>';

posthtml()
    .use(require('posthtml-custom-elements')())
    .process(html/*, options */)
    .then(function(result) {
        console.log(result.html);
        // <div class="myComponent"><div class="myTitle">Super Title</div><div class="myText">Awesome Text</div></div>
    });

Сomplex example

var posthtml = require('posthtml');

var html = '<html><body><p class="wow">OMG</p></body></html>';

posthtml([
        require('posthtml-doctype')('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'),
        require('posthtml-to-svg-tags')(),
        require('posthtml-extend-attrs')({
            attrsTree: {
                '.wow' : {
                    id: 'wow_id',
                    fill: '#4A83B4',
                    'fill-rule': 'evenodd',
                    'font-family': 'Verdana'
                }
            }
        })
    ])
    .process(html/*, options */)
    .then(function(result) {
        console.log(result.html);
        // <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        // <svg xmlns="http://www.w3.org/2000/svg"><text class="wow" id="wow_id" fill="#4A83B4" fill-rule="evenodd" font-family="Verdana">OMG</text></svg>
    });

Gulp plugin for PostHTML

Install gulp-posthtml

npm install --save-dev gulp-posthtml

gulp.task('html', function () {
    var posthtml = require('gulp-posthtml');
    return gulp.src('src/**/*.html')
        .pipe( posthtml([ require('posthtml-custom-elements')() ]/*, options */) )
        .pipe( gulp.dest('build/') );
});

Options

`singleTags`

Array tags for extend default list single tags

Default: []

Options { singleTags: ['rect', 'custom'] }

...
<div>
    ...
    <rect>
    <custom>
</div>

`closingSingleTag`

Option to specify version closing single tags. Accepts values: default, slash, tag.

Default: default

Options { closingSingleTag: 'default' }

<singletag>

Options { closingSingleTag: 'slash' }

<singletag/>

Options { closingSingleTag: 'tag' }

<singletag></singletag>

PostHTML JSON tree example

input HTML

<a class="animals" href="#">
    <span class="animals__cat" style="background: url(cat.png)">Cat</span>
</a>

Tree in PostHTML

[{
    tag: 'a',
    attrs: {
        class: 'animals',
        href: '#'
    },
    content: [{
        tag: 'span',
        attrs: {
            class: 'animals__cat',
            style: 'background: url(cat.png)'
        },
        content: ['Cat']
    }]
}]

Create PostHTML plugin

This is a simple function with a single argument

Example plugin

module.exports = function (tree) {

    // do something for tree
    tree.match({ tag: 'img' }, function(node) {
        node = Object.assign(node, { attrs: { class: 'img-wrapped' } }});
        return {
            tag: 'span',
            attrs: { class: 'img-wrapper' },
            content: node
        }
    });

    return tree;
}

API

Walk

Walk for all nodes in tree, run callback.

Example use

tree.walk(function(node) {
    let classes = node.attrs && node.attrs.class.split(' ') || [];
    if(classes.includes(className)) {
        // do something for node
        return node;
    }
    return node;
});

Match

Find subtree in tree, run callback.

Example use

tree.match({ tag: 'custom-tag' }, function(node) {
    // do something for node
    var tag = node.tag;
    node = Object.assign(node, { tag: 'div', attrs: { class: tag } }});
    return node
});

matchClass

For each found of class run callback

Example use

tree.matchClass('class-for-delete', function(node) {
    // do something for node
    return ''; // delete this node in tree
});

Plugins

posthtml-textr — Modular typographic framework
posthtml-custom-elements — Use custom elements now
posthtml-doctype — Extend html tags doctype
posthtml-to-svg-tags — Convert html tags to svg equals
posthtml-extend-attrs — Extend html tags attributes with custom data and attributes

Ideas for plugins

posthtml-include — Include html file
posthtml-imports — Support W3C HTML imports
posthtml-style — Include css file in HTML. Save <style>, style attrs to CSS file
posthtml-classes — Configure node in classes
beml — HTML preprocessor for BEM
mimic

Something more? ;)