classnames-minifier 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -0
- package/package.json +3 -2
- package/src/index.js +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,82 @@
|
|
|
1
1
|
# classnames-minifier
|
|
2
2
|
|
|
3
|
+
[](https://badge.fury.io/js/classnames-minifier)
|
|
4
|
+
|
|
5
|
+
Library for configuring style _(css/scss/sass)_ modules to generate compressed classes (`.header` -> `.a`, `.nav` -> `.b`, ..., `.footer` -> `.aad`, etc.) with support for changes and rebuilding without clearing the built application.
|
|
6
|
+
|
|
7
|
+
*The logic of minifying is taken out of the [next-classnames-minifier](https://github.com/vordgi/next-classnames-minifier) library.*
|
|
8
|
+
|
|
9
|
+
## Reasons
|
|
10
|
+
*Compressing classes* can reduce the size of the generated html and css by up to *20%*, which will have a positive effect on page rendering and metrics (primarily [FCP](https://web.dev/first-contentful-paint/))
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
**Using npm:**
|
|
15
|
+
```bash
|
|
16
|
+
npm i classnames-minifier
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**Using yarn:**
|
|
20
|
+
```bash
|
|
21
|
+
yarn add classnames-minifier
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Configuration
|
|
25
|
+
|
|
26
|
+
### Options
|
|
27
|
+
|
|
28
|
+
* `prefix` - custom prefix that will be added to each updated class;
|
|
29
|
+
* `reservedNames` - array of reserved names that should not be used by this package (must include prefix);
|
|
30
|
+
* `cacheDir` - directory where this library will write the cache. Passing this parameter will enable caching. Use this option only if your framework really needs it;
|
|
31
|
+
* `distDir` - directory where the project is being assembled. Used only when caching is enabled to synchronize caches between this library and the project;
|
|
32
|
+
|
|
33
|
+
Configuration example:
|
|
34
|
+
```js
|
|
35
|
+
// webpack.config.js
|
|
36
|
+
const classnamesMinifier = new ClassnamesMinifier({
|
|
37
|
+
prefix: '_',
|
|
38
|
+
reservedNames: ['_en', '_de'],
|
|
39
|
+
});
|
|
40
|
+
// ...
|
|
41
|
+
loaders.push(
|
|
42
|
+
{
|
|
43
|
+
loader: require.resolve('css-loader'),
|
|
44
|
+
options: {
|
|
45
|
+
importLoaders: 3,
|
|
46
|
+
modules: {
|
|
47
|
+
mode: 'local',
|
|
48
|
+
getLocalIdent: classnamesMinifier.getLocalIdent,
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
If the framework you are using utilizes component caching between builds, you can configure caching in classnames-minifier as well. As a result, module classes between builds will use the same compressed classes.
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
// webpack.config.js
|
|
59
|
+
const classnamesMinifier = new ClassnamesMinifier({
|
|
60
|
+
distDir: path.join(process.cwd(), 'build'),
|
|
61
|
+
cacheDir: path.join(process.cwd(), 'build/cache'),
|
|
62
|
+
});
|
|
63
|
+
// ...
|
|
64
|
+
loaders.push(
|
|
65
|
+
classnamesMinifier.postLoader,
|
|
66
|
+
{
|
|
67
|
+
loader: require.resolve('css-loader'),
|
|
68
|
+
options: {
|
|
69
|
+
importLoaders: 3,
|
|
70
|
+
modules: {
|
|
71
|
+
mode: 'local',
|
|
72
|
+
getLocalIdent: classnamesMinifier.getLocalIdent,
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
classnamesMinifier.preLoader,
|
|
77
|
+
);
|
|
78
|
+
```
|
|
79
|
+
|
|
3
80
|
## License
|
|
4
81
|
|
|
5
82
|
[MIT](https://github.com/vordgi/classnames-minifier/blob/main/LICENSE)
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "classnames-minifier",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Library for configuring style modules to generate compressed classes",
|
|
5
|
-
"main": "
|
|
5
|
+
"main": "./dist/ClassnamesMinifier.js",
|
|
6
|
+
"types": "./dist/ClassnamesMinifier.d.ts",
|
|
6
7
|
"files": [
|
|
7
8
|
"dist"
|
|
8
9
|
],
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
console.log('The package will be set up soon');
|