Skip to content

Commit 01e602a

Browse files
ScrumScrum
committed
docs: refactoring
1 parent 0b51cc8 commit 01e602a

File tree

3 files changed

+162
-160
lines changed

3 files changed

+162
-160
lines changed

‎examples/basic.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Basic simple example
2+
3+
Before:
4+
```html
5+
<html>
6+
<style>
7+
#some-id {
8+
text-transform: uppercase;
9+
}
10+
.header__intro {
11+
color: blue;
12+
}
13+
.card--profile {
14+
background: white;
15+
}
16+
.js-overlay {
17+
display: none;
18+
}
19+
#js-button {
20+
color: blue;
21+
}
22+
@media (min-width: 768px) {
23+
.header__intro {
24+
color: gray;
25+
}
26+
}
27+
</style>
28+
<body>
29+
<svg style="display:none">
30+
<symbol id="icon-location"><path d=""></path></symbol>
31+
</svg>
32+
<h1 id="some-id">Title</h1>
33+
<p class="header__intro">OMG</p>
34+
<div class="js-overlay"></div>
35+
<div id="js-button"></div>
36+
<div class="card--profile">
37+
card content
38+
</div>
39+
<svg>
40+
<use href="#icon-location"></use>
41+
</svg>
42+
<label for="username">Click me</label>
43+
<input type="text" id="username">
44+
</body>
45+
</html>
46+
```
47+
48+
After:
49+
50+
```html
51+
<html>
52+
<style>
53+
#a {
54+
text-transform: uppercase;
55+
}
56+
.a {
57+
color: blue;
58+
}
59+
.b {
60+
background: white;
61+
}
62+
.js-overlay {
63+
display: none;
64+
}
65+
#js-button {
66+
color: blue;
67+
}
68+
@media (min-width: 768px) {
69+
.a {
70+
color: gray;
71+
}
72+
}
73+
</style>
74+
<body>
75+
<svg style="display:none">
76+
<symbol id="b"><path d=""></path></symbol>
77+
</svg>
78+
<h1 id="a">Title</h1>
79+
<p class="a">OMG</p>
80+
<div class="js-overlay"></div>
81+
<div id="js-button"></div>
82+
<div class="b">
83+
card content
84+
</div>
85+
<svg>
86+
<use href="#b"></use>
87+
</svg>
88+
<label for="c">Click me</label>
89+
<input type="text" id="c">
90+
</body>
91+
</html>
92+
```

‎examples/genName.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Gen name simple example
2+
3+
```html
4+
<html>
5+
<style>
6+
#🚧🕥🏉 {
7+
text-transform: uppercase;
8+
}
9+
.☘👙📙 {
10+
color: blue;
11+
}
12+
.⏲📂⚗ {
13+
background: white;
14+
}
15+
.js-overlay {
16+
display: none;
17+
}
18+
#js-button {
19+
color: blue;
20+
}
21+
@media (min-width: 768px) {
22+
.☘👙📙 {
23+
color: gray;
24+
}
25+
}
26+
</style>
27+
<body>
28+
<svg style="display:none">
29+
<symbol id="👂🗨🌹"><path d=""></path></symbol>
30+
</svg>
31+
<h1 id="🚧🕥🏉">Title</h1>
32+
<p class="☘👙📙">OMG</p>
33+
<div class="js-overlay"></div>
34+
<div id="js-button"></div>
35+
<div class="⏲📂⚗">
36+
card content
37+
</div>
38+
<svg>
39+
<use href="#👂🗨🌹"></use>
40+
</svg>
41+
<label for="🏻🔐🙍">Click me</label>
42+
<input type="text" id="🏻🔐🙍">
43+
</body>
44+
</html>
45+
```
46+

‎readme.md‎

Lines changed: 24 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,27 @@
11
# posthtml-minify-classnames
22

3+
> This plugin rewrites classnames and ids inside of html and css files to reduce file size.
4+
5+
36
[![NPM][npm]][npm-url]
4-
[![Deps][deps]][deps-url]
57
[![Build][build]][build-badge]
68
[![Coverage][cover]][cover-badge]
79

8-
`posthtml-minify-classnames` is a [PostHTML][1] plugin that rewrites classnames and ids inside of html and css files to reduce file size.
10+
# Why ?
911

1012
Minifying classnames allows you to write verbose classnames in your source code, and distribute a smaller package to your users or application.
1113

12-
Use cases include:
14+
## Support
1315

1416
- Tiny code competitions e.g., https://a-k-apart.com/
1517
- Embeded devices like router admin panels e.g., http://www.dd-wrt.com/
1618
- Mobile and responsive sites to keep the latency low e.g., https://developers.google.com/web/showcase/2015/googleplus
19+
- SVG href attributes.
1720

18-
`posthtml-minify-classnames` supports svg href attributes.
19-
20-
Before:
21-
```html
22-
<html>
23-
<style>
24-
#some-id {
25-
text-transform: uppercase;
26-
}
27-
.header__intro {
28-
color: blue;
29-
}
30-
.card--profile {
31-
background: white;
32-
}
33-
.js-overlay {
34-
display: none;
35-
}
36-
#js-button {
37-
color: blue;
38-
}
39-
@media (min-width: 768px) {
40-
.header__intro {
41-
color: gray;
42-
}
43-
}
44-
</style>
45-
<body>
46-
<svg style="display:none">
47-
<symbol id="icon-location"><path d=""></path></symbol>
48-
</svg>
49-
<h1 id="some-id">Title</h1>
50-
<p class="header__intro">OMG</p>
51-
<div class="js-overlay"></div>
52-
<div id="js-button"></div>
53-
<div class="card--profile">
54-
card content
55-
</div>
56-
<svg>
57-
<use href="#icon-location"></use>
58-
</svg>
59-
<label for="username">Click me</label>
60-
<input type="text" id="username">
61-
</body>
62-
</html>
63-
```
21+
## Examples
6422

65-
After:
66-
67-
```html
68-
<html>
69-
<style>
70-
#a {
71-
text-transform: uppercase;
72-
}
73-
.a {
74-
color: blue;
75-
}
76-
.b {
77-
background: white;
78-
}
79-
.js-overlay {
80-
display: none;
81-
}
82-
#js-button {
83-
color: blue;
84-
}
85-
@media (min-width: 768px) {
86-
.a {
87-
color: gray;
88-
}
89-
}
90-
</style>
91-
<body>
92-
<svg style="display:none">
93-
<symbol id="b"><path d=""></path></symbol>
94-
</svg>
95-
<h1 id="a">Title</h1>
96-
<p class="a">OMG</p>
97-
<div class="js-overlay"></div>
98-
<div id="js-button"></div>
99-
<div class="b">
100-
card content
101-
</div>
102-
<svg>
103-
<use href="#b"></use>
104-
</svg>
105-
<label for="c">Click me</label>
106-
<input type="text" id="c">
107-
</body>
108-
</html>
109-
```
23+
- [Basic](examples/basic.md)
24+
- [GenName](examples/genName.md)
11025

11126
## Installation
11227

@@ -116,15 +31,13 @@ npm i -D posthtml-minify-classnames
11631

11732
## Usage
11833

119-
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.
120-
12134
```js
122-
var posthtml = require('posthtml');
123-
var minifyClassnames = require('posthtml-minify-classnames');
35+
const posthtml = require('posthtml');
36+
const minifyClassnames = require('posthtml-minify-classnames');
12437

12538
posthtml()
12639
.use(minifyClassnames({
127-
filter: /^.js-/,
40+
filter: /^.bar/,
12841
genNameClass: 'genNameEmoji',
12942
genNameId: 'genNameEmoji'
13043
}))
@@ -139,88 +52,39 @@ posthtml()
13952
console.log(result.html); //=> '<style>#a { color: red } .bar { color: blue }</style><div id="a" class="bar">baz</div>'
14053
});
14154
```
55+
> 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.
14256
14357
## Options
14458

145-
### filter
146-
147-
Type: regex, Default: `/^.js-/`
59+
#### `filter`
14860

149-
### genNameClass & genNameId
61+
Type: `RegExp`
62+
Default: `/^.js-/`
63+
Description: *Regular expression that excludes names from processing*
15064

151-
Type: string, Default: `'genName'`
65+
#### `genNameClass` & `genNameId`
15266

153-
Available options: `'genName'`, `'genNameEmoji'`, `'genNameEmojiString'`, `false`
67+
Type: `Boolean<false>|String<'genName'|'genNameEmoji'|'genNameEmojiString'>`
68+
Default: `'genName'`
15469

15570
- `'genName'` Generates the smallest possible names
15671
- `'genNameEmoji'` Generates small emoji based names
15772
- `'genNameEmojiString'` Generates random emoji with 3 emojis in each
15873
- `false` Preserves names. Use this to ignore ids or classes
15974

160-
**Note:** While emoji visually looks like a great way to reduce the size of input values, they often use 3-4 bytes or more (some can be over 20 bytes for a single rendered glyph). The below example 3 emoji string values range between 10-12 bytes in size, that's equivalent to ASCII strings up to 12 characters long. Meanwhile base36(`0-9,a-z`) provides an "alphabet" of 36 characters and an equivalent length of 3 characters is more than enough for most users (`36^3 = 46656`).
161-
162-
Example:
163-
164-
```html
165-
<html>
166-
<style>
167-
#🚧🕥🏉 {
168-
text-transform: uppercase;
169-
}
170-
.☘👙📙 {
171-
color: blue;
172-
}
173-
.⏲📂⚗ {
174-
background: white;
175-
}
176-
.js-overlay {
177-
display: none;
178-
}
179-
#js-button {
180-
color: blue;
181-
}
182-
@media (min-width: 768px) {
183-
.☘👙📙 {
184-
color: gray;
185-
}
186-
}
187-
</style>
188-
<body>
189-
<svg style="display:none">
190-
<symbol id="👂🗨🌹"><path d=""></path></symbol>
191-
</svg>
192-
<h1 id="🚧🕥🏉">Title</h1>
193-
<p class="☘👙📙">OMG</p>
194-
<div class="js-overlay"></div>
195-
<div id="js-button"></div>
196-
<div class="⏲📂⚗">
197-
card content
198-
</div>
199-
<svg>
200-
<use href="#👂🗨🌹"></use>
201-
</svg>
202-
<label for="🏻🔐🙍">Click me</label>
203-
<input type="text" id="🏻🔐🙍">
204-
</body>
205-
</html>
206-
```
75+
> **Note:** While emoji visually looks like a great way to reduce the size of input values, they often use 3-4 bytes or more (some can be over 20 bytes for a single rendered glyph). The below example 3 emoji string values range between 10-12 bytes in size, that's equivalent to ASCII strings up to 12 characters long. Meanwhile base36(`0-9,a-z`) provides an "alphabet" of 36 characters and an equivalent length of 3 characters is more than enough for most users (`36^3 = 46656`).
20776
208-
Future: Option to define own generator function.
77+
## TODO
20978

210-
### Contributing
79+
- Option to define own generator function.
21180

212-
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
21381

214-
### License [MIT](LICENSE)
21582

216-
[1]: https://github.com/posthtml/posthtml
83+
[posthtmlUrl]: https://github.com/posthtml/posthtml
21784

21885
[npm]: https://img.shields.io/npm/v/posthtml-minify-classnames.svg
21986
[npm-url]: https://npmjs.com/package/posthtml-minify-classnames
22087

221-
[deps]: https://david-dm.org/posthtml/posthtml-minify-classnames.svg
222-
[deps-url]: https://david-dm.org/posthtml/posthtml-minify-classnames
223-
22488
[build]: https://travis-ci.org/posthtml/posthtml-minify-classnames.svg?branch=master
22589
[build-badge]: https://travis-ci.org/posthtml/posthtml-minify-classnames?branch=master
22690

0 commit comments

Comments
 (0)