Skip to content

Commit 8f62b2d

Browse files
committed
chore: update readme.md
1 parent 83d2e69 commit 8f62b2d

File tree

1 file changed

+22
-12
lines changed

1 file changed

+22
-12
lines changed

README.md

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,28 @@ npm i -D posthtml-postcss
1818
## Usage
1919

2020
```js
21-
const { readFileSync } = require('fs')
21+
import {dirname} from 'node:path'
22+
import {readFileSync} from 'node:fs'
23+
import {fileURLToPath} from 'node:url'
2224

23-
const posthtml = require('posthtml')
24-
const postcss = require('posthtml-postcss')
25+
import posthtml from 'posthtml'
26+
import postcss from 'posthtml-postcss'
2527

2628
const postcssPlugins = []
2729
const postcssOptions = {}
2830
const filterType = /^text\/css$/
2931

32+
const __filename = fileURLToPath(import.meta.url)
33+
const __dirname = dirname(__filename)
34+
3035
const filePath = `${__dirname}/index.html`
3136
const html = readFileSync(filePath, 'utf8')
3237

33-
posthtml([ postcss(postcssPlugins, postcssOptions, filterType) ])
34-
.process(html, { from: filePath })
35-
.then((result) => console.log(result.html))
38+
posthtml([
39+
postcss(postcssPlugins, postcssOptions, filterType)
40+
])
41+
.process(html, {from: filePath})
42+
.then((result) => console.log(result.html))
3643
```
3744
3845
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)).
@@ -42,11 +49,12 @@ Notice that we're setting the option `from` when calling `process`. `posthtml-po
4249
## Example
4350
4451
```js
45-
const posthtml = require('posthtml')
46-
const postcss = require('posthtml-postcss')
52+
import posthtml from 'posthtml'
53+
import postcss from 'posthtml-postcss'
54+
import autoprefixer from 'autoprefixer'
4755

4856
const postcssPlugins = [
49-
require('autoprefixer')({ browsers: ['last 2 versions'] })
57+
autoprefixer({ browsers: ['last 2 versions'] })
5058
]
5159
const postcssOptions = {}
5260
const filterType = /^text\/css$/
@@ -56,9 +64,11 @@ const html = `
5664
<div style="display: flex;">Text</div>
5765
`
5866

59-
posthtml([ postcss(postcssPlugins, postcssOptions, filterType) ])
60-
.process(html)
61-
.then((result) => console.log(result.html))
67+
posthtml([
68+
postcss(postcssPlugins, postcssOptions, filterType)
69+
])
70+
.process(html)
71+
.then(result => console.log(result.html))
6272
```
6373
6474
Output:

0 commit comments

Comments
 (0)