Skip to content

Commit 006152c

Browse files
author
Bart Veneman
committed
add comments and embedded content as perf rules
1 parent 9cdd435 commit 006152c

File tree

5 files changed

+76
-19
lines changed

5 files changed

+76
-19
lines changed

package-lock.json

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@
3333
"build": "microbundle --external=none"
3434
},
3535
"dependencies": {
36-
"@projectwallace/css-analyzer": "^5.0.2"
36+
"@projectwallace/css-analyzer": "^5.1.0"
3737
},
3838
"devDependencies": {
3939
"microbundle": "^0.14.2",
4040
"uvu": "^0.5.3"
4141
}
42-
}
42+
}

src/complexity.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Complexity('should deduct points for a lot of Selectors more complex than most c
2424
{
2525
id: 'MoreThanMostCommonSelectorComplexity',
2626
score: 5,
27-
value: 1,
27+
value: 1 / 3,
2828
}
2929
])
3030
assert.is(actual.complexity.score, 95)
@@ -50,7 +50,7 @@ Complexity('should deduct points for a lot of Selectors more complex than most c
5050
{
5151
id: 'MoreThanMostCommonSelectorSpecificity',
5252
score: 2,
53-
value: [0, 0, 1],
53+
value: 200 / 700,
5454
}
5555
])
5656
assert.is(actual.complexity.score, 98)

src/performance.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,29 @@ const guards = [
4949
id: 'CssSize',
5050
score: result.stylesheet.size > 200_000 ? 5 : 0,
5151
value: result.stylesheet.size,
52-
})
52+
}),
53+
54+
// Should not contain (too much) comments
55+
// Deduct 1 point for every 250 bytes
56+
result => {
57+
const { comments } = result.stylesheet
58+
return {
59+
id: 'TooMuchComments',
60+
score: Math.min(10, Math.floor(comments.size / 250)),
61+
value: comments.size,
62+
}
63+
},
64+
65+
// Should not contain too much embedded content
66+
// Deduct 1 point for every 250 bytes
67+
result => {
68+
const { size } = result.stylesheet.embeddedContent
69+
return {
70+
id: 'TooMuchEmbeddedContent',
71+
score: Math.min(20, Math.floor(size.total / 250)),
72+
value: size.total,
73+
}
74+
},
5375
]
5476

5577
export { guards }

src/performance.test.js

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Performance('deducts points for having a single @import', () => {
2121
assert.equal(actual.performance.violations, [
2222
{
2323
id: 'Imports',
24-
value: [`url('some-url')`],
24+
value: 1,
2525
score: 10,
2626
},
2727
])
@@ -37,10 +37,7 @@ Performance('deducts points for having multiple @imports', () => {
3737
assert.equal(actual.performance.violations, [
3838
{
3939
id: 'Imports',
40-
value: [
41-
`url('some-url')`,
42-
`url('another-url')`,
43-
],
40+
value: 2,
4441
score: 20,
4542
},
4643
])
@@ -143,4 +140,42 @@ Performance('deducts points for large stylesheets', () => {
143140
assert.is(actual.performance.score, 95)
144141
})
145142

143+
Performance('deducts points for having comments', () => {
144+
const fixture = new Array(100)
145+
.fill('/* a comment to take up some space */')
146+
.map((comment, index) => `${comment} selector-${index} { opacity: 0.${index} }`)
147+
.join('')
148+
const actual = calculate(fixture)
149+
150+
assert.is(actual.performance.score, 90)
151+
assert.equal(actual.performance.violations, [
152+
{
153+
id: 'TooMuchComments',
154+
score: 10,
155+
value: 3300,
156+
},
157+
])
158+
})
159+
160+
Performance('deducts points for having embedded content', () => {
161+
const fixture = new Array(100)
162+
.fill('')
163+
.map((_, index) => `
164+
selector-${index} {
165+
background: url(data:image/svg+xml,%3Csvg%20id%3D%22Layer_${index}%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195.6%20107.8%22%3E%3Cpath%20fill%3D%22%23B5B5B5%22%20class%3D%22st0%22%20d%3D%22M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%22%2F%3E%3C%2Fsvg%3E);
166+
}
167+
`)
168+
.join('')
169+
const actual = calculate(fixture)
170+
171+
assert.is(actual.performance.score, 80)
172+
assert.equal(actual.performance.violations, [
173+
{
174+
id: 'TooMuchEmbeddedContent',
175+
score: 20,
176+
value: 45990,
177+
},
178+
])
179+
})
180+
146181
Performance.run()

0 commit comments

Comments
 (0)