Skip to content

Commit 38697ab

Browse files
Bart Venemanbartveneman
Bart Veneman
authored andcommitted
improve readme with related projects, installation and usage
1 parent 491cac1 commit 38697ab

File tree

2 files changed

+443
-3
lines changed

2 files changed

+443
-3
lines changed

readme.md

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,77 @@
2222

2323
---
2424

25-
This package analyzes your CSS on a high level and comes up with a score, divided in three areas:
25+
This package analyzes your CSS on a high level and comes up with a score, divided into three areas:
2626

2727
- **Maintainability**: how difficult is it for someone looking at the CSS from a high level to find the exact spot to fix a bug?
28-
- **Complexity**: how difficult is it for someone to make a change and them being confident that they can make that change without side-effects?
29-
- **Performance**: How likely is the CSS to have a negative impact on performance, based on high-level metrics? (Not including using hardware accelerated transforms and the like, because other tools are more suite for that.)
28+
- **Complexity**: how difficult is it for someone to make a change and be confident that they can make that change without side effects?
29+
- **Performance**: How likely is the CSS to have a negative impact on performance, based on high-level metrics? (Not including using hardware accelerated transforms and the like, because other tools are more suited for that.)
30+
31+
## Installation
32+
33+
```bash
34+
npm install @projectwallace/css-code-quality
35+
```
36+
37+
## Usage
38+
39+
```js
40+
import { calculate } from "@projectwallace/css-code-quality";
41+
42+
let css = `my_css { /* ... */ }`;
43+
let result = calculate(css);
44+
45+
/*
46+
The result shape looks something like this:
47+
48+
{
49+
"violations": [ ],
50+
"passes": [ ],
51+
"performance": {
52+
"score": 90,
53+
"violations": [ ],
54+
"passes": [ ]
55+
},
56+
"maintainability": {
57+
"score": 100,
58+
"violations": [ ],
59+
"passes": [ ]
60+
},
61+
"complexity": {
62+
"score": 97,
63+
"violations": [ ],
64+
"passes": [ ]
65+
}
66+
}
67+
68+
Each `passes` or `violations` array contains an object that looks like this:
69+
70+
{
71+
"id": "EmptyRules",
72+
"score": 0,
73+
"value": 0
74+
},
75+
{
76+
"id": "AverageSelectorsPerRule",
77+
"score": 0,
78+
"value": 1.5,
79+
"actuals": [
80+
2,
81+
1
82+
]
83+
}
84+
85+
etc. etc.
86+
87+
*/
88+
```
89+
90+
## Related projects
91+
92+
- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) -
93+
A CSS Analyzer that goes through your CSS to find all kinds of relevant statistics.
94+
- [Wallace CLI](https://github.com/projectwallace/wallace-cli) - CLI tool for
95+
@projectwallace/css-analyzer
96+
- [Constyble](https://github.com/projectwallace/constyble) - CSS Complexity linter
97+
- [Color Sorter](https://github.com/projectwallace/color-sorter) - Sort CSS colors
98+
by hue, saturation, lightness and opacity

0 commit comments

Comments
 (0)