https://github.com/posthtml/posthtml-postcss
Use PostCSS with PostHTML.
https://github.com/posthtml/posthtml-postcss
Last synced: 10 months ago
JSON representation
Use PostCSS with PostHTML.
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-postcss
- Owner: posthtml
- License: mit
- Created: 2015-11-23T19:14:04.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2024-10-07T22:14:08.000Z (over 1 year ago)
- Last Synced: 2024-10-29T21:06:06.905Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 822 KB
- Stars: 49
- Watchers: 6
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
PostCSS Plugin
Use PostCSS with PostHTML
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]
## Install
```bash
npm i -D posthtml-postcss
```
## Usage
```js
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`](https://www.npmjs.com/package/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
```js
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 = `
div { display: flex; }
Text
`
posthtml([
postcss(postcssPlugins, postcssOptions, filterType)
])
.process(html)
.then(result => console.log(result.html))
```
Output:
```html
div { display: -webkit-flex;display: -ms-flexbox;display: flex; }
Text
```
[npm]: https://www.npmjs.com/package/posthtml-postcss
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-postcss.svg
[npm-stats]: https://npm-stat.com/charts.html?package=posthtml-postcss
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-postcss.svg
[github-ci]: https://github.com/posthtml/posthtml-postcss/actions/workflows/nodejs.yml
[github-ci-shield]: https://github.com/posthtml/posthtml-postcss/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/posthtml-postcss.svg