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.

For more detailed information about PostHTML in general take a look at the docs.

$3

| Name | Description |
|:----:|:-----------:|
|posthtml-parser| Parser HTML/XML to PostHTMLTree |
|posthtml-render| Render PostHTMLTree to HTML/XML |

Create to your project

``bash
npm init posthtml
`

Install

`bash
npm i -D posthtml
`

Usage

$3

Sync

`js
import posthtml from 'posthtml'

const html =


Awesome Text

const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, { sync: true })
.html

console.log(result)
`

`html


`js
import posthtml from 'posthtml'

const html =

OMG

posthtml(
[
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((result) => console.log(result.html))
`

`html

class="wow"
id="wow_id"
fill="#4A83B4"
fill-rule="evenodd" font-family="Verdana">
OMG


`

Directives

`js
import posthtml from 'posthtml'

const php =

const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, {
directives: [
{ name: '?php', start: '<', end: '>' }
]
})
.html

console.log(result)
`

`html


`bash
npm i posthtml-cli
`

`json
"scripts": {
"posthtml": "posthtml -o output.html -i input.html -c config.json"
}
`

`bash
npm run posthtml
`

$3

`bash
npm i -D gulp-posthtml
`

`js
import tap from 'gulp-tap'
import posthtml from 'gulp-posthtml'
import { task, src, dest } from 'gulp'

task('html', () => {
let path

const plugins = [ require('posthtml-include')({ root: ${path} }) ]
const options = {}

src('src/*/.html')
.pipe(tap((file) => path = file.path))
.pipe(posthtml(plugins, options))
.pipe(dest('build/'))
})
`

Check project-stub for an example with Gulp

$3

`bash
npm i -D grunt-posthtml
`

`js
posthtml: {
options: {
use: [
require('posthtml-doctype')({ doctype: 'HTML 5' }),
require('posthtml-include')({ root: './', encoding: 'utf-8' })
]
},
build: {
files: [
{
dot: true,
cwd: 'html/',
src: ['*.html'],
dest: 'tmp/',
expand: true,
}
]
}
}
`

$3

`bash
npm i -D html-loader posthtml-loader
`

#### v1.x

webpack.config.js

`js
const config = {
module: {
loaders: [
{
test: /\.html$/,
loader: 'html!posthtml'
}
]
},
posthtml: (ctx) => ({
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
})
}

export default config
`

#### v2.x

webpack.config.js

`js
import { LoaderOptionsPlugin } from 'webpack'

const config = {
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
},
{
loader: 'posthtml-loader'
}
]
}
]
},
plugins: [
new LoaderOptionsPlugin({
options: {
posthtml(ctx) {
return {
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
}
}
}
})
]
}

export default config
`

$3

`bash
$ npm i rollup-plugin-posthtml -D


or

`js
import { join } from 'path';

import posthtml from 'rollup-plugin-posthtml-template';
// or
// import posthtml from 'rollup-plugin-posthtml';

import sugarml from 'posthtml-sugarml'; // npm i posthtml-sugarml -D
import include from 'posthtml-include'; // npm i posthtml-include -D

export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
parser: sugarml(),
plugins: [include()],
template: true // only rollup-plugin-posthtml-template
})
]
};
`

Parser

`js
import pug from 'posthtml-pug'

posthtml().process(html, { parser: pug(options) }).then((result) => result.html)
``

| Name |Description|
|:-----|:----------|
|posthtml-pug|Pug Parser|
|sugarml|SugarML Parser|

Plugins

In case you want to develop your own plugin, we recommend using [posthtml-plugin-starter][plugin] to get started.

- posthtml-plugins
- awesome-posthtml

[plugin]: https://github.com/posthtml/posthtml-plugin-starter

Maintainers

src="https://avatars0.githubusercontent.com/u/2789192?s=460&v=4"> Ivan Demidov

src="https://avatars.githubusercontent.com/u/1510217?v=3&s=150"> Ivan Voischev

Contributors

Backers

Thank you to all our backers! 🙏 [Become a backer]

[chat]: https://badges.gitter.im/posthtml/PostHTML.svg
[chat-url]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"