posthtml
Advanced tools
Changelog
Readme
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.
| Name | Status | Description |
|---|---|---|
| posthtml-parser |  | Parser HTML/XML to PostHTMLTree |
| posthtml-render |  | Render PostHTMLTree to HTML/XML |
npm init posthtml
npm i -D posthtml
Sync
import posthtml from 'posthtml'
const html = `
<component>
<title>Super Title</title>
<text>Awesome Text</text>
</component>
`
const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, { sync: true })
.html
console.log(result)
<div class="component">
<div class="title">Super Title</div>
<div class="text">Awesome Text</div>
</div>
:warning: Async Plugins can't be used in sync mode and will throw an Error. It's recommended to use PostHTML asynchronously whenever possible.
Async
import posthtml from 'posthtml'
const html = `
<html>
<body>
<p class="wow">OMG</p>
</body>
</html>
`
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))
<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>
Directives
import posthtml from 'posthtml'
const php = `
<component>
<title><?php echo $title; ?></title>
<text><?php echo $article; ?></text>
</component>
`
const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, {
directives: [
{ name: '?php', start: '<', end: '>' }
]
})
.html
console.log(result)
<div class="component">
<div class="title"><?php echo $title; ?></div>
<div class="text"><?php echo $article; ?></div>
</div>
npm i posthtml-cli
"scripts": {
"posthtml": "posthtml -o output.html -i input.html -c config.json"
}
npm run posthtml
npm i -D gulp-posthtml
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
npm i -D grunt-posthtml
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,
}
]
}
}
npm i -D html-loader posthtml-loader
webpack.config.js
const config = {
module: {
loaders: [
{
test: /\.html$/,
loader: 'html!posthtml'
}
]
},
posthtml: (ctx) => ({
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
})
}
export default config
webpack.config.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
$ npm i rollup-plugin-posthtml -D
# or
$ npm i rollup-plugin-posthtml-template -D
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
})
]
};
import pug from 'posthtml-pug'
posthtml().process(html, { parser: pug(options) }).then((result) => result.html)
| Name | Status | Description |
|---|---|---|
| posthtml-pug |  | Pug Parser |
| sugarml |  | SugarML Parser |
In case you want to develop your own plugin, we recommend using posthtml-plugin-starter to get started.
| Name | Status | Description |
|---|---|---|
| posthtml-md |  | Easily use context-sensitive markdown within HTML |
| posthtml-toc |  | Table of contents |
| posthtml-lorem |  | Add lorem ipsum placeholder text to any document |
| posthtml-retext |  | Extensible system for analysing and manipulating natural language |
| prevent-widows |  | Prevent widows from appearing at the end of paragraphs |
| posthtml-richtypo |  | Process HTML node text with Richtypo |
| Name | Status | Description |
|---|---|---|
| posthtml-doctype |  | Set !DOCTYPE |
| posthtml-head-elements |  | Include head elements from JSON file |
| posthtml-include |  | Include HTML |
| posthtml-modules |  | Include and process HTML |
| posthtml-extend |  | Extend Layout (Pug-like) |
| posthtml-extend-attrs |  | Extend Attrs |
| posthtml-expressions |  | Template Expressions |
| posthtml-inline-assets |  | Inline external scripts, styles, and images |
| posthtml-static-react |  | Render custom elements as static React components |
| posthtml-custom-elements |  | Use custom elements |
| posthtml-web-component |  | Web Component server-side rendering, Component as a Service (CaaS) |
| posthtml-spaceless |  | Remove whitespace between HTML tags |
| posthtml-cache |  | Add a nanoid to links in your tags |
| posthtml-highlight |  | Syntax highlight code elements |
| posthtml-pseudo |  | Add pseudo selector class names to elements |
| posthtml-noopener |  | Add rel="noopener noreferrer" to links that open in new tab |
| posthtml-noscript |  | Insert noscript content when JavaScript is disabled |
| posthtml-hash |  | Hash static CSS/JS assets |
| posthtml-insert-at |  | Append/prepend HTML to a selector |
| posthtml-plugin-remove-duplicates |  | Remove duplicated tags |
| posthtml-plugin-link-preload |  | Add preload/prefetch tags (or return equivalent headers) |
| posthtml-prism |  | Code syntax highlighting with Prism |
| posthtml-url-parameters |  | Add parameters to URLs |
| posthtml-safe-class-names |  | Replace escaped characters in class names and CSS selectors |
| posthtml-fetch |  | Fetch and render remote content |
| posthtml-mso |  | Makes it easy to write Outlook conditionals in HTML emails |
| posthtml-postcss-merge-longhand |  | Merge longhand inline CSS into shorthand |
| posthtml-markdownit |  | Transform Markdown using markdown-it |
| posthtml-extra-attributes |  | Add new attributes to elements in your HTML |
| posthtml-sri |  | Adds subresource integrity (SRI) attributes. |
| Name | Status | Description |
|---|---|---|
| posthtml-bem |  | Support BEM naming in html structure |
| posthtml-postcss |  | Use PostCSS in HTML document |
| posthtml-px2rem |  | Change px to rem in Inline CSS |
| posthtml-css-modules |  | Use CSS modules in HTML |
| posthtml-postcss-modules |  | CSS Modules in html |
| posthtml-classes |  | Get a list of classes from HTML |
| posthtml-prefix-class |  | Prefix class names |
| posthtml-modular-css |  | Make CSS modular |
| posthtml-inline-css |  | CSS Inliner |
| posthtml-collect-styles |  | Collect styles from html and put it in the head |
| posthtml-collect-inline-styles |  | Collect inline styles and insert to head tag |
| posthtml-style-expantion |  | PostHTML plugin expand link rel="stylesheet". |
| posthtml-style-to-file |  | Save HTML style nodes and attributes to CSS file |
| posthtml-color-shorthand-hex-to-six-digit |  | Enforce all hex color codes to be 6-char long |
| posthtml-minify-classnames |  | Rewrites classnames and ids inside of html and css files to reduce file size. |
| Name | Status | Description |
|---|---|---|
| posthtml-img-autosize |  | Auto setting the width and height of <img> |
| posthtml-to-svg-tags |  | Convert html tags to svg equivalents |
| posthtml-webp |  | Add WebP support for images |
| posthtml-favicons |  | Generate Favicons and add related tags |
| posthtml-inline-svg |  | Inline svg icons in HTML |
| posthtml-inline-favicon |  | Inline favicons in HTML |
| Name | Status | Description |
|---|---|---|
| posthtml-aria-tabs |  | Write accessible tabs with minimal markup |
| posthtml-alt-always |  | Always add alt attribute for images that don't have it |
| posthtml-schemas |  | Add microdata to your HTML |
| Name | Status | Description |
|---|---|---|
| posthtml-shorten |  | Shorten URLs in HTML |
| posthtml-uglify |  | Shorten CSS in HTML |
| posthtml-minifier |  | Minify HTML |
| posthtml-remove-attributes |  | Remove attributes unconditionally or with content match |
| posthtml-remove-tags |  | Remove tags with content match |
| posthtml-remove-duplicates |  | Remove duplicate elements from your html |
| posthtml-transformer |  | Process HTML by directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc. |
| htmlnano |  | HTML Minifier |
| posthtml-link-noreferrer |  | Add rel="noopener" and rel="noreferrer" to all links that contain the attribute target="_blank" |
| posthtml-lazyload | | Add native lazyload attribute |
| posthtml-postcss-treeshaker |  | Tree shake styles for classes and ids in style tag |
| posthtml-external-link |  | Add rel="external noopenner nofollow" and target="_blank" to all external links |
| Name | Status | Description |
|---|---|---|
| posthtml-load-plugins |  | Autoload Plugins |
| posthtml-load-options |  | Autoload Options (Parser && Render) |
| posthtml-load-config |  | Autoload Config (Plugins && Options) |
| posthtml-w3c |  | Validate HTML with W3C Validation |
| posthtml-hint |  | Lint HTML with HTML Hint |
| posthtml-tidy |  | Sanitize HTML with HTML Tidy |
| Name | Status | Description |
|---|---|---|
| koa-posthtml |  | Koa Middleware |
| hapi-posthtml |  | Hapi Plugin |
| express-posthtml |  | Express Middleware |
| electron-posthtml |  | Electron Plugin |
| metalsmith-posthtml |  | Metalsmith Plugin |
Ivan Demidov |
Ivan Voischev |
See PostHTML Guidelines and CONTRIBUTING.
Thank you to all our backers! 🙏 [Become a backer]
FAQs
HTML/XML processor
We found that posthtml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.
Security News
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.