Skip to content

Commit c32aa0e

Browse files
committed
Docs: improve optimize docs
1 parent 6dc7b0c commit c32aa0e

File tree

2 files changed

+83
-0
lines changed

2 files changed

+83
-0
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ fs.writeFileSync('./dist/index.html', html);
5858
- [rcs.stats](docs/api/stats.md) (deprecated)
5959
- [rcs.replace](docs/api/replace.md)
6060
- [rcs.mapping](docs/api/mapping.md)
61+
- [rcs.optimize](docs/api/optimize.md)
6162
- [rcs.statistics](docs/api/statistics.md)
6263
- [rcs.baseLibrary](docs/api/baselibrary.md)
6364
- [rcs.fillLibraries](docs/api/filllibraries.md)

docs/api/optimize.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# rcs.optimize
2+
3+
> Optimizes selectors based on the loaded statistics and given selectors
4+
5+
> **Note:** Before this method takes effect you should either run [`rcs.fillLibraries`](./filllibraries.md) or load your mappings and statistics manually with [`rcs.mapping.load`](./mapping.md#load) and [`rcs.statistics.load`](./statistics.md#load)
6+
7+
## Usage
8+
9+
**rcs.optimize()**
10+
11+
Example with `fillLibraries`:
12+
13+
```js
14+
const rcs = require('rcs-core');
15+
16+
rcs.fillLibraries(`
17+
#my-id {
18+
content: "";
19+
}
20+
21+
.test-selector[class^="sel"] {
22+
content: "";
23+
}
24+
25+
.selector {
26+
content: "";
27+
}
28+
`)
29+
30+
rcs.optimize();
31+
32+
// now replace your selectors
33+
const css = rcs.replace.css(fs.readFileSync('./src/styles.css', 'utf8'));
34+
35+
fs.writeFileSync('./dist/styles.css', css);
36+
```
37+
38+
Example with `mapping.load` and `statistics.load`:
39+
40+
```js
41+
// load mapping (could also come from a saved file)
42+
rcs.mapping.load({
43+
selectors: {
44+
'#test': 'a',
45+
'.ca': 'a',
46+
'.ba': 'b',
47+
'.aa': 'c',
48+
},
49+
});
50+
51+
// load statistics (could also come from a saved file)
52+
rcs.statistics.load({
53+
ids: {
54+
unused: [],
55+
usageCount: {
56+
test: 2,
57+
},
58+
},
59+
classes: {
60+
unused: [],
61+
usageCount: {
62+
ca: 3,
63+
ba: 10,
64+
},
65+
},
66+
keyframes: {
67+
unused: [],
68+
usageCount: {},
69+
},
70+
cssVariables: {
71+
unused: [],
72+
usageCount: {},
73+
},
74+
});
75+
76+
rcs.optimize();
77+
78+
// now replace your selectors
79+
const css = rcs.replace.css(fs.readFileSync('./src/styles.css', 'utf8'));
80+
81+
fs.writeFileSync('./dist/styles.css', css);
82+
```

0 commit comments

Comments
 (0)