posthtml-postcss

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'

import posthtml from 'posthtml'
import postcss from 'posthtml-postcss'

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

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

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 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

import posthtml from 'posthtml'
import postcss from 'posthtml-postcss'
import autoprefixer from 'autoprefixer'

const postcssPlugins = [
  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>

Changelog

<small>1.0.5 (2025-09-29)</small>

• chore: update biome.json (e21cd9e)
• chore: update changelog.md (8b25469)
• chore: update deps (5c612bc)
• build(deps-dev): bump @biomejs/biome from 1.9.4 to 2.2.4 (221aad3)
• build(deps-dev): bump @vitest/coverage-v8 from 3.0.7 to 3.2.4 (40c61c6)
• build(deps-dev): bump autoprefixer from 10.4.20 to 10.4.21 (8e10daf)
• build(deps): bump postcss from 8.5.3 to 8.5.6 (10a44d9)
• build(deps): bump vite from 6.2.0 to 6.3.4 (949b76d)
• build(deps): bump vite from 7.0.4 to 7.1.5 (8064836)