Skip to content

Commit 3c9c813

Browse files
committed
docs: simple update usage
1 parent 01e602a commit 3c9c813

File tree

1 file changed

+33
-10
lines changed

1 file changed

+33
-10
lines changed

readme.md

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,47 @@ npm i -D posthtml-minify-classnames
3434
```js
3535
const posthtml = require('posthtml');
3636
const minifyClassnames = require('posthtml-minify-classnames');
37+
const html = `
38+
<style>
39+
#foo { color: red }
40+
.bar { color: blue }
41+
.baz { transition: all }
42+
</style>
43+
<div
44+
id="foo"
45+
class="bar"
46+
x-transition:enter="baz"
47+
>baz</div>
48+
`;
3749

3850
posthtml()
3951
.use(minifyClassnames({
4052
filter: /^.bar/,
4153
genNameClass: 'genNameEmoji',
42-
genNameId: 'genNameEmoji'
54+
genNameId: 'genNameEmoji',
55+
customAttributes: ['x-transition:enter']
4356
}))
44-
.process(`
45-
<style>
46-
#foo { color: red }
47-
.bar { color: blue }
48-
</style>
49-
<div id="foo" class="bar">baz</div>
50-
`)
57+
.process(html)
5158
.then(function (result) {
52-
console.log(result.html); //=> '<style>#a { color: red } .bar { color: blue }</style><div id="a" class="bar">baz</div>'
59+
console.log(result.html);
5360
});
5461
```
62+
63+
_**`=> result.html`**_
64+
```html
65+
<style>
66+
#a { color: red }
67+
.bar { color: blue }
68+
.b { transition: all; }
69+
</style>
70+
71+
<div
72+
id="a"
73+
class="bar"
74+
x-transition:enter="b"
75+
>baz</div>
76+
```
77+
5578
> Note: To use with external sheets, other plugins must be used, like [posthtml-inline-assets](https://github.com/jonathantneal/posthtml-inline-assets) and [posthtml-style-to-file](https://github.com/posthtml/posthtml-style-to-file), or other build task plugins.
5679
5780
## Options
@@ -66,7 +89,7 @@ Description: *Regular expression that excludes names from processing*
6689

6790
Type: `Boolean<false>|String<'genName'|'genNameEmoji'|'genNameEmojiString'>`
6891
Default: `'genName'`
69-
92+
Description:
7093
- `'genName'` Generates the smallest possible names
7194
- `'genNameEmoji'` Generates small emoji based names
7295
- `'genNameEmojiString'` Generates random emoji with 3 emojis in each

0 commit comments

Comments
 (0)