Neoanthropic Preternatural Murmurings

    posthtml
    TypeScript icon, indicating that this package has built-in type declarations

    0.16.5 • Public • Published

    NPM Deps Tests Coverage Standard Code Style Twitter

    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 Status Description
    posthtml-parser npm Parser HTML/XML to PostHTMLTree
    posthtml-render npm 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>

    ⚠️ 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 Status Description
    posthtml-pug npm Pug Parser
    sugarml npm SugarML Parser

    Plugins

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

    TEXT

    Name Status Description
    posthtml-md npm Easily use context-sensitive markdown within HTML
    posthtml-toc npm Table of contents
    posthtml-lorem npm Add lorem ipsum placeholder text to any document
    posthtml-retext npm Extensible system for analysing and manipulating natural language
    prevent-widows npm Prevent widows from appearing at the end of paragraphs
    posthtml-richtypo npm Process HTML node text with Richtypo

    HTML

    Name Status Description
    posthtml-doctype npm Set !DOCTYPE
    posthtml-head-elements npm Include head elements from JSON file
    posthtml-include npm Include HTML
    posthtml-modules npm Include and process HTML
    posthtml-extend npm Extend Layout (Pug-like)
    posthtml-extend-attrs npm Extend Attrs
    posthtml-expressions npm Template Expressions
    posthtml-inline-assets npm Inline external scripts, styles, and images
    posthtml-static-react npm Render custom elements as static React components
    posthtml-custom-elements npm Use custom elements
    posthtml-web-component npm Web Component server-side rendering, Component as a Service (CaaS)
    posthtml-spaceless npm Remove whitespace between HTML tags
    posthtml-cache npm Add a nanoid to links in your tags
    posthtml-highlight npm Syntax highlight code elements
    posthtml-pseudo npm Add pseudo selector class names to elements
    posthtml-noopener npm Add rel="noopener noreferrer" to links that open in new tab
    posthtml-noscript npm Insert noscript content when JavaScript is disabled
    posthtml-hash npm Hash static CSS/JS assets
    posthtml-insert-at npm Append/prepend HTML to a selector
    posthtml-plugin-remove-duplicates npm Remove duplicated tags
    posthtml-plugin-link-preload npm Add preload/prefetch tags (or return equivalent headers)
    posthtml-prism npm Code syntax highlighting with Prism
    posthtml-url-parameters npm Add parameters to URLs
    posthtml-safe-class-names npm Replace escaped characters in class names and CSS selectors
    posthtml-fetch npm Fetch and render remote content
    posthtml-mso npm Makes it easy to write Outlook conditionals in HTML emails
    posthtml-postcss-merge-longhand npm Merge longhand inline CSS into shorthand
    posthtml-markdownit npm Transform Markdown using markdown-it
    posthtml-extra-attributes npm Add new attributes to elements in your HTML
    posthtml-sri npm Adds subresource integrity (SRI) attributes.

    CSS

    Name Status Description
    posthtml-bem npm Support BEM naming in html structure
    posthtml-postcss npm Use PostCSS in HTML document
    posthtml-px2rem npm Change px to rem in Inline CSS
    posthtml-css-modules npm Use CSS modules in HTML
    posthtml-postcss-modules npm CSS Modules in html
    posthtml-classes npm Get a list of classes from HTML
    posthtml-prefix-class npm Prefix class names
    posthtml-modular-css npm Make CSS modular
    posthtml-inline-css npm CSS Inliner
    posthtml-collect-styles npm Collect styles from html and put it in the head
    posthtml-collect-inline-styles npm Collect inline styles and insert to head tag
    posthtml-style-expantion npm PostHTML plugin expand link rel="stylesheet".
    posthtml-style-to-file npm Save HTML style nodes and attributes to CSS file
    posthtml-color-shorthand-hex-to-six-digit npm Enforce all hex color codes to be 6-char long
    posthtml-minify-classnames npm Rewrites classnames and ids inside of html and css files to reduce file size.

    IMG & SVG

    Name Status Description
    posthtml-img-autosize npm Auto setting the width and height of <img>
    posthtml-to-svg-tags npm Convert html tags to svg equivalents
    posthtml-webp npm Add WebP support for images
    posthtml-favicons npm Generate Favicons and add related tags
    posthtml-inline-svg npm Inline svg icons in HTML
    posthtml-inline-favicon npm Inline favicons in HTML

    Accessibility

    Name Status Description
    posthtml-aria-tabs npm Write accessible tabs with minimal markup
    posthtml-alt-always npm Always add alt attribute for images that don't have it
    posthtml-schemas npm Add microdata to your HTML

    Optimization

    Name Status Description
    posthtml-shorten npm Shorten URLs in HTML
    posthtml-uglify npm Shorten CSS in HTML
    posthtml-minifier npm Minify HTML
    posthtml-remove-attributes npm Remove attributes unconditionally or with content match
    posthtml-remove-tags npm Remove tags with content match
    posthtml-remove-duplicates npm Remove duplicate elements from your html
    posthtml-transformer npm Process HTML by directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc.
    htmlnano npm HTML Minifier
    posthtml-link-noreferrer npm Add rel="noopener" and rel="noreferrer" to all links that contain the attribute target="_blank"
    posthtml-lazyload npm Add native lazyload attribute
    posthtml-postcss-treeshaker npm Tree shake styles for classes and ids in style tag
    posthtml-external-link npm Add rel="external noopenner nofollow" and target="_blank" to all external links

    Workflow

    Name Status Description
    posthtml-load-plugins npm Autoload Plugins
    posthtml-load-options npm Autoload Options (Parser && Render)
    posthtml-load-config npm Autoload Config (Plugins && Options)
    posthtml-w3c npm Validate HTML with W3C Validation
    posthtml-hint npm Lint HTML with HTML Hint
    posthtml-tidy npm Sanitize HTML with HTML Tidy

    Middleware

    Name Status Description
    koa-posthtml npm Koa Middleware
    hapi-posthtml npm Hapi Plugin
    express-posthtml npm Express Middleware
    electron-posthtml npm Electron Plugin
    metalsmith-posthtml npm Metalsmith Plugin

    Maintainers


    Ivan Demidov

    Ivan Voischev

    Contributing

    See PostHTML Guidelines and CONTRIBUTING.

    Contributors

    Backers

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

    LICENSE

    MIT

    Install

    npm i posthtml

    Homepage

    posthtml.org

    DownloadsWeekly Downloads

    596,287

    Version

    0.16.5

    License

    MIT

    Unpacked Size

    97.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • voischev
    • scrum