Package Exports

posthtml-postcss
posthtml-postcss/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (posthtml-postcss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Plugin

Use PostCSS with PostHTML

Install

npm i -D posthtml-postcss

Usage

const { readFileSync } = require('fs')

const posthtml = require('posthtml')
const postcss = require('posthtml-postcss')

const postcssPlugins = []
const postcssOptions = {}
const filterType = /^text\/css$/

const filePath = `${__dirname}/index.html`
const html = readFileSync(filePath, 'utf8')

posthtml([ postcss(postcssPlugins, postcssOptions, filterType) ])
    .process(html, { from: filePath })
    .then((result) => console.log(result.html))

If you don't pass arguments to posthtml-postcss, it will use your project's PostCSS configuration (see postcss-load-config).

Notice that we're setting the option from when calling process. posthtml-postcss forwards this to PostCSS, which is useful for syntax error messages. (postcss-cli and gulp-posthtml are setting from automatically.)

Example

const posthtml = require('posthtml')
const postcss = require('posthtml-postcss')

const postcssPlugins = [
  require('autoprefixer')({ browsers: ['last 2 versions'] })
]
const postcssOptions = {}
const filterType = /^text\/css$/

const html = `
  <style>div { display: flex; }</style>
  <div style="display: flex;">Text</div>
`

posthtml([ postcss(postcssPlugins, postcssOptions, filterType) ])
    .process(html)
    .then((result) => console.log(result.html))

Output:

<style>
  div { display: -webkit-flex;display: -ms-flexbox;display: flex; }
</style>
<div style="display: -webkit-flex;display: -ms-flexbox;display: flex;">
  Text
</div>