| 1 | [![NPM][npm]][npm-url]
|
| 2 | [![Deps][deps]][deps-url]
|
| 3 | [![Tests][build]][build-url]
|
| 4 | [![Coverage][cover]][cover-url]
|
| 5 | [![Standard Code Style][code-style]][code-style-url]
|
| 6 | [![Chat][chat]][chat-url]
|
| 7 |
|
| 8 | # PostHTML <img align="right" width="220" height="200" title="PostHTML" src="http://posthtml.github.io/posthtml/logo.svg">
|
| 9 |
|
| 10 | 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.
|
| 11 |
|
| 12 | 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.
|
| 13 |
|
| 14 | For more detailed information about PostHTML in general take a look at the [docs][docs].
|
| 15 |
|
| 16 | ### Dependencies
|
| 17 |
|
| 18 | | Name | Status | Description |
|
| 19 | |:----:|:------:|:-----------:|
|
| 20 | |[posthtml-parser][parser]|[![npm][parser-badge]][parser-npm]| Parser HTML/XML to PostHTMLTree |
|
| 21 | |[posthtml-render][render]|[![npm][render-badge]][render-npm]| Render PostHTMLTree to HTML/XML |
|
| 22 |
|
| 23 |
|
| 24 | [docs]: https://github.com/posthtml/posthtml/blob/master/docs
|
| 25 |
|
| 26 | [parser]: https://github.com/posthtml/posthtml-parser
|
| 27 | [parser-badge]: https://img.shields.io/npm/v/posthtml-parser.svg
|
| 28 | [parser-npm]: https://npmjs.com/package/posthtml-parser
|
| 29 |
|
| 30 | [render]: https://github.com/posthtml/posthtml-render
|
| 31 | [render-badge]: https://img.shields.io/npm/v/posthtml-render.svg
|
| 32 | [render-npm]: https://npmjs.com/package/posthtml-render
|
| 33 |
|
| 34 | ## Install
|
| 35 |
|
| 36 | ```bash
|
| 37 | npm i -D posthtml
|
| 38 | ```
|
| 39 |
|
| 40 | ## Usage
|
| 41 |
|
| 42 | ### API
|
| 43 |
|
| 44 | **Sync**
|
| 45 |
|
| 46 | ```js
|
| 47 | import posthtml from 'posthtml'
|
| 48 |
|
| 49 | const html = `
|
| 50 | <component>
|
| 51 | <title>Super Title</title>
|
| 52 | <text>Awesome Text</text>
|
| 53 | </component>
|
| 54 | `
|
| 55 |
|
| 56 | const result = posthtml()
|
| 57 | .use(require('posthtml-custom-elements')())
|
| 58 | .process(html, { sync: true })
|
| 59 | .html
|
| 60 |
|
| 61 | console.log(result)
|
| 62 | ```
|
| 63 |
|
| 64 | ```html
|
| 65 | <div class="component">
|
| 66 | <div class="title">Super Title</div>
|
| 67 | <div class="text">Awesome Text</div>
|
| 68 | </div>
|
| 69 | ```
|
| 70 |
|
| 71 | > :warning: Async Plugins can't be used in sync mode and will throw an Error. It's recommended to use PostHTML asynchronously whenever possible.
|
| 72 |
|
| 73 | **Async**
|
| 74 |
|
| 75 | ```js
|
| 76 | import posthtml from 'posthtml'
|
| 77 |
|
| 78 | const html = `
|
| 79 | <html>
|
| 80 | <body>
|
| 81 | <p class="wow">OMG</p>
|
| 82 | </body>
|
| 83 | </html>
|
| 84 | `
|
| 85 |
|
| 86 | posthtml(
|
| 87 | [
|
| 88 | require('posthtml-to-svg-tags')(),
|
| 89 | require('posthtml-extend-attrs')({
|
| 90 | attrsTree: {
|
| 91 | '.wow' : {
|
| 92 | id: 'wow_id',
|
| 93 | fill: '#4A83B4',
|
| 94 | 'fill-rule': 'evenodd',
|
| 95 | 'font-family': 'Verdana'
|
| 96 | }
|
| 97 | }
|
| 98 | })
|
| 99 | ])
|
| 100 | .process(html/*, options */)
|
| 101 | .then((result) => console.log(result.html))
|
| 102 | ```
|
| 103 |
|
| 104 | ```html
|
| 105 | <svg xmlns="http://www.w3.org/2000/svg">
|
| 106 | <text
|
| 107 | class="wow"
|
| 108 | id="wow_id"
|
| 109 | fill="#4A83B4"
|
| 110 | fill-rule="evenodd" font-family="Verdana">
|
| 111 | OMG
|
| 112 | </text>
|
| 113 | </svg>
|
| 114 | ```
|
| 115 |
|
| 116 | **Directives**
|
| 117 |
|
| 118 | ```js
|
| 119 | import posthtml from 'posthtml'
|
| 120 |
|
| 121 | const php = `
|
| 122 | <component>
|
| 123 | <title><?php echo $title; ?></title>
|
| 124 | <text><?php echo $article; ?></text>
|
| 125 | </component>
|
| 126 | `
|
| 127 |
|
| 128 | const result = posthtml()
|
| 129 | .use(require('posthtml-custom-elements')())
|
| 130 | .process(html, {
|
| 131 | directives: [
|
| 132 | { name: '?php', start: '<', end: '>' }
|
| 133 | ]
|
| 134 | })
|
| 135 | .html
|
| 136 |
|
| 137 | console.log(result)
|
| 138 | ```
|
| 139 |
|
| 140 | ```html
|
| 141 | <div class="component">
|
| 142 | <div class="title"><?php echo $title; ?></div>
|
| 143 | <div class="text"><?php echo $article; ?></div>
|
| 144 | </div>
|
| 145 | ```
|
| 146 |
|
| 147 | ### [CLI](https://npmjs.com/package/posthtml-cli)
|
| 148 |
|
| 149 | ```bash
|
| 150 | npm i posthtml-cli
|
| 151 | ```
|
| 152 |
|
| 153 | ```json
|
| 154 | "scripts": {
|
| 155 | "posthtml": "posthtml -o output.html -i input.html -c config.json"
|
| 156 | }
|
| 157 | ```
|
| 158 |
|
| 159 | ```bash
|
| 160 | npm run posthtml
|
| 161 | ```
|
| 162 |
|
| 163 | ### [Gulp](https://gulpjs.com)
|
| 164 |
|
| 165 | ```bash
|
| 166 | npm i -D gulp-posthtml
|
| 167 | ```
|
| 168 |
|
| 169 | ```js
|
| 170 | import tap from 'gulp-tap'
|
| 171 | import posthtml from 'gulp-posthtml'
|
| 172 | import { task, src, dest } from 'gulp'
|
| 173 |
|
| 174 | task('html', () => {
|
| 175 | let path
|
| 176 |
|
| 177 | const plugins = [ require('posthtml-include')({ root: `${path}` }) ]
|
| 178 | const options = {}
|
| 179 |
|
| 180 | src('src/**/*.html')
|
| 181 | .pipe(tap((file) => path = file.path))
|
| 182 | .pipe(posthtml(plugins, options))
|
| 183 | .pipe(dest('build/'))
|
| 184 | })
|
| 185 | ```
|
| 186 |
|
| 187 | Check [project-stub](https://github.com/posthtml/project-stub) for an example with Gulp
|
| 188 |
|
| 189 | ### [Grunt](https://gruntjs.com)
|
| 190 |
|
| 191 | ```bash
|
| 192 | npm i -D grunt-posthtml
|
| 193 | ```
|
| 194 |
|
| 195 | ```js
|
| 196 | posthtml: {
|
| 197 | options: {
|
| 198 | use: [
|
| 199 | require('posthtml-doctype')({ doctype: 'HTML 5' }),
|
| 200 | require('posthtml-include')({ root: './', encoding: 'utf-8' })
|
| 201 | ]
|
| 202 | },
|
| 203 | build: {
|
| 204 | files: [
|
| 205 | {
|
| 206 | dot: true,
|
| 207 | cwd: 'html/',
|
| 208 | src: ['*.html'],
|
| 209 | dest: 'tmp/',
|
| 210 | expand: true,
|
| 211 | }
|
| 212 | ]
|
| 213 | }
|
| 214 | }
|
| 215 | ```
|
| 216 |
|
| 217 | ### [Webpack](https://webpack.js.org)
|
| 218 |
|
| 219 | ```bash
|
| 220 | npm i -D html-loader posthtml-loader
|
| 221 | ```
|
| 222 |
|
| 223 | #### v1.x
|
| 224 |
|
| 225 | **webpack.config.js**
|
| 226 |
|
| 227 | ```js
|
| 228 | const config = {
|
| 229 | module: {
|
| 230 | loaders: [
|
| 231 | {
|
| 232 | test: /\.html$/,
|
| 233 | loader: 'html!posthtml'
|
| 234 | }
|
| 235 | ]
|
| 236 | },
|
| 237 | posthtml: (ctx) => ({
|
| 238 | parser: require('posthtml-pug'),
|
| 239 | plugins: [
|
| 240 | require('posthtml-bem')()
|
| 241 | ]
|
| 242 | })
|
| 243 | }
|
| 244 |
|
| 245 | export default config
|
| 246 | ```
|
| 247 |
|
| 248 | #### v2.x
|
| 249 |
|
| 250 | **webpack.config.js**
|
| 251 |
|
| 252 | ```js
|
| 253 | import { LoaderOptionsPlugin } from 'webpack'
|
| 254 |
|
| 255 | const config = {
|
| 256 | module: {
|
| 257 | rules: [
|
| 258 | {
|
| 259 | test: /\.html$/,
|
| 260 | use: [
|
| 261 | {
|
| 262 | loader: 'html-loader',
|
| 263 | options: { minimize: true }
|
| 264 | },
|
| 265 | {
|
| 266 | loader: 'posthtml-loader'
|
| 267 | }
|
| 268 | ]
|
| 269 | }
|
| 270 | ]
|
| 271 | },
|
| 272 | plugins: [
|
| 273 | new LoaderOptionsPlugin({
|
| 274 | options: {
|
| 275 | posthtml(ctx) {
|
| 276 | return {
|
| 277 | parser: require('posthtml-pug'),
|
| 278 | plugins: [
|
| 279 | require('posthtml-bem')()
|
| 280 | ]
|
| 281 | }
|
| 282 | }
|
| 283 | }
|
| 284 | })
|
| 285 | ]
|
| 286 | }
|
| 287 |
|
| 288 | export default config
|
| 289 | ```
|
| 290 |
|
| 291 | ### [Rollup](https://rollupjs.org/)
|
| 292 |
|
| 293 | ```bash
|
| 294 | $ npm i rollup-plugin-posthtml -D
|
| 295 | # or
|
| 296 | $ npm i rollup-plugin-posthtml-template -D
|
| 297 | ```
|
| 298 |
|
| 299 | ```js
|
| 300 | import { join } from 'path';
|
| 301 |
|
| 302 | import posthtml from 'rollup-plugin-posthtml-template';
|
| 303 | // or
|
| 304 | // import posthtml from 'rollup-plugin-posthtml';
|
| 305 |
|
| 306 | import sugarml from 'posthtml-sugarml'; // npm i posthtml-sugarml -D
|
| 307 | import include from 'posthtml-include'; // npm i posthtml-include -D
|
| 308 |
|
| 309 | export default {
|
| 310 | entry: join(__dirname, 'main.js'),
|
| 311 | dest: join(__dirname, 'bundle.js'),
|
| 312 | format: 'iife',
|
| 313 | plugins: [
|
| 314 | posthtml(
|
| 315 | parser: sugarml(),
|
| 316 | plugins: [include()],
|
| 317 | template: true // only rollup-plugin-posthtml-template
|
| 318 | })
|
| 319 | ]
|
| 320 | };
|
| 321 | ```
|
| 322 |
|
| 323 | ## Parser
|
| 324 |
|
| 325 | ```js
|
| 326 | import pug from 'posthtml-pug'
|
| 327 |
|
| 328 | posthtml().process(html, { parser: pug(options) }).then((result) => result.html)
|
| 329 | ```
|
| 330 |
|
| 331 | | Name |Status|Description|
|
| 332 | |:-----|:-----|:----------|
|
| 333 | |[posthtml-pug][pug]|[![npm][pug-badge]][pug-npm]|Pug Parser|
|
| 334 | |[sugarml][sugar]|[![npm][sugar-badge]][sugar-npm]|SugarML Parser|
|
| 335 |
|
| 336 |
|
| 337 | [pug]: https://github.com/posthtml/posthtml-pug
|
| 338 | [pug-badge]: https://img.shields.io/npm/v/posthtml-pug.svg
|
| 339 | [pug-npm]: https://npmjs.com/package/posthtml-pug
|
| 340 |
|
| 341 | [sugar]: https://github.com/posthtml/sugarml
|
| 342 | [sugar-badge]: https://img.shields.io/npm/v/sugarml.svg
|
| 343 | [sugar-npm]: https://npmjs.com/package/sugarml
|
| 344 |
|
| 345 | ## [Plugins](http://maltsev.github.io/posthtml-plugins)
|
| 346 |
|
| 347 | In case you want to develop your own plugin, we recommend using [posthtml-plugin-boilerplate][plugin] for getting started.
|
| 348 |
|
| 349 | [plugin]: https://github.com/posthtml/posthtml-plugin-boilerplate
|
| 350 |
|
| 351 | #### TEXT
|
| 352 |
|
| 353 | | Name |Status|Description|
|
| 354 | |:-----|:-----|:----------|
|
| 355 | |[posthtml-md][md]|[![npm][md-badge]][md-npm]|Easily use context-sensitive markdown within HTML|
|
| 356 | |[posthtml-lorem][lorem]|[![npm][lorem-badge]][lorem-npm]|Add lorem ipsum placeholder text to any document|
|
| 357 | |[posthtml-retext][text]|[![npm][text-badge]][text-npm]|Extensible system for analysing and manipulating natural language|
|
| 358 |
|
| 359 | [md]: https://github.com/jonathantneal/posthtml-md
|
| 360 | [md-badge]: https://img.shields.io/npm/v/posthtml-md.svg
|
| 361 | [md-npm]: https://npmjs.com/package/posthtml-md
|
| 362 |
|
| 363 | [text]: https://github.com/voischev/posthtml-retext
|
| 364 | [text-badge]: https://img.shields.io/npm/v/posthtml-retext.svg
|
| 365 | [text-npm]: https://npmjs.com/package/posthtml-retext
|
| 366 |
|
| 367 | [lorem]: https://github.com/jonathantneal/posthtml-lorem
|
| 368 | [lorem-badge]: https://img.shields.io/npm/v/posthtml-lorem.svg
|
| 369 | [lorem-npm]: https://npmjs.com/package/posthtml-lorem
|
| 370 |
|
| 371 | #### HTML
|
| 372 |
|
| 373 | |Name|Status|Description|
|
| 374 | |:---|:----:|:----------|
|
| 375 | |[posthtml-doctype][doctype]|[![npm][doctype-badge]][doctype-npm]|Set !DOCTYPE|
|
| 376 | |[posthtml-head-elements][head]|[![npm][head-badge]][head-npm]|Include head elements from JSON file|
|
| 377 | |[posthtml-include][include]|[![npm][include-badge]][include-npm]|Include HTML|
|
| 378 | |[posthtml-modules][modules]|[![npm][modules-badge]][modules-npm]|Include and process HTML|
|
| 379 | |[posthtml-extend][extend]|[![npm][extend-badge]][extend-npm]|Extend Layout (Pug-like)|
|
| 380 | |[posthtml-extend-attrs][attrs]|[![npm][attrs-badge]][attrs-npm]|Extend Attrs|
|
| 381 | |[posthtml-expressions][exp]|[![npm][exp-badge]][exp-npm]|Template Expressions|
|
| 382 | |[posthtml-inline-assets][assets]|[![npm][assets-badge]][assets-npm]|Inline external scripts, styles, and images|
|
| 383 | |[posthtml-static-react][react]|[![npm][react-badge]][react-npm]| Render custom elements as static React components|
|
| 384 | |[posthtml-custom-elements][elem]|[![npm][elem-badge]][elem-npm]|Use custom elements|
|
| 385 | |[posthtml-web-component][web]|[![npm][web-badge]][web-npm]|Web Component server-side rendering, Component as a Service (CaaS)|
|
| 386 | |[posthtml-spaceless][spaceless]|[![npm][spaceless-badge]][spaceless-npm]|Remove whitespace between HTML tags|
|
| 387 |
|
| 388 | [spaceless]: https://github.com/posthtml/posthtml-spaceless
|
| 389 | [spaceless-badge]: https://img.shields.io/npm/v/posthtml-spaceless.svg
|
| 390 | [spaceless-npm]: https://npmjs.com/package/posthtml-spaceless
|
| 391 |
|
| 392 | [doctype]: https://github.com/posthtml/posthtml-doctype
|
| 393 | [doctype-badge]: https://img.shields.io/npm/v/posthtml-doctype.svg
|
| 394 | [doctype-npm]: https://npmjs.com/package/posthtml-doctype
|
| 395 |
|
| 396 | [head]: https://github.com/TCotton/posthtml-head-elements
|
| 397 | [head-badge]: https://img.shields.io/npm/v/posthtml-head-elements.svg
|
| 398 | [head-npm]: https://npmjs.com/package/posthtml-head-elements
|
| 399 |
|
| 400 | [include]: https://github.com/posthtml/posthtml-include
|
| 401 | [include-badge]: https://img.shields.io/npm/v/posthtml-include.svg
|
| 402 | [include-npm]: https://npmjs.com/package/posthtml-include
|
| 403 |
|
| 404 | [modules]: https://github.com/posthtml/posthtml-modules
|
| 405 | [modules-badge]: https://img.shields.io/npm/v/posthtml-modules.svg
|
| 406 | [modules-npm]: https://npmjs.com/package/posthtml-modules
|
| 407 |
|
| 408 | [content]: https://github.com/posthtml/posthtml-content
|
| 409 | [content-badge]: https://img.shields.io/npm/v/posthtml-content.svg
|
| 410 | [content-npm]: https://npmjs.com/package/posthtml-content
|
| 411 |
|
| 412 | [exp]: https://github.com/posthtml/posthtml-exp
|
| 413 | [exp-badge]: https://img.shields.io/npm/v/posthtml-exp.svg
|
| 414 | [exp-npm]: https://npmjs.com/package/posthtml-exp
|
| 415 |
|
| 416 | [extend]: https://github.com/posthtml/posthtml-extend
|
| 417 | [extend-badge]: https://img.shields.io/npm/v/posthtml-extend.svg
|
| 418 | [extend-npm]: https://npmjs.com/package/posthtml-extend
|
| 419 |
|
| 420 | [attrs]: https://github.com/theprotein/posthtml-extend-attrs
|
| 421 | [attrs-badge]: https://img.shields.io/npm/v/posthtml-extend-attrs.svg
|
| 422 | [attrs-npm]: https://npmjs.com/package/posthtml-extend-attrs
|
| 423 |
|
| 424 | [assets]: https://github.com/jonathantneal/posthtml-inline-assets
|
| 425 | [assets-badge]: https://img.shields.io/npm/v/posthtml-inline-assets.svg
|
| 426 | [assets-npm]: https://npmjs.com/package/posthtml-inline-assets
|
| 427 |
|
| 428 | [elem]: https://github.com/posthtml/posthtml-custom-elements
|
| 429 | [elem-badge]: https://img.shields.io/npm/v/posthtml-custom-elements.svg
|
| 430 | [elem-npm]: https://npmjs.com/package/posthtml-custom-elements
|
| 431 |
|
| 432 | [web]: https://github.com/island205/posthtml-web-component
|
| 433 | [web-badge]: https://img.shields.io/npm/v/posthtml-web-component.svg
|
| 434 | [web-npm]: https://npmjs.com/package/posthtml-web-components
|
| 435 |
|
| 436 | [prefix]: https://github.com/stevenbenisek/posthtml-prefix-class
|
| 437 | [prefix-badge]: https://img.shields.io/npm/v/posthtml-prefix-class.svg
|
| 438 | [prefix-npm]: https://npmjs.com/package/posthtml-prefix-class
|
| 439 |
|
| 440 | [react]: https://github.com/rasmusfl0e/posthtml-static-react
|
| 441 | [react-badge]: https://img.shields.io/npm/v/posthtml-static-react.svg
|
| 442 | [react-npm]: https://npmjs.com/package/posthtml-static-react
|
| 443 |
|
| 444 | #### CSS
|
| 445 |
|
| 446 | |Name|Status|Description|
|
| 447 | |:---|:-----|:----------|
|
| 448 | |[posthtml-bem][bem]|[![npm][bem-badge]][bem-npm]|Support BEM naming in html structure|
|
| 449 | |[posthtml-postcss][css]|[![npm][css-badge]][css-npm]|Use [PostCSS][css-gh] in HTML document|
|
| 450 | |[posthtml-px2rem][px2rem]|[![npm][px2rem-badge]][px2rem-npm]|Change px to rem in Inline CSS|
|
| 451 | |[posthtml-css-modules][css-modules]|[![npm][css-modules-badge]][css-modules-npm]|Use CSS modules in HTML|
|
| 452 | |[posthtml-postcss-modules][postcss-modules]|[![npm][postcss-modules-badge]][postcss-modules-npm]|CSS Modules in html|
|
| 453 | |[posthtml-classes][classes]|[![npm][classes-badge]][classes-npm]|Get a list of classes from HTML|
|
| 454 | |[posthtml-prefix-class][prefix]|[![npm][prefix-badge]][prefix-npm]|Prefix class names
|
| 455 | |[posthtml-modular-css][modular]|[![npm][modular-badge]][modular-npm]|Make CSS modular|
|
| 456 | |[posthtml-inline-css][in]|[![npm][in-badge]][in-npm]|CSS Inliner|
|
| 457 | |[posthtml-collect-styles][collect-styles]|[![npm][collect-styles-badge]][collect-styles-npm]|Collect styles from html and put it in the head|
|
| 458 | |[posthtml-collect-inline-styles][collect]|[![npm][collect-badge]][collect-npm]|Collect inline styles and insert to head tag|
|
| 459 | |[posthtml-style-to-file][style]|[![npm][style-badge]][style-npm]| Save HTML style nodes and attributes to CSS file|
|
| 460 | |[posthtml-color-shorthand-hex-to-six-digit][hex]|[![npm][hex-badge]][hex-npm]|Enforce all hex color codes to be 6-char long|
|
| 461 |
|
| 462 |
|
| 463 | [bem]: https://github.com/rajdee/posthtml-bem
|
| 464 | [bem-badge]: https://img.shields.io/npm/v/posthtml-bem.svg
|
| 465 | [bem-npm]: https://npmjs.com/package/posthtml-bem
|
| 466 |
|
| 467 | [css]: https://github.com/posthtml/posthtml-postcss
|
| 468 | [css-badge]: https://img.shields.io/npm/v/posthtml-postcss.svg
|
| 469 | [css-npm]: https://npmjs.com/package/posthtml-postcss
|
| 470 | [css-gh]: https://github.com/postcss/postcss
|
| 471 |
|
| 472 | [postcss-modules]: https://github.com/posthtml/posthtml-postcss-modules
|
| 473 | [postcss-modules-badge]: https://img.shields.io/npm/v/posthtml-postcss-modules.svg
|
| 474 | [postcss-modules-npm]: https://npmjs.com/package/posthtml-postcss-modules
|
| 475 |
|
| 476 | [css-modules]: https://github.com/posthtml/posthtml-css-modules
|
| 477 | [css-modules-badge]: https://img.shields.io/npm/v/posthtml-css-modules.svg
|
| 478 | [css-modules-npm]: https://npmjs.com/package/posthtml-css-modules
|
| 479 |
|
| 480 | [collect-styles]: https://github.com/posthtml/posthtml-collect-styles
|
| 481 | [collect-styles-badge]: https://img.shields.io/npm/v/posthtml-collect-styles.svg
|
| 482 | [collect-styles-npm]: https://npmjs.com/package/posthtml-collect-styles
|
| 483 |
|
| 484 | [collect]: https://github.com/totora0155/posthtml-collect-inline-styles
|
| 485 | [collect-badge]: https://img.shields.io/npm/v/posthtml-collect-inline-styles.svg
|
| 486 | [collect-npm]: https://npmjs.com/package/posthtml-collect-inline-styles
|
| 487 |
|
| 488 | [px2rem]: https://github.com/weixin/posthtml-px2rem
|
| 489 | [px2rem-badge]: https://img.shields.io/npm/v/posthtml-px2rem.svg
|
| 490 | [px2rem-npm]: https://npmjs.com/package/posthtml-px2rem
|
| 491 |
|
| 492 | [classes]: https://github.com/rajdee/posthtml-classes
|
| 493 | [classes-badge]: https://img.shields.io/npm/v/posthtml-classes.svg
|
| 494 | [classes-npm]: https://npmjs.com/package/posthtml-classes
|
| 495 |
|
| 496 | [prefix]: https://github.com/stevenbenisek/posthtml-prefix-class
|
| 497 | [prefix-badge]: https://img.shields.io/npm/v/posthtml-prefix-class.svg
|
| 498 | [prefix-npm]: https://npmjs.com/package/posthtml-prefix-class
|
| 499 |
|
| 500 | [modular]: https://github.com/admdh/posthtml-modular-css
|
| 501 | [modular-badge]: https://img.shields.io/npm/v/posthtml-modular-css.svg
|
| 502 | [modular-npm]: https://npmjs.com/package/posthtml-modular-css
|
| 503 |
|
| 504 | [in]: https://github.com/posthtml/posthtml-inline-css
|
| 505 | [in-badge]: https://img.shields.io/npm/v/posthtml-inline-css.svg
|
| 506 | [in-npm]: https://npmjs.com/package/posthtml-inline-css
|
| 507 |
|
| 508 | [style]: https://github.com/posthtml/posthtml-style-to-file
|
| 509 | [style-badge]: https://img.shields.io/npm/v/posthtml-style-to-file.svg
|
| 510 | [style-npm]: https://npmjs.com/package/posthtml-style-to-file
|
| 511 |
|
| 512 | [hex]: https://github.com/code-and-send/posthtml-color-shorthand-hex-to-six-digit
|
| 513 | [hex-badge]: https://img.shields.io/npm/v/posthtml-color-shorthand-hex-to-six-digit.svg
|
| 514 | [hex-npm]: https://npmjs.com/package/posthtml-color-shorthand-hex-to-six-digit
|
| 515 |
|
| 516 | #### IMG & SVG
|
| 517 |
|
| 518 | |Name|Status|Description|
|
| 519 | |:---|:-----|:----------|
|
| 520 | |[posthtml-img-autosize][img]|[![npm][img-badge]][img-npm]|Auto setting the width and height of \<img\>|
|
| 521 | |[posthtml-to-svg-tags][svg]|[![npm][svg-badge]][svg-npm]|Convert html tags to svg equals|
|
| 522 | |[posthtml-webp][webp]|[![npm][webp-badge]][webp-npm]|Add WebP support for images|
|
| 523 |
|
| 524 | [img]: https://github.com/posthtml/posthtml-img-autosize
|
| 525 | [img-badge]: https://img.shields.io/npm/v/posthtml-img-autosize.svg
|
| 526 | [img-npm]: https://npmjs.com/package/posthtml-img-autosize
|
| 527 |
|
| 528 | [svg]: https://github.com/theprotein/posthtml-to-svg-tags
|
| 529 | [svg-badge]: https://img.shields.io/npm/v/posthtml-to-svg-tags.svg
|
| 530 | [svg-npm]: https://npmjs.com/package/posthtml-to-svg-tags
|
| 531 |
|
| 532 | [webp]: https://github.com/seokirill/posthtml-webp
|
| 533 | [webp-badge]: https://img.shields.io/npm/v/posthtml-webp.svg
|
| 534 | [webp-npm]: https://npmjs.com/package/posthtml-webp
|
| 535 |
|
| 536 | #### Accessibility
|
| 537 |
|
| 538 | |Name|Status|Description|
|
| 539 | |:---|:-----|:----------|
|
| 540 | |[posthtml-aria-tabs][aria]|[![npm][aria-badge]][aria-npm]|Write accessible tabs with minimal markup|
|
| 541 | |[posthtml-alt-always][alt]|[![npm][alt-badge]][alt-npm]|Always add alt attribute for images that don't have it|
|
| 542 | |[posthtml-schemas][schemas]|[![npm][schemas-badge]][schemas-npm]| Add microdata to your HTML|
|
| 543 |
|
| 544 |
|
| 545 | [alt]: https://github.com/ismamz/posthtml-alt-always
|
| 546 | [alt-badge]: https://img.shields.io/npm/v/posthtml-alt-always.svg
|
| 547 | [alt-npm]: https://npmjs.com/package/posthtml-alt-always
|
| 548 |
|
| 549 | [aria]: https://github.com/jonathantneal/posthtml-aria-tabs
|
| 550 | [aria-badge]: https://img.shields.io/npm/v/posthtml-aria-tabs.svg
|
| 551 | [aria-npm]: https://npmjs.com/package/posthtml-aria-tabs
|
| 552 |
|
| 553 | [schemas]: https://github.com/jonathantneal/posthtml-schemas
|
| 554 | [schemas-badge]: https://img.shields.io/npm/v/posthtml-schemas.svg
|
| 555 | [schemas-npm]: https://npmjs.com/package/posthtml-schemas
|
| 556 |
|
| 557 | #### Optimization
|
| 558 |
|
| 559 | |Name|Status|Description|
|
| 560 | |:---|:-----|:----------|
|
| 561 | |[posthtml-shorten][shorten]|[![npm][shorten-badge]][shorten-npm]|Shorten URLs in HTML|
|
| 562 | |[posthtml-uglify][uglify]|[![npm][uglify-badge]][uglify-npm]|Shorten CSS in HTML|
|
| 563 | |[posthtml-minifier][minifier]|[![npm][minifier-badge]][minifier-npm]|Minify HTML|
|
| 564 | |[posthtml-remove-attributes][remove]|[![npm][remove-badge]][remove-npm]|Remove attributes unconditionally or with content match|
|
| 565 | |[posthtml-remove-tags][remove-tags]|[![npm][remove-tags-badge]][remove-tags-npm]|Remove tags with content match|
|
| 566 | |[posthtml-remove-duplicates][remove-duplicates]|[![npm][remove-duplicates-badge]][remove-duplicates-npm]|Remove duplicate elements from your html|
|
| 567 | |[posthtml-transformer][transform]|[![npm][transform-badge]][transform-npm]|Process HTML by directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc.|
|
| 568 | |[htmlnano][nano]|[![npm][nano-badge]][nano-npm]|HTML Minifier|
|
| 569 | |[posthtml-email-remove-unused-css][unused]|[![npm][unused-badge]][unused-npm]|Remove unused CSS from email templates|
|
| 570 |
|
| 571 |
|
| 572 | [remove]: https://github.com/princed/posthtml-remove-attributes
|
| 573 | [remove-badge]: https://img.shields.io/npm/v/posthtml-remove-attributes.svg
|
| 574 | [remove-npm]: https://npmjs.com/package/posthtml-remove-attributes
|
| 575 |
|
| 576 | [remove-tags]: https://github.com/posthtml/posthtml-remove-tags
|
| 577 | [remove-tags-badge]: https://img.shields.io/npm/v/posthtml-remove-tags.svg
|
| 578 | [remove-tags-npm]: https://npmjs.com/package/posthtml-remove-tags
|
| 579 |
|
| 580 | [remove-duplicates]: https://github.com/canvaskisa/posthtml-remove-duplicates
|
| 581 | [remove-duplicates-badge]: https://img.shields.io/npm/v/posthtml-remove-duplicates.svg
|
| 582 | [remove-duplicates-npm]: https://npmjs.com/package/posthtml-remove-duplicates
|
| 583 |
|
| 584 | [minifier]: https://github.com/Rebelmail/posthtml-minifier
|
| 585 | [minifier-badge]: https://img.shields.io/npm/v/posthtml-minifier.svg
|
| 586 | [minifier-npm]: https://npmjs.com/package/posthtml-minifier
|
| 587 |
|
| 588 | [shorten]: https://github.com/Rebelmail/posthtml-shorten
|
| 589 | [shorten-badge]: https://img.shields.io/npm/v/posthtml-shorten.svg
|
| 590 | [shorten-npm]: https://npmjs.com/package/posthtml-shorten
|
| 591 |
|
| 592 | [uglify]: https://github.com/Rebelmail/posthtml-uglify
|
| 593 | [uglify-badge]: https://img.shields.io/npm/v/posthtml-uglify.svg
|
| 594 | [uglify-npm]: https://npmjs.com/package/posthtml-uglify
|
| 595 |
|
| 596 | [nano]: https://github.com/maltsev/htmlnano
|
| 597 | [nano-badge]: https://img.shields.io/npm/v/htmlnano.svg
|
| 598 | [nano-npm]: https://npmjs.com/package/htmlnano
|
| 599 |
|
| 600 | [unused]: https://github.com/code-and-send/posthtml-email-remove-unused-css
|
| 601 | [unused-badge]: https://img.shields.io/npm/v/posthtml-email-remove-unused-css.svg
|
| 602 | [unused-npm]: https://npmjs.com/package/posthtml-email-remove-unused-css
|
| 603 |
|
| 604 | [transform]: https://github.com/flashlizi/posthtml-transformer
|
| 605 | [transform-badge]: https://img.shields.io/npm/v/posthtml-transformer.svg
|
| 606 | [transform-npm]: https://npmjs.com/package/posthtml-transformer
|
| 607 |
|
| 608 | #### Workflow
|
| 609 |
|
| 610 | |Name|Status|Description|
|
| 611 | |:---|:-----|:----------|
|
| 612 | |[posthtml-load-plugins][plugins]|[![npm][plugins-badge]][plugins-npm]|Autoload Plugins
|
| 613 | |[posthtml-load-options][options]|[![npm][options-badge]][options-npm]|Autoload Options (Parser && Render)|
|
| 614 | |[posthtml-load-config][config]|[![npm][config-badge]][config-npm]|Autoload Config (Plugins && Options)|
|
| 615 | |[posthtml-w3c][w3c]|[![npm][w3c-badge]][w3c-npm]|Validate HTML with W3C Validation|
|
| 616 | |[posthtml-hint][hint]|[![npm][hint-badge]][hint-npm]|Lint HTML with HTML Hint|
|
| 617 | |[posthtml-tidy][tidy]|[![npm][tidy-badge]][tidy-npm]|Sanitize HTML with HTML Tidy|
|
| 618 |
|
| 619 | [options]: https://github.com/posthtml/posthtml-load-options
|
| 620 | [options-badge]: https://img.shields.io/npm/v/posthtml-load-options.svg
|
| 621 | [options-npm]: https://npmjs.com/package/posthtml-load-options
|
| 622 |
|
| 623 | [plugins]: https://github.com/posthtml/posthtml-load-plugins
|
| 624 | [plugins-badge]: https://img.shields.io/npm/v/posthtml-load-plugins.svg
|
| 625 | [plugins-npm]: https://npmjs.com/package/posthtml-load-plugins
|
| 626 |
|
| 627 | [config]: https://github.com/posthtml/posthtml-load-config
|
| 628 | [config-badge]: https://img.shields.io/npm/v/posthtml-load-config.svg
|
| 629 | [config-npm]: https://npmjs.com/package/posthtml-load-config
|
| 630 |
|
| 631 | [tidy]: https://github.com/michael-ciniawsky/posthtml-tidy
|
| 632 | [tidy-badge]: https://img.shields.io/npm/v/posthtml-tidy.svg
|
| 633 | [tidy-npm]: https://npmjs.com/package/posthtml-tidy
|
| 634 |
|
| 635 | [hint]: https://github.com/posthtml/posthtml-hint
|
| 636 | [hint-badge]: https://img.shields.io/npm/v/posthtml-hint.svg
|
| 637 | [hint-npm]: https://npmjs.com/package/posthtml-hint
|
| 638 |
|
| 639 | [w3c]: https://github.com/posthtml/posthtml-w3c
|
| 640 | [w3c-badge]: https://img.shields.io/npm/v/posthtml-w3c.svg
|
| 641 | [w3c-npm]: https://npmjs.com/package/posthtml-w3c
|
| 642 |
|
| 643 | ## Middleware
|
| 644 |
|
| 645 | |Name|Status|Description|
|
| 646 | |:---|:-----|:----------|
|
| 647 | |[koa-posthtml][koa]|[![npm][koa-badge]][koa-npm]|Koa Middleware|
|
| 648 | |[hapi-posthtml][hapi]|[![npm][hapi-badge]][hapi-npm]|Hapi Plugin|
|
| 649 | |[express-posthtml][express]|[![npm][express-badge]][express-npm]|Express Middleware|
|
| 650 | |[electron-posthtml][electron]|[![npm][electron-badge]][electron-npm]|Electron Plugin|
|
| 651 | |[metalsmith-posthtml][metalsmith]|[![npm][metalsmith-badge]][metalsmith-npm]|Metalsmith Plugin|
|
| 652 |
|
| 653 |
|
| 654 | [koa]: https://github.com/posthtml/koa-posthtml
|
| 655 | [koa-badge]: https://img.shields.io/npm/v/koa-posthtml.svg
|
| 656 | [koa-npm]: https://npmjs.com/package/koa-posthtml
|
| 657 |
|
| 658 | [hapi]: https://github.com/posthtml/hapi-posthtml
|
| 659 | [hapi-badge]: https://img.shields.io/npm/v/hapi-posthtml.svg
|
| 660 | [hapi-npm]: https://npmjs.com/package/hapi-posthtml
|
| 661 |
|
| 662 | [express]: https://github.com/posthtml/express-posthtml
|
| 663 | [express-badge]: https://img.shields.io/npm/v/express-posthtml.svg
|
| 664 | [express-npm]: https://npmjs.com/package/express-posthtml
|
| 665 |
|
| 666 | [electron]: https://github.com/posthtml/electron-posthtml
|
| 667 | [electron-badge]: https://img.shields.io/npm/v/electron-posthtml.svg
|
| 668 | [electron-npm]: https://npmjs.com/package/electron-posthtml
|
| 669 |
|
| 670 | [metalsmith]: https://github.com/posthtml/metalsmith-posthtml
|
| 671 | [metalsmith-badge]: https://img.shields.io/npm/v/metalsmith-posthtml.svg
|
| 672 | [metalsmith-npm]: https://npmjs.com/package/metalsmith-posthtml
|
| 673 |
|
| 674 | ## Maintainers
|
| 675 |
|
| 676 | <table>
|
| 677 | <tbody>
|
| 678 | <tr>
|
| 679 | <td align="center">
|
| 680 | <img width="150 height="150"
|
| 681 | src="https://avatars.githubusercontent.com/u/1510217?v=3&s=150">
|
| 682 | <br />
|
| 683 | <a href="https://github.com/voischev">Ivan Voischev</a>
|
| 684 | </td>
|
| 685 | <td align="center">
|
| 686 | <img width="150 height="150"
|
| 687 | src="https://avatars.githubusercontent.com/u/982072?v=3&s=150">
|
| 688 | <br />
|
| 689 | <a href="https://github.com/awinogradov">Anton Winogradov</a>
|
| 690 | </td>
|
| 691 | <td align="center">
|
| 692 | <img width="150 height="150"
|
| 693 | src="https://avatars.githubusercontent.com/u/677518?v=3&s=150">
|
| 694 | <br />
|
| 695 | <a href="https://github.com/zxqfox">Alexej Yaroshevich</a>
|
| 696 | </td>
|
| 697 | <td align="center">
|
| 698 | <img width="150 height="150"
|
| 699 | src="https://avatars.githubusercontent.com/u/1813468?v=3&s=150">
|
| 700 | <br />
|
| 701 | <a href="https://github.com/Yeti-or">Vasiliy</a>
|
| 702 | </td>
|
| 703 | </tr>
|
| 704 | <tbody>
|
| 705 | </table>
|
| 706 |
|
| 707 | ## Contributing
|
| 708 |
|
| 709 | See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [CONTRIBUTING](CONTRIBUTING.md).
|
| 710 |
|
| 711 | ## LICENSE
|
| 712 |
|
| 713 | [MIT](LICENSE)
|
| 714 |
|
| 715 |
|
| 716 | [npm]: https://img.shields.io/npm/v/posthtml.svg
|
| 717 | [npm-url]: https://npmjs.com/package/posthtml
|
| 718 |
|
| 719 | [deps]: https://david-dm.org/posthtml/posthtml.svg
|
| 720 | [deps-url]: https://david-dm.org/posthtml/posthtml
|
| 721 |
|
| 722 | [build]: https://travis-ci.org/posthtml/posthtml.svg?branch=master
|
| 723 | [build-url]: https://travis-ci.org/posthtml/posthtml?branch=master
|
| 724 |
|
| 725 | [cover]: https://coveralls.io/repos/posthtml/posthtml/badge.svg?branch=master
|
| 726 | [cover-url]: https://coveralls.io/r/posthtml/posthtml?branch=master
|
| 727 |
|
| 728 | [code-style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
|
| 729 | [code-style-url]: http://standardjs.com/
|
| 730 |
|
| 731 | [chat]: https://badges.gitter.im/posthtml/posthtml.svg
|
| 732 | [chat-url]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"
|