posthtml

HTML/XML processor

MIT 56 个版本
html xml postproccessor parser transform transformations manipulation preprocessor processor
主页
仓库
提交 Issue
安装
npm install posthtml
yarn add posthtml
pnpm add posthtml
bun add posthtml
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.

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

Dependencies

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

Create to your project

npm init posthtml

Install

npm i -D posthtml

Usage

API

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>

CLI

npm i posthtml-cli

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

npm run posthtml

Gulp

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

Grunt

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,
      }
    ]
  }
}

Webpack

npm i -D html-loader posthtml-loader

v1.x

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

v2.x

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

Rollup

$ 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
    })
  ]
};

Parser

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 to get started.

Maintainers


Ivan Demidov
Ivan Voischev

Contributors

Backers

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

版本列表
0.16.7-beta.0 2023-10-20
0.16.7-0 2023-10-20
0.16.7 2025-10-14
0.16.6 2022-02-25
0.16.5 2021-07-28
0.16.4 2021-06-11
0.16.3 2021-06-10
0.16.2 2021-06-08
0.16.1 2021-06-04
0.16.0 2021-06-03
0.15.2 2021-04-13
0.15.1 2020-11-26
0.15.0 2020-11-24
0.14.0 2020-11-16
0.13.4 2020-10-15
0.13.3 2020-08-22
0.13.2 2020-08-13
0.13.1 2020-06-22
0.13.0 2020-04-27
0.12.3 2020-04-21
0.12.2 2020-04-16
0.12.1 2020-04-14
0.12.0 2019-10-11
0.11.6 2019-08-30
0.11.5 2019-08-27
0.11.4 2019-05-06
0.11.3 2018-02-16
0.11.2 2018-01-19
0.11.1 2018-01-16
0.11.0 2017-12-12
0.10.1 2017-11-24
0.10.0 2017-11-23
0.9.2 2017-01-20
0.9.1 2016-09-29
0.9.0 2016-07-06
0.8.7 2016-05-04
0.8.6 2016-04-26
0.8.5 2016-03-31
0.8.4 2016-03-30
0.8.3 2016-02-26
0.8.2 2016-02-05
0.8.1 2016-01-08
0.8.0 2015-11-24
0.7.0 2015-10-21
0.6.0 2015-10-17
0.5.0 2015-10-10
0.4.1 2015-10-03
0.4.0 2015-10-03
0.3.0 2015-09-25
0.2.1 2015-09-24
0.2.0 2015-09-23
0.1.0 2015-09-14
0.0.4 2015-09-13
0.0.3 2015-08-13
0.0.2 2015-07-02
0.0.1 2015-06-29