phtmlorg/rollup-plugin-phtml

README

rollup-plugin-phtml

rollup-plugin-phtml lets you use pHTML with Rollup.

Install

Add rollup-plugin-phtml to your project:

npm install rollup-plugin-phtml --save-dev

Usage

Use rollup-plugin-phtml in your Rollup configuration:

// rollup.config.js
import phtml from 'rollup-plugin-phtml';

export default {
  plugins: [
    phtml({
      /* Plugins */
      plugins: [], // Array | Plugin | Function

      /* Process Options */
      processOptions: {} // Object
    })
  ]
}

Then you can use HTML files:

import pageHTML from './page.html';

Options

plugins

The plugins property determines which pHTML plugins are applied.

phtml({
  plugins: require('@phtml/image-alt')
})

phtml({
  plugins: [
    require('@phtml/image-alt'),
    require('@phtml/image-size')({ intrinsicsize: 'intrinsic' })
  ]
})

processOptions

The processOptions property determines which pHTML custom settings are applied.

phtml({
  processOptions: {
    voidElements: ['path', 'source', 'use']
  }
})

inject

The inject option allows HTML imports to be injected into the document. By default, this features is disabled.

phtml({
  inject: true
})

When true, HTML is injected into <body> if it is available.

// Inject to `<body>`
import './page.html'

The HTML string is still available as the default export.

// Inject to `<body>` and also available as `pageHTML`
import pageHTML from './page.html'

When a String, HTML is injected into the matching selector, if it is available.

phtml({
  inject: 'html > head:first-child'
  // ↑ the selector is unnecessary verbose for demonstration purposes
})

// Inject to `<head>`
import './page.html'