@projectwallace/css-code-quality 3.0.2 → 3.1.1
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/dist/core-C_C2rXxI.js +286 -0
- package/dist/core.d.ts +23 -91
- package/dist/core.js +2 -289
- package/dist/index.d.ts +23 -93
- package/dist/index.js +7 -8
- package/dist/types-DuxX7Pm1.d.ts +12 -0
- package/package.json +62 -58
- package/readme.md +3 -3
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
import { compareSpecificity } from "@projectwallace/css-analyzer";
|
|
2
|
+
//#region src/performance.ts
|
|
3
|
+
const guards$2 = [
|
|
4
|
+
(result) => ({
|
|
5
|
+
id: "Imports",
|
|
6
|
+
score: result.atrules.import.total * 10,
|
|
7
|
+
value: result.atrules.import.total,
|
|
8
|
+
actuals: Object.keys(result.atrules.import.unique)
|
|
9
|
+
}),
|
|
10
|
+
(result) => ({
|
|
11
|
+
id: "EmptyRules",
|
|
12
|
+
score: result.rules.empty.total,
|
|
13
|
+
value: result.rules.empty.total
|
|
14
|
+
}),
|
|
15
|
+
(result) => {
|
|
16
|
+
const outcome = {
|
|
17
|
+
id: "SelectorDuplications",
|
|
18
|
+
score: 0,
|
|
19
|
+
value: 1 - result.selectors.uniquenessRatio
|
|
20
|
+
};
|
|
21
|
+
if (result.selectors.uniquenessRatio < .66) outcome.score = Math.floor((1 - result.selectors.uniquenessRatio) * 10);
|
|
22
|
+
return outcome;
|
|
23
|
+
},
|
|
24
|
+
(result) => {
|
|
25
|
+
const outcome = {
|
|
26
|
+
id: "DeclarationDuplications",
|
|
27
|
+
score: 0,
|
|
28
|
+
value: 1 - result.declarations.uniquenessRatio
|
|
29
|
+
};
|
|
30
|
+
if (result.declarations.uniquenessRatio < .66) outcome.score = Math.floor((1 - result.declarations.uniquenessRatio) * 10);
|
|
31
|
+
return outcome;
|
|
32
|
+
},
|
|
33
|
+
(result) => ({
|
|
34
|
+
id: "CssSize",
|
|
35
|
+
score: result.stylesheet.size > 2e5 ? 5 : 0,
|
|
36
|
+
value: result.stylesheet.size
|
|
37
|
+
}),
|
|
38
|
+
(result) => {
|
|
39
|
+
const { comments } = result.stylesheet;
|
|
40
|
+
return {
|
|
41
|
+
id: "TooMuchComments",
|
|
42
|
+
score: Math.min(10, Math.floor(comments.size / 250)),
|
|
43
|
+
value: comments.size
|
|
44
|
+
};
|
|
45
|
+
},
|
|
46
|
+
(result) => {
|
|
47
|
+
const { size } = result.stylesheet.embeddedContent;
|
|
48
|
+
return {
|
|
49
|
+
id: "TooMuchEmbeddedContent",
|
|
50
|
+
score: Math.min(20, Math.floor(size.total / 250)),
|
|
51
|
+
value: size.total
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
];
|
|
55
|
+
//#endregion
|
|
56
|
+
//#region src/maintainability.ts
|
|
57
|
+
const guards$1 = [
|
|
58
|
+
(result) => {
|
|
59
|
+
const outcome = {
|
|
60
|
+
id: "SourceLinesOfCode",
|
|
61
|
+
score: 0,
|
|
62
|
+
value: result.stylesheet.sourceLinesOfCode
|
|
63
|
+
};
|
|
64
|
+
if (result.stylesheet.sourceLinesOfCode > 1e4) {
|
|
65
|
+
const score = Math.floor((result.stylesheet.sourceLinesOfCode - 1e4) / 1e3);
|
|
66
|
+
outcome.score = Math.min(15, score);
|
|
67
|
+
}
|
|
68
|
+
return outcome;
|
|
69
|
+
},
|
|
70
|
+
(result) => {
|
|
71
|
+
const ALLOWED_SELECTORS_PER_RULESET = 2;
|
|
72
|
+
const actual = result.rules.selectors.mean;
|
|
73
|
+
const outcome = {
|
|
74
|
+
id: "AverageSelectorsPerRule",
|
|
75
|
+
score: 0,
|
|
76
|
+
value: actual,
|
|
77
|
+
actuals: result.rules.selectors.items
|
|
78
|
+
};
|
|
79
|
+
if (actual > ALLOWED_SELECTORS_PER_RULESET) {
|
|
80
|
+
const score = Math.floor((actual - ALLOWED_SELECTORS_PER_RULESET) * 5);
|
|
81
|
+
outcome.score = Math.min(15, score);
|
|
82
|
+
}
|
|
83
|
+
return outcome;
|
|
84
|
+
},
|
|
85
|
+
(result) => {
|
|
86
|
+
const ALLOWED_DECLARATIONS_PER_RULESET = 5;
|
|
87
|
+
const outcome = {
|
|
88
|
+
id: "AverageDeclarationsPerRule",
|
|
89
|
+
score: 0,
|
|
90
|
+
value: result.rules.declarations.mean,
|
|
91
|
+
actuals: result.rules.declarations.items
|
|
92
|
+
};
|
|
93
|
+
if (result.rules.declarations.mean > ALLOWED_DECLARATIONS_PER_RULESET) {
|
|
94
|
+
const score = Math.floor((result.rules.declarations.mean - ALLOWED_DECLARATIONS_PER_RULESET) * 5);
|
|
95
|
+
outcome.score = Math.min(15, score);
|
|
96
|
+
}
|
|
97
|
+
return outcome;
|
|
98
|
+
},
|
|
99
|
+
(result) => {
|
|
100
|
+
const MAX_SELECTORS_PER_RULESET = 10;
|
|
101
|
+
const max = result.rules.selectors.max;
|
|
102
|
+
const outcome = {
|
|
103
|
+
id: "MaxSelectorsPerRule",
|
|
104
|
+
score: 0,
|
|
105
|
+
value: max,
|
|
106
|
+
actuals: result.rules.selectors.items
|
|
107
|
+
};
|
|
108
|
+
if (max > MAX_SELECTORS_PER_RULESET) {
|
|
109
|
+
const score = Math.ceil((max - MAX_SELECTORS_PER_RULESET) * .5);
|
|
110
|
+
outcome.score = Math.min(score, 15);
|
|
111
|
+
}
|
|
112
|
+
return outcome;
|
|
113
|
+
},
|
|
114
|
+
(result) => {
|
|
115
|
+
const MAX_DECLARATIONS_PER_RULESET = 10;
|
|
116
|
+
const max = result.rules.declarations.max || 0;
|
|
117
|
+
const outcome = {
|
|
118
|
+
id: "MaxDeclarationsPerRule",
|
|
119
|
+
score: 0,
|
|
120
|
+
value: max,
|
|
121
|
+
actuals: result.rules.declarations.items
|
|
122
|
+
};
|
|
123
|
+
if (max > MAX_DECLARATIONS_PER_RULESET) {
|
|
124
|
+
const score = Math.ceil((max - MAX_DECLARATIONS_PER_RULESET) * .5);
|
|
125
|
+
outcome.score = Math.min(15, score);
|
|
126
|
+
}
|
|
127
|
+
return outcome;
|
|
128
|
+
},
|
|
129
|
+
(result) => {
|
|
130
|
+
const mode = result.rules.selectors.mode;
|
|
131
|
+
const rulesHavingMoreThanMode = result.rules.selectors.items.filter((item) => item > mode).length;
|
|
132
|
+
const outcome = {
|
|
133
|
+
id: "MoreThanMostCommonSelectorsPerRule",
|
|
134
|
+
score: 0,
|
|
135
|
+
value: result.rules.selectors.mode,
|
|
136
|
+
actuals: result.rules.selectors.items
|
|
137
|
+
};
|
|
138
|
+
if (rulesHavingMoreThanMode > result.rules.total * .1) {
|
|
139
|
+
const score = Math.floor(rulesHavingMoreThanMode * .01);
|
|
140
|
+
outcome.score = Math.min(15, score);
|
|
141
|
+
}
|
|
142
|
+
return outcome;
|
|
143
|
+
},
|
|
144
|
+
(result) => {
|
|
145
|
+
const mode = result.rules.selectors.mode;
|
|
146
|
+
const rulesHavingMoreThanMode = result.rules.declarations.items.filter((item) => item > mode).length;
|
|
147
|
+
const outcome = {
|
|
148
|
+
id: "MoreThanMostCommonDeclarationsPerRule",
|
|
149
|
+
score: 0,
|
|
150
|
+
value: result.rules.declarations.mode,
|
|
151
|
+
actuals: result.rules.declarations.items
|
|
152
|
+
};
|
|
153
|
+
if (rulesHavingMoreThanMode > result.rules.total * .1) {
|
|
154
|
+
const score = Math.floor(rulesHavingMoreThanMode * .01);
|
|
155
|
+
outcome.score = Math.min(15, score);
|
|
156
|
+
}
|
|
157
|
+
return outcome;
|
|
158
|
+
}
|
|
159
|
+
];
|
|
160
|
+
//#endregion
|
|
161
|
+
//#region src/complexity.ts
|
|
162
|
+
const guards = [
|
|
163
|
+
(result) => {
|
|
164
|
+
const mode = result.selectors.complexity.mode;
|
|
165
|
+
const selectorsAboveMode = result.selectors.complexity.items.filter((c) => c > mode).length;
|
|
166
|
+
const outcome = {
|
|
167
|
+
id: "MoreThanMostCommonSelectorComplexity",
|
|
168
|
+
score: 0,
|
|
169
|
+
value: result.selectors.total === 0 ? 0 : selectorsAboveMode / result.selectors.total,
|
|
170
|
+
actuals: result.selectors.complexity.items
|
|
171
|
+
};
|
|
172
|
+
if (selectorsAboveMode > result.selectors.total * .1) {
|
|
173
|
+
const score = Math.floor(selectorsAboveMode * .01);
|
|
174
|
+
outcome.score = Math.min(10, score);
|
|
175
|
+
}
|
|
176
|
+
return outcome;
|
|
177
|
+
},
|
|
178
|
+
(result) => {
|
|
179
|
+
const mode = result.selectors.specificity.mode;
|
|
180
|
+
const selectorsAboveMode = result.selectors.specificity.items.filter((c) => compareSpecificity(c, mode) < 0).length;
|
|
181
|
+
const outcome = {
|
|
182
|
+
id: "MoreThanMostCommonSelectorSpecificity",
|
|
183
|
+
score: 0,
|
|
184
|
+
value: result.selectors.total === 0 ? 0 : selectorsAboveMode / result.selectors.total,
|
|
185
|
+
actuals: result.selectors.specificity.items
|
|
186
|
+
};
|
|
187
|
+
if (selectorsAboveMode > result.selectors.total * .1) {
|
|
188
|
+
const score = Math.floor(selectorsAboveMode * .01);
|
|
189
|
+
outcome.score = Math.min(10, score);
|
|
190
|
+
}
|
|
191
|
+
return outcome;
|
|
192
|
+
},
|
|
193
|
+
(result) => {
|
|
194
|
+
const MAX_SELECTOR_COMPLEXITY = 5;
|
|
195
|
+
const actual = result.selectors.complexity.max;
|
|
196
|
+
const outcome = {
|
|
197
|
+
id: "MaxSelectorComplexity",
|
|
198
|
+
score: 0,
|
|
199
|
+
value: result.selectors.complexity.max,
|
|
200
|
+
actuals: result.selectors.complexity.items
|
|
201
|
+
};
|
|
202
|
+
if (actual > MAX_SELECTOR_COMPLEXITY) {
|
|
203
|
+
const score = Math.ceil((actual - MAX_SELECTOR_COMPLEXITY) * .5);
|
|
204
|
+
outcome.score = Math.min(5, score);
|
|
205
|
+
}
|
|
206
|
+
return outcome;
|
|
207
|
+
},
|
|
208
|
+
(result) => {
|
|
209
|
+
const ALLOWED_COMPLEXITY = 2;
|
|
210
|
+
const actual = result.selectors.complexity.mean;
|
|
211
|
+
const outcome = {
|
|
212
|
+
id: "AverageSelectorComplexity",
|
|
213
|
+
score: 0,
|
|
214
|
+
value: actual,
|
|
215
|
+
actuals: result.selectors.complexity.items
|
|
216
|
+
};
|
|
217
|
+
if (actual > ALLOWED_COMPLEXITY) {
|
|
218
|
+
const score = Math.ceil((actual - ALLOWED_COMPLEXITY) * 2);
|
|
219
|
+
outcome.score = Math.min(10, score);
|
|
220
|
+
}
|
|
221
|
+
return outcome;
|
|
222
|
+
},
|
|
223
|
+
(result) => {
|
|
224
|
+
const ALLOWED = .01;
|
|
225
|
+
const actual = result.selectors.id.ratio;
|
|
226
|
+
const outcome = {
|
|
227
|
+
id: "IdSelectorRatio",
|
|
228
|
+
score: 0,
|
|
229
|
+
value: actual,
|
|
230
|
+
actuals: Object.keys(result.selectors.id.unique)
|
|
231
|
+
};
|
|
232
|
+
if (actual > ALLOWED) {
|
|
233
|
+
const score = Math.floor((actual - ALLOWED) * 10);
|
|
234
|
+
outcome.score = Math.min(score, 5);
|
|
235
|
+
}
|
|
236
|
+
return outcome;
|
|
237
|
+
},
|
|
238
|
+
(result) => {
|
|
239
|
+
const ALLOWED = .01;
|
|
240
|
+
const actual = result.declarations.importants.ratio;
|
|
241
|
+
const outcome = {
|
|
242
|
+
id: "ImportantRatio",
|
|
243
|
+
score: 0,
|
|
244
|
+
value: actual,
|
|
245
|
+
actuals: result.declarations.importants.total
|
|
246
|
+
};
|
|
247
|
+
if (actual > ALLOWED) {
|
|
248
|
+
const score = Math.floor((actual - ALLOWED) * 10);
|
|
249
|
+
outcome.score = Math.min(score, 5);
|
|
250
|
+
}
|
|
251
|
+
return outcome;
|
|
252
|
+
}
|
|
253
|
+
];
|
|
254
|
+
//#endregion
|
|
255
|
+
//#region src/core.ts
|
|
256
|
+
function calculateScore(result, guards) {
|
|
257
|
+
let score = 100;
|
|
258
|
+
const violations = [];
|
|
259
|
+
const passes = [];
|
|
260
|
+
for (const guard of guards) {
|
|
261
|
+
const outcome = guard(result);
|
|
262
|
+
if (outcome.score > 0) {
|
|
263
|
+
score -= outcome.score;
|
|
264
|
+
violations.push(outcome);
|
|
265
|
+
} else passes.push(outcome);
|
|
266
|
+
}
|
|
267
|
+
return {
|
|
268
|
+
score: Math.max(score, 0),
|
|
269
|
+
violations,
|
|
270
|
+
passes
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
function calculate(analysis) {
|
|
274
|
+
const performance = calculateScore(analysis, guards$2);
|
|
275
|
+
const maintainability = calculateScore(analysis, guards$1);
|
|
276
|
+
const complexity = calculateScore(analysis, guards);
|
|
277
|
+
return {
|
|
278
|
+
violations: performance.violations.concat(maintainability.violations).concat(complexity.violations),
|
|
279
|
+
passes: performance.passes.concat(maintainability.passes).concat(complexity.passes),
|
|
280
|
+
performance,
|
|
281
|
+
maintainability,
|
|
282
|
+
complexity
|
|
283
|
+
};
|
|
284
|
+
}
|
|
285
|
+
//#endregion
|
|
286
|
+
export { calculate as t };
|
package/dist/core.d.ts
CHANGED
|
@@ -1,92 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
})[];
|
|
23
|
-
performance: {
|
|
24
|
-
score: number;
|
|
25
|
-
violations: ({
|
|
26
|
-
id: string;
|
|
27
|
-
score: number;
|
|
28
|
-
value: number;
|
|
29
|
-
} | {
|
|
30
|
-
id: string;
|
|
31
|
-
score: number;
|
|
32
|
-
value: number | undefined;
|
|
33
|
-
actuals: number[];
|
|
34
|
-
})[];
|
|
35
|
-
passes: ({
|
|
36
|
-
id: string;
|
|
37
|
-
score: number;
|
|
38
|
-
value: number;
|
|
39
|
-
} | {
|
|
40
|
-
id: string;
|
|
41
|
-
score: number;
|
|
42
|
-
value: number | undefined;
|
|
43
|
-
actuals: number[];
|
|
44
|
-
})[];
|
|
45
|
-
};
|
|
46
|
-
maintainability: {
|
|
47
|
-
score: number;
|
|
48
|
-
violations: ({
|
|
49
|
-
id: string;
|
|
50
|
-
score: number;
|
|
51
|
-
value: number;
|
|
52
|
-
} | {
|
|
53
|
-
id: string;
|
|
54
|
-
score: number;
|
|
55
|
-
value: number | undefined;
|
|
56
|
-
actuals: number[];
|
|
57
|
-
})[];
|
|
58
|
-
passes: ({
|
|
59
|
-
id: string;
|
|
60
|
-
score: number;
|
|
61
|
-
value: number;
|
|
62
|
-
} | {
|
|
63
|
-
id: string;
|
|
64
|
-
score: number;
|
|
65
|
-
value: number | undefined;
|
|
66
|
-
actuals: number[];
|
|
67
|
-
})[];
|
|
68
|
-
};
|
|
69
|
-
complexity: {
|
|
70
|
-
score: number;
|
|
71
|
-
violations: ({
|
|
72
|
-
id: string;
|
|
73
|
-
score: number;
|
|
74
|
-
value: number;
|
|
75
|
-
} | {
|
|
76
|
-
id: string;
|
|
77
|
-
score: number;
|
|
78
|
-
value: number | undefined;
|
|
79
|
-
actuals: number[];
|
|
80
|
-
})[];
|
|
81
|
-
passes: ({
|
|
82
|
-
id: string;
|
|
83
|
-
score: number;
|
|
84
|
-
value: number;
|
|
85
|
-
} | {
|
|
86
|
-
id: string;
|
|
87
|
-
score: number;
|
|
88
|
-
value: number | undefined;
|
|
89
|
-
actuals: number[];
|
|
90
|
-
})[];
|
|
91
|
-
};
|
|
1
|
+
import { n as GuardResult, t as Analysis } from "./types-DuxX7Pm1.js";
|
|
2
|
+
|
|
3
|
+
//#region src/core.d.ts
|
|
4
|
+
declare function calculate(analysis: Analysis): {
|
|
5
|
+
violations: GuardResult[];
|
|
6
|
+
passes: GuardResult[];
|
|
7
|
+
performance: {
|
|
8
|
+
score: number;
|
|
9
|
+
violations: GuardResult[];
|
|
10
|
+
passes: GuardResult[];
|
|
11
|
+
};
|
|
12
|
+
maintainability: {
|
|
13
|
+
score: number;
|
|
14
|
+
violations: GuardResult[];
|
|
15
|
+
passes: GuardResult[];
|
|
16
|
+
};
|
|
17
|
+
complexity: {
|
|
18
|
+
score: number;
|
|
19
|
+
violations: GuardResult[];
|
|
20
|
+
passes: GuardResult[];
|
|
21
|
+
};
|
|
92
22
|
};
|
|
23
|
+
//#endregion
|
|
24
|
+
export { calculate };
|
package/dist/core.js
CHANGED
|
@@ -1,289 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
// Should not contain @import rules
|
|
4
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
5
|
-
(e) => ({
|
|
6
|
-
id: "Imports",
|
|
7
|
-
score: e.atrules.import.total * 10,
|
|
8
|
-
value: e.atrules.import.total,
|
|
9
|
-
actuals: Object.keys(e.atrules.import.unique)
|
|
10
|
-
}),
|
|
11
|
-
// Should not contain empty rules
|
|
12
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
13
|
-
(e) => ({
|
|
14
|
-
id: "EmptyRules",
|
|
15
|
-
score: e.rules.empty.total,
|
|
16
|
-
value: e.rules.empty.total
|
|
17
|
-
}),
|
|
18
|
-
// Too many selectors appear multiple times
|
|
19
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
20
|
-
(e) => {
|
|
21
|
-
const s = {
|
|
22
|
-
id: "SelectorDuplications",
|
|
23
|
-
score: 0,
|
|
24
|
-
value: 1 - e.selectors.uniquenessRatio
|
|
25
|
-
};
|
|
26
|
-
return e.selectors.uniquenessRatio < 0.66 && (s.score = Math.floor((1 - e.selectors.uniquenessRatio) * 10)), s;
|
|
27
|
-
},
|
|
28
|
-
// Too many declarations appear multiple times
|
|
29
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
30
|
-
(e) => {
|
|
31
|
-
const s = {
|
|
32
|
-
id: "DeclarationDuplications",
|
|
33
|
-
score: 0,
|
|
34
|
-
value: 1 - e.declarations.uniquenessRatio
|
|
35
|
-
};
|
|
36
|
-
return e.declarations.uniquenessRatio < 0.66 && (s.score = Math.floor((1 - e.declarations.uniquenessRatio) * 10)), s;
|
|
37
|
-
},
|
|
38
|
-
// The total amount of CSS should not be too high
|
|
39
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
40
|
-
(e) => ({
|
|
41
|
-
id: "CssSize",
|
|
42
|
-
score: e.stylesheet.size > 2e5 ? 5 : 0,
|
|
43
|
-
value: e.stylesheet.size
|
|
44
|
-
}),
|
|
45
|
-
// Should not contain (too much) comments
|
|
46
|
-
// Deduct 1 point for every 250 bytes
|
|
47
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
48
|
-
(e) => {
|
|
49
|
-
const { comments: s } = e.stylesheet;
|
|
50
|
-
return {
|
|
51
|
-
id: "TooMuchComments",
|
|
52
|
-
score: Math.min(10, Math.floor(s.size / 250)),
|
|
53
|
-
value: s.size
|
|
54
|
-
};
|
|
55
|
-
},
|
|
56
|
-
// Should not contain too much embedded content
|
|
57
|
-
// Deduct 1 point for every 250 bytes
|
|
58
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
59
|
-
(e) => {
|
|
60
|
-
const { size: s } = e.stylesheet.embeddedContent;
|
|
61
|
-
return {
|
|
62
|
-
id: "TooMuchEmbeddedContent",
|
|
63
|
-
score: Math.min(20, Math.floor(s.total / 250)),
|
|
64
|
-
value: s.total
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
], m = [
|
|
68
|
-
// Source Lines of Code should be low
|
|
69
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
70
|
-
(e) => {
|
|
71
|
-
const s = {
|
|
72
|
-
id: "SourceLinesOfCode",
|
|
73
|
-
score: 0,
|
|
74
|
-
value: e.stylesheet.sourceLinesOfCode
|
|
75
|
-
};
|
|
76
|
-
if (e.stylesheet.sourceLinesOfCode > 1e4) {
|
|
77
|
-
const o = Math.floor((e.stylesheet.sourceLinesOfCode - 1e4) / 1e3);
|
|
78
|
-
s.score = Math.min(15, o);
|
|
79
|
-
}
|
|
80
|
-
return s;
|
|
81
|
-
},
|
|
82
|
-
// Average count of Selectors per RuleSet should be low
|
|
83
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
84
|
-
(e) => {
|
|
85
|
-
const o = e.rules.selectors.mean, t = {
|
|
86
|
-
id: "AverageSelectorsPerRule",
|
|
87
|
-
score: 0,
|
|
88
|
-
value: o,
|
|
89
|
-
actuals: e.rules.selectors.items
|
|
90
|
-
};
|
|
91
|
-
if (o > 2) {
|
|
92
|
-
const c = Math.floor((o - 2) * 5);
|
|
93
|
-
t.score = Math.min(15, c);
|
|
94
|
-
}
|
|
95
|
-
return t;
|
|
96
|
-
},
|
|
97
|
-
// Average count of Declarations per RuleSet should be low
|
|
98
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
99
|
-
(e) => {
|
|
100
|
-
const o = {
|
|
101
|
-
id: "AverageDeclarationsPerRule",
|
|
102
|
-
score: 0,
|
|
103
|
-
value: e.rules.declarations.mean,
|
|
104
|
-
actuals: e.rules.declarations.items
|
|
105
|
-
};
|
|
106
|
-
if (e.rules.declarations.mean > 5) {
|
|
107
|
-
const t = Math.floor((e.rules.declarations.mean - 5) * 5);
|
|
108
|
-
o.score = Math.min(15, t);
|
|
109
|
-
}
|
|
110
|
-
return o;
|
|
111
|
-
},
|
|
112
|
-
// Max number of Selectors per Rule should be low
|
|
113
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
114
|
-
(e) => {
|
|
115
|
-
let o = e.rules.selectors.max || 0;
|
|
116
|
-
const t = {
|
|
117
|
-
id: "MaxSelectorsPerRule",
|
|
118
|
-
score: 0,
|
|
119
|
-
value: o,
|
|
120
|
-
actuals: e.rules.selectors.items
|
|
121
|
-
};
|
|
122
|
-
if (o > 10) {
|
|
123
|
-
const c = Math.ceil((o - 10) * 0.5);
|
|
124
|
-
t.score = Math.min(c, 15);
|
|
125
|
-
}
|
|
126
|
-
return t;
|
|
127
|
-
},
|
|
128
|
-
// Max number of Declarations per Rule should be low
|
|
129
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
130
|
-
(e) => {
|
|
131
|
-
const o = e.rules.declarations.max || 0, t = {
|
|
132
|
-
id: "MaxDeclarationsPerRule",
|
|
133
|
-
score: 0,
|
|
134
|
-
value: o,
|
|
135
|
-
actuals: e.rules.declarations.items
|
|
136
|
-
};
|
|
137
|
-
if (o > 10) {
|
|
138
|
-
const c = Math.ceil((o - 10) * 0.5);
|
|
139
|
-
t.score = Math.min(15, c);
|
|
140
|
-
}
|
|
141
|
-
return t;
|
|
142
|
-
},
|
|
143
|
-
// Number of Selectors per RuleSet should not differ too much from the most common amount of
|
|
144
|
-
// Selectors per RuleSet
|
|
145
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
146
|
-
(e) => {
|
|
147
|
-
const s = e.rules.selectors.mode, o = e.rules.selectors.items.filter((c) => c > s).length, t = {
|
|
148
|
-
id: "MoreThanMostCommonSelectorsPerRule",
|
|
149
|
-
score: 0,
|
|
150
|
-
value: e.rules.selectors.mode,
|
|
151
|
-
actuals: e.rules.selectors.items
|
|
152
|
-
};
|
|
153
|
-
if (o > e.rules.total * 0.1) {
|
|
154
|
-
const c = Math.floor(o * 0.01);
|
|
155
|
-
t.score = Math.min(15, c);
|
|
156
|
-
}
|
|
157
|
-
return t;
|
|
158
|
-
},
|
|
159
|
-
// Number of Declarations per RuleSet should not differ too much from the most common amount of
|
|
160
|
-
// Declarations per RuleSet
|
|
161
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
162
|
-
(e) => {
|
|
163
|
-
const s = e.rules.selectors.mode, o = e.rules.declarations.items.filter((c) => c > s).length, t = {
|
|
164
|
-
id: "MoreThanMostCommonDeclarationsPerRule",
|
|
165
|
-
score: 0,
|
|
166
|
-
value: e.rules.declarations.mode,
|
|
167
|
-
actuals: e.rules.declarations.items
|
|
168
|
-
};
|
|
169
|
-
if (o > e.rules.total * 0.1) {
|
|
170
|
-
const c = Math.floor(o * 0.01);
|
|
171
|
-
t.score = Math.min(15, c);
|
|
172
|
-
}
|
|
173
|
-
return t;
|
|
174
|
-
}
|
|
175
|
-
], u = [
|
|
176
|
-
// Complexity per Selector should not differ too much from the most common Complexity
|
|
177
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
178
|
-
(e) => {
|
|
179
|
-
const s = e.selectors.complexity.mode, o = e.selectors.complexity.items.filter((c) => c > s).length, t = {
|
|
180
|
-
id: "MoreThanMostCommonSelectorComplexity",
|
|
181
|
-
score: 0,
|
|
182
|
-
value: e.selectors.total === 0 ? 0 : o / e.selectors.total,
|
|
183
|
-
actuals: e.selectors.complexity.items
|
|
184
|
-
};
|
|
185
|
-
if (o > e.selectors.total * 0.1) {
|
|
186
|
-
const c = Math.floor(o * 0.01);
|
|
187
|
-
t.score = Math.min(10, c);
|
|
188
|
-
}
|
|
189
|
-
return t;
|
|
190
|
-
},
|
|
191
|
-
// Specificity per Selector should not differ too much from the most common Specificity
|
|
192
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
193
|
-
(e) => {
|
|
194
|
-
const s = e.selectors.specificity.mode, t = e.selectors.specificity.items.filter((a) => i(a, s) < 0).length, c = {
|
|
195
|
-
id: "MoreThanMostCommonSelectorSpecificity",
|
|
196
|
-
score: 0,
|
|
197
|
-
value: e.selectors.total === 0 ? 0 : t / e.selectors.total,
|
|
198
|
-
actuals: e.selectors.specificity.items
|
|
199
|
-
};
|
|
200
|
-
if (t > e.selectors.total * 0.1) {
|
|
201
|
-
const a = Math.floor(t * 0.01);
|
|
202
|
-
c.score = Math.min(10, a);
|
|
203
|
-
}
|
|
204
|
-
return c;
|
|
205
|
-
},
|
|
206
|
-
// Maximum Selector Complexity should be low
|
|
207
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
208
|
-
(e) => {
|
|
209
|
-
const o = e.selectors.complexity.max || 0, t = {
|
|
210
|
-
id: "MaxSelectorComplexity",
|
|
211
|
-
score: 0,
|
|
212
|
-
value: e.selectors.complexity.max,
|
|
213
|
-
actuals: e.selectors.complexity.items
|
|
214
|
-
};
|
|
215
|
-
if (o > 5) {
|
|
216
|
-
const c = Math.ceil((o - 5) * 0.5);
|
|
217
|
-
t.score = Math.min(5, c);
|
|
218
|
-
}
|
|
219
|
-
return t;
|
|
220
|
-
},
|
|
221
|
-
// Average Selector Complexity should be low
|
|
222
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
223
|
-
(e) => {
|
|
224
|
-
const o = e.selectors.complexity.mean, t = {
|
|
225
|
-
id: "AverageSelectorComplexity",
|
|
226
|
-
score: 0,
|
|
227
|
-
value: o,
|
|
228
|
-
actuals: e.selectors.complexity.items
|
|
229
|
-
};
|
|
230
|
-
if (o > 2) {
|
|
231
|
-
const c = Math.ceil((o - 2) * 2);
|
|
232
|
-
t.score = Math.min(10, c);
|
|
233
|
-
}
|
|
234
|
-
return t;
|
|
235
|
-
},
|
|
236
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
237
|
-
(e) => {
|
|
238
|
-
const o = e.selectors.id.ratio, t = {
|
|
239
|
-
id: "IdSelectorRatio",
|
|
240
|
-
score: 0,
|
|
241
|
-
value: o,
|
|
242
|
-
actuals: Object.keys(e.selectors.id.unique)
|
|
243
|
-
};
|
|
244
|
-
if (o > 0.01) {
|
|
245
|
-
const c = Math.floor((o - 0.01) * 10);
|
|
246
|
-
t.score = Math.min(c, 5);
|
|
247
|
-
}
|
|
248
|
-
return t;
|
|
249
|
-
},
|
|
250
|
-
/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
|
|
251
|
-
(e) => {
|
|
252
|
-
const o = e.declarations.importants.ratio, t = {
|
|
253
|
-
id: "ImportantRatio",
|
|
254
|
-
score: 0,
|
|
255
|
-
value: o,
|
|
256
|
-
actuals: e.declarations.importants.total
|
|
257
|
-
};
|
|
258
|
-
if (o > 0.01) {
|
|
259
|
-
const c = Math.floor((o - 0.01) * 10);
|
|
260
|
-
t.score = Math.min(c, 5);
|
|
261
|
-
}
|
|
262
|
-
return t;
|
|
263
|
-
}
|
|
264
|
-
];
|
|
265
|
-
function n(e, s) {
|
|
266
|
-
let o = 100, t = [], c = [];
|
|
267
|
-
for (const a of s) {
|
|
268
|
-
const r = a(e);
|
|
269
|
-
r.score > 0 ? (o -= r.score, t.push(r)) : c.push(r);
|
|
270
|
-
}
|
|
271
|
-
return {
|
|
272
|
-
score: Math.max(o, 0),
|
|
273
|
-
violations: t,
|
|
274
|
-
passes: c
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
function L(e) {
|
|
278
|
-
const s = n(e, l), o = n(e, m), t = n(e, u);
|
|
279
|
-
return {
|
|
280
|
-
violations: s.violations.concat(o.violations).concat(t.violations),
|
|
281
|
-
passes: s.passes.concat(o.passes).concat(t.passes),
|
|
282
|
-
performance: s,
|
|
283
|
-
maintainability: o,
|
|
284
|
-
complexity: t
|
|
285
|
-
};
|
|
286
|
-
}
|
|
287
|
-
export {
|
|
288
|
-
L as calculate
|
|
289
|
-
};
|
|
1
|
+
import { t as calculate } from "./core-C_C2rXxI.js";
|
|
2
|
+
export { calculate };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,94 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
passes:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
value: number | undefined;
|
|
23
|
-
actuals: number[];
|
|
24
|
-
})[];
|
|
25
|
-
performance: {
|
|
26
|
-
score: number;
|
|
27
|
-
violations: ({
|
|
28
|
-
id: string;
|
|
29
|
-
score: number;
|
|
30
|
-
value: number;
|
|
31
|
-
} | {
|
|
32
|
-
id: string;
|
|
33
|
-
score: number;
|
|
34
|
-
value: number | undefined;
|
|
35
|
-
actuals: number[];
|
|
36
|
-
})[];
|
|
37
|
-
passes: ({
|
|
38
|
-
id: string;
|
|
39
|
-
score: number;
|
|
40
|
-
value: number;
|
|
41
|
-
} | {
|
|
42
|
-
id: string;
|
|
43
|
-
score: number;
|
|
44
|
-
value: number | undefined;
|
|
45
|
-
actuals: number[];
|
|
46
|
-
})[];
|
|
47
|
-
};
|
|
48
|
-
maintainability: {
|
|
49
|
-
score: number;
|
|
50
|
-
violations: ({
|
|
51
|
-
id: string;
|
|
52
|
-
score: number;
|
|
53
|
-
value: number;
|
|
54
|
-
} | {
|
|
55
|
-
id: string;
|
|
56
|
-
score: number;
|
|
57
|
-
value: number | undefined;
|
|
58
|
-
actuals: number[];
|
|
59
|
-
})[];
|
|
60
|
-
passes: ({
|
|
61
|
-
id: string;
|
|
62
|
-
score: number;
|
|
63
|
-
value: number;
|
|
64
|
-
} | {
|
|
65
|
-
id: string;
|
|
66
|
-
score: number;
|
|
67
|
-
value: number | undefined;
|
|
68
|
-
actuals: number[];
|
|
69
|
-
})[];
|
|
70
|
-
};
|
|
71
|
-
complexity: {
|
|
72
|
-
score: number;
|
|
73
|
-
violations: ({
|
|
74
|
-
id: string;
|
|
75
|
-
score: number;
|
|
76
|
-
value: number;
|
|
77
|
-
} | {
|
|
78
|
-
id: string;
|
|
79
|
-
score: number;
|
|
80
|
-
value: number | undefined;
|
|
81
|
-
actuals: number[];
|
|
82
|
-
})[];
|
|
83
|
-
passes: ({
|
|
84
|
-
id: string;
|
|
85
|
-
score: number;
|
|
86
|
-
value: number;
|
|
87
|
-
} | {
|
|
88
|
-
id: string;
|
|
89
|
-
score: number;
|
|
90
|
-
value: number | undefined;
|
|
91
|
-
actuals: number[];
|
|
92
|
-
})[];
|
|
93
|
-
};
|
|
1
|
+
import { n as GuardResult } from "./types-DuxX7Pm1.js";
|
|
2
|
+
|
|
3
|
+
//#region src/index.d.ts
|
|
4
|
+
declare function calculate(css: string): {
|
|
5
|
+
violations: GuardResult[];
|
|
6
|
+
passes: GuardResult[];
|
|
7
|
+
performance: {
|
|
8
|
+
score: number;
|
|
9
|
+
violations: GuardResult[];
|
|
10
|
+
passes: GuardResult[];
|
|
11
|
+
};
|
|
12
|
+
maintainability: {
|
|
13
|
+
score: number;
|
|
14
|
+
violations: GuardResult[];
|
|
15
|
+
passes: GuardResult[];
|
|
16
|
+
};
|
|
17
|
+
complexity: {
|
|
18
|
+
score: number;
|
|
19
|
+
violations: GuardResult[];
|
|
20
|
+
passes: GuardResult[];
|
|
21
|
+
};
|
|
94
22
|
};
|
|
23
|
+
//#endregion
|
|
24
|
+
export { calculate };
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { t as calculate$1 } from "./core-C_C2rXxI.js";
|
|
2
|
+
import { analyze } from "@projectwallace/css-analyzer";
|
|
3
|
+
//#region src/index.ts
|
|
4
|
+
function calculate(css) {
|
|
5
|
+
return calculate$1(analyze(css));
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { calculate };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { analyze } from "@projectwallace/css-analyzer";
|
|
2
|
+
|
|
3
|
+
//#region src/types.d.ts
|
|
4
|
+
type Analysis = ReturnType<typeof analyze>;
|
|
5
|
+
type GuardResult = {
|
|
6
|
+
id: string;
|
|
7
|
+
score: number;
|
|
8
|
+
value: number;
|
|
9
|
+
actuals?: unknown;
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { GuardResult as n, Analysis as t };
|
package/package.json
CHANGED
|
@@ -1,59 +1,63 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
2
|
+
"name": "@projectwallace/css-code-quality",
|
|
3
|
+
"version": "3.1.1",
|
|
4
|
+
"description": "Calculate the Code Quality score of your CSS based on a range of different quality guards",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"codequality",
|
|
7
|
+
"codesniffer",
|
|
8
|
+
"complexity",
|
|
9
|
+
"css",
|
|
10
|
+
"maintainability",
|
|
11
|
+
"performance",
|
|
12
|
+
"quality",
|
|
13
|
+
"score"
|
|
14
|
+
],
|
|
15
|
+
"homepage": "https://github.com/projectwallace/css-code-quality",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"author": {
|
|
18
|
+
"name": "Bart Veneman",
|
|
19
|
+
"email": "bart@projectwallace.com"
|
|
20
|
+
},
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "git+https://github.com:projectwallace/css-code-quality.git"
|
|
24
|
+
},
|
|
25
|
+
"files": [
|
|
26
|
+
"dist"
|
|
27
|
+
],
|
|
28
|
+
"type": "module",
|
|
29
|
+
"main": "./dist/index.js",
|
|
30
|
+
"types": "./dist/index.d.ts",
|
|
31
|
+
"exports": {
|
|
32
|
+
".": {
|
|
33
|
+
"types": "./dist/index.d.ts",
|
|
34
|
+
"import": "./dist/index.js"
|
|
35
|
+
},
|
|
36
|
+
"./core": {
|
|
37
|
+
"types": "./dist/core.d.ts",
|
|
38
|
+
"import": "./dist/core.js"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"scripts": {
|
|
42
|
+
"test": "vitest run --coverage",
|
|
43
|
+
"build": "tsdown",
|
|
44
|
+
"check": "tsc --noEmit",
|
|
45
|
+
"lint": "oxlint && oxfmt --check"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@projectwallace/css-analyzer": "^9.3.0"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@vitest/coverage-v8": "^4.0.18",
|
|
52
|
+
"oxfmt": "^0.36.0",
|
|
53
|
+
"oxlint": "^1.51.0",
|
|
54
|
+
"publint": "^0.3.18",
|
|
55
|
+
"tsdown": "^0.21.0",
|
|
56
|
+
"typescript": "^5.9.3",
|
|
57
|
+
"vitest": "^4.0.18"
|
|
58
|
+
},
|
|
59
|
+
"engines": {
|
|
60
|
+
"node": ">=16.0.0"
|
|
61
|
+
},
|
|
62
|
+
"issues": "https://github.com/projectwallace/css-code-quality/issues"
|
|
63
|
+
}
|
package/readme.md
CHANGED
|
@@ -37,10 +37,10 @@ npm install @projectwallace/css-code-quality
|
|
|
37
37
|
## Usage
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
|
-
import { calculate } from
|
|
40
|
+
import { calculate } from '@projectwallace/css-code-quality'
|
|
41
41
|
|
|
42
|
-
let css = `my_css { /* ... */ }
|
|
43
|
-
let result = calculate(css)
|
|
42
|
+
let css = `my_css { /* ... */ }`
|
|
43
|
+
let result = calculate(css)
|
|
44
44
|
|
|
45
45
|
/*
|
|
46
46
|
The result shape looks something like this:
|