PostCSS Plugin

Use PostCSS with PostHTML

Install

npm i -D posthtml-postcss

Usage

import{dirname}from'node:path'import{readFileSync}from'node:fs'import{fileURLToPath}from'node:url'importposthtmlfrom'posthtml'importpostcssfrom'posthtml-postcss'constpostcssPlugins=[]constpostcssOptions={}constfilterType=/^text\/css$/const__filename=fileURLToPath(import.meta.url)const__dirname=dirname(__filename)constfilePath=`${__dirname}/index.html`consthtml=readFileSync(filePath,'utf8')posthtml([postcss(postcssPlugins,postcssOptions,filterType)]).process(html,{from: filePath}).then((result)=>console.log(result.html))

If you don't pass any arguments to posthtml-postcss, it will try to 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

importposthtmlfrom'posthtml'importpostcssfrom'posthtml-postcss'importautoprefixerfrom'autoprefixer'constpostcssPlugins=[autoprefixer({browsers: ['last 2 versions']})]constpostcssOptions={}constfilterType=/^text\/css$/consthtml=` <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><divstyle="display: -webkit-flex;display: -ms-flexbox;display: flex;">
Text
</div>