|
22 | 22 |
|
23 | 23 | ---
|
24 | 24 |
|
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: |
26 | 26 |
|
27 | 27 | - **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