Ivan Voischev |
Anton Winogradov |
Alexej Yaroshevich |
Vasiliy |
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][docs].
### Dependencies
| Name | Status | Description |
|:----:|:------:|:-----------:|
|[posthtml-parser][parser]|[![npm][parser-badge]][parser-npm]| Parser HTML/XML to PostHTMLTree |
|[posthtml-render][render]|[![npm][render-badge]][render-npm]| Render PostHTMLTree to HTML/XML |
[docs]: https://github.com/posthtml/posthtml/blob/master/docs
[parser]: https://github.com/posthtml/posthtml-parser
[parser-badge]: https://img.shields.io/npm/v/posthtml-parser.svg
[parser-npm]: https://npmjs.com/package/posthtml-parser
[render]: https://github.com/posthtml/posthtml-render
[render-badge]: https://img.shields.io/npm/v/posthtml-render.svg
[render-npm]: https://npmjs.com/package/posthtml-render
## Install
```bash
npm i -D posthtml
```
## Usage
### API
**Sync**
```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 ``` ### [CLI](https://npmjs.com/package/posthtml-cli) ```bash npm i posthtml-cli ``` ```json "scripts": { "posthtml": "posthtml -o output.html -i input.html -c config.json" } ``` ```bash npm run posthtml ``` ### [Gulp](https://gulpjs.com) ```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](https://github.com/posthtml/project-stub) for an example with Gulp ### [Grunt](https://gruntjs.com) ```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, } ] } } ``` ### [Webpack](https://webpack.js.org) ```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) => { return { parser: require('posthtml-pug') plugins: [ require('posthtml-include')({ root: ctx.resourcePath }) ] } } } 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 } } 'posthtml-loader' ] } ] } plugins: [ new LoaderOptionsPlugin({ options: { posthtml (ctx) { parser: require('posthtml-pug') plugins: [ require('posthtml-include')({ root: ctx.resourcePath }) } ] } } }) ] } export default config ``` ## Parser ```js import pug from 'posthtml-pug' posthtml().process(html, { parser: pug(options) }).then((result) => result.html) ``` | Name |Status|Description| |:-----|:-----|:----------| |[posthtml-pug][pug]|[![npm][pug-badge]][pug-npm]|Pug Parser| |[sugarml][sugar]|[![npm][sugar-badge]][sugar-npm]|SugarML Parser| [pug]: https://github.com/posthtml/posthtml-pug [pug-badge]: https://img.shields.io/npm/v/posthtml-pug.svg [pug-npm]: https://npmjs.com/package/posthtml-pug [sugar]: https://github.com/posthtml/sugarml [sugar-badge]: https://img.shields.io/npm/v/sugarml.svg [sugar-npm]: https://npmjs.com/package/sugarml ## [Plugins](http://maltsev.github.io/posthtml-plugins) In case you want to develop your own plugin, we recommend using [posthtml-plugin-boilerplate][plugin] for getting started. [plugin]: https://github.com/posthtml/posthtml-plugin-boilerplate #### TEXT | Name |Status|Description| |:-----|:-----|:----------| |[posthtml-md][md]|[![npm][md-badge]][md-npm]|Easily use context-sensitive markdown within HTML| |[posthtml-lorem][lorem]|[![npm][lorem-badge]][lorem-npm]|Add lorem ipsum placeholder text to any document| |[posthtml-retext][text]|[![npm][text-badge]][text-npm]|Extensible system for analysing and manipulating natural language| [md]: https://github.com/jonathantneal/posthtml-md [md-badge]: https://img.shields.io/npm/v/posthtml-md.svg [md-npm]: https://npmjs.com/package/posthtml-md [text]: https://github.com/voischev/posthtml-retext [text-badge]: https://img.shields.io/npm/v/posthtml-retext.svg [text-npm]: https://npmjs.com/package/posthtml-retext [lorem]: https://github.com/jonathantneal/posthtml-lorem [lorem-badge]: https://img.shields.io/npm/v/posthtml-lorem.svg [lorem-npm]: https://npmjs.com/package/posthtml-lorem #### HTML |Name|Status|Description| |:---|:----:|:----------| |[posthtml-doctype][doctype]|[![npm][doctype-badge]][doctype-npm]|Set !DOCTYPE| |[posthtml-head-elements][head]|[![npm][head-badge]][head-npm]|Include head elements from JSON file| |[posthtml-include][include]|[![npm][include-badge]][include-npm]|Include HTML| |[posthtml-modules][modules]|[![npm][modules-badge]][modules-npm]|Include and process HTML| |[posthtml-extend][extend]|[![npm][extend-badge]][extend-npm]|Extend Layout (Pug-like)| |[posthtml-extend-attrs][attrs]|[![npm][attrs-badge]][attrs-npm]|Extend Attrs| |[posthtml-expressions][exp]|[![npm][exp-badge]][exp-npm]|Template Expressions| |[posthtml-inline-assets][assets]|[![npm][assets-badge]][assets-npm]|Inline external scripts, styles, and images| |[posthtml-static-react][react]|[![npm][react-badge]][react-npm]| Render custom elements as static React components| |[posthtml-custom-elements][elem]|[![npm][elem-badge]][elem-npm]|Use custom elements| |[posthtml-web-component][web]|[![npm][web-badge]][web-npm]|Web Component server-side rendering, Component as a Service (CaaS)| [doctype]: https://github.com/posthtml/posthtml-doctype [doctype-badge]: https://img.shields.io/npm/v/posthtml-doctype.svg [doctype-npm]: https://npmjs.com/package/posthtml-doctype [head]: https://github.com/TCotton/posthtml-head-elements [head-badge]: https://img.shields.io/npm/v/posthtml-head-elements.svg [head-npm]: https://npmjs.com/package/posthtml-head-elements [include]: https://github.com/posthtml/posthtml-include [include-badge]: https://img.shields.io/npm/v/posthtml-include.svg [include-npm]: https://npmjs.com/package/posthtml-include [modules]: https://github.com/posthtml/posthtml-modules [modules-badge]: https://img.shields.io/npm/v/posthtml-modules.svg [modules-npm]: https://npmjs.com/package/posthtml-modules [content]: https://github.com/posthtml/posthtml-content [content-badge]: https://img.shields.io/npm/v/posthtml-content.svg [content-npm]: https://npmjs.com/package/posthtml-content [exp]: https://github.com/posthtml/posthtml-exp [exp-badge]: https://img.shields.io/npm/v/posthtml-exp.svg [exp-npm]: https://npmjs.com/package/posthtml-exp [extend]: https://github.com/posthtml/posthtml-extend [extend-badge]: https://img.shields.io/npm/v/posthtml-extend.svg [extend-npm]: https://npmjs.com/package/posthtml-extend [attrs]: https://github.com/theprotein/posthtml-extend-attrs [attrs-badge]: https://img.shields.io/npm/v/posthtml-extend-attrs.svg [attrs-npm]: https://npmjs.com/package/posthtml-extend-attrs [assets]: https://github.com/jonathantneal/posthtml-inline-assets [assets-badge]: https://img.shields.io/npm/v/posthtml-inline-assets.svg [assets-npm]: https://npmjs.com/package/posthtml-inline-assets [elem]: https://github.com/posthtml/posthtml-custom-elements [elem-badge]: https://img.shields.io/npm/v/posthtml-custom-elements.svg [elem-npm]: https://npmjs.com/package/posthtml-custom-elements [web]: https://github.com/island205/posthtml-web-component [web-badge]: https://img.shields.io/npm/v/posthtml-web-component.svg [web-npm]: https://npmjs.com/package/posthtml-web-components [prefix]: https://github.com/stevenbenisek/posthtml-prefix-class [prefix-badge]: https://img.shields.io/npm/v/posthtml-prefix-class.svg [prefix-npm]: https://npmjs.com/package/posthtml-prefix-class [react]: https://github.com/rasmusfl0e/posthtml-static-react [react-badge]: https://img.shields.io/npm/v/posthtml-static-react.svg [react-npm]: https://npmjs.com/package/posthtml-static-react #### CSS |Name|Status|Description| |:---|:-----|:----------| |[posthtml-bem][bem]|[![npm][bem-badge]][bem-npm]|Support BEM naming in html structure| |[posthtml-postcss][css]|[![npm][css-badge]][css-npm]|Use [PostCSS][css-gh] in HTML document| |[posthtml-px2rem][px2rem]|[![npm][px2rem-badge]][px2rem-npm]|Change px to rem in Inline CSS| |[posthtml-css-modules][css-modules]|[![npm][css-modules-badge]][css-modules-npm]|Use CSS modules in HTML| |[posthtml-postcss-modules][postcss-modules]|[![npm][postcss-modules-badge]][postcss-modules-npm]|CSS Modules in html| |[posthtml-classes][classes]|[![npm][classes-badge]][classes-npm]|Get a list of classes from HTML| |[posthtml-prefix-class][prefix]|[![npm][prefix-badge]][prefix-npm]|Prefix class names |[posthtml-modular-css][modular]|[![npm][modular-badge]][modular-npm]|Make CSS modular| |[posthtml-inline-css][in]|[![npm][in-badge]][in-npm]|CSS Inliner| |[posthtml-collect-styles][collect-styles]|[![npm][collect-styles-badge]][collect-styles-npm]|Collect styles from html and put it in the head| |[posthtml-collect-inline-styles][collect]|[![npm][collect-badge]][collect-npm]|Collect inline styles and insert to head tag| |[posthtml-style-to-file][style]|[![npm][style-badge]][style-npm]| Save HTML style nodes and attributes to CSS file| |[posthtml-color-shorthand-hex-to-six-digit][hex]|[![npm][hex-badge]][hex-npm]|Enforce all hex color codes to be 6-char long| [bem]: https://github.com/rajdee/posthtml-bem [bem-badge]: https://img.shields.io/npm/v/posthtml-bem.svg [bem-npm]: https://npmjs.com/package/posthtml-bem [css]: https://github.com/posthtml/posthtml-postcss [css-badge]: https://img.shields.io/npm/v/posthtml-postcss.svg [css-npm]: https://npmjs.com/package/posthtml-postcss [css-gh]: https://github.com/postcss/postcss [postcss-modules]: https://github.com/posthtml/posthtml-postcss-modules [postcss-modules-badge]: https://img.shields.io/npm/v/posthtml-postcss-modules.svg [postcss-modules-npm]: https://npmjs.com/package/posthtml-postcss-modules [css-modules]: https://github.com/posthtml/posthtml-css-modules [css-modules-badge]: https://img.shields.io/npm/v/posthtml-css-modules.svg [css-modules-npm]: https://npmjs.com/package/posthtml-css-modules [collect-styles]: https://github.com/posthtml/posthtml-collect-styles [collect-styles-badge]: https://img.shields.io/npm/v/posthtml-collect-styles.svg [collect-styles-npm]: https://npmjs.com/package/posthtml-collect-styles [collect]: https://github.com/totora0155/posthtml-collect-inline-styles [collect-badge]: https://img.shields.io/npm/v/posthtml-collect-inline-styles.svg [collect-npm]: https://npmjs.com/package/posthtml-collect-inline-styles [px2rem]: https://github.com/weixin/posthtml-px2rem [px2rem-badge]: https://img.shields.io/npm/v/posthtml-px2rem.svg [px2rem-npm]: https://npmjs.com/package/posthtml-px2rem [classes]: https://github.com/rajdee/posthtml-classes [classes-badge]: https://img.shields.io/npm/v/posthtml-classes.svg [classes-npm]: https://npmjs.com/package/posthtml-classes [prefix]: https://github.com/stevenbenisek/posthtml-prefix-class [prefix-badge]: https://img.shields.io/npm/v/posthtml-prefix-class.svg [prefix-npm]: https://npmjs.com/package/posthtml-prefix-class [modular]: https://github.com/admdh/posthtml-modular-css [modular-badge]: https://img.shields.io/npm/v/posthtml-modular-css.svg [modular-npm]: https://npmjs.com/package/posthtml-modular-css [in]: https://github.com/posthtml/posthtml-inline-css [in-badge]: https://img.shields.io/npm/v/posthtml-inline-css.svg [in-npm]: https://npmjs.com/package/posthtml-inline-css [style]: https://github.com/posthtml/posthtml-style-to-file [style-badge]: https://img.shields.io/npm/v/posthtml-style-to-file.svg [style-npm]: https://npmjs.com/package/posthtml-style-to-file [hex]: https://github.com/code-and-send/posthtml-color-shorthand-hex-to-six-digit [hex-badge]: https://img.shields.io/npm/v/posthtml-color-shorthand-hex-to-six-digit.svg [hex-npm]: https://npmjs.com/package/posthtml-color-shorthand-hex-to-six-digit #### IMG & SVG |Name|Status|Description| |:---|:-----|:----------| |[posthtml-img-autosize][img]|[![npm][img-badge]][img-npm]|Auto setting the width and height of \|
Ivan Voischev |
Anton Winogradov |
Alexej Yaroshevich |
Vasiliy |