add comments and embedded content as perf rules

Author: Bart Veneman

package-lock.json

@@ -33,10 +33,10 @@
     "build": "microbundle --external=none"
   },
   "dependencies": {
-    "@projectwallace/css-analyzer": "^5.0.2"
+    "@projectwallace/css-analyzer": "^5.1.0"
   },
   "devDependencies": {
     "microbundle": "^0.14.2",
     "uvu": "^0.5.3"
   }
-}
+}

package.json

@@ -24,7 +24,7 @@ Complexity('should deduct points for a lot of Selectors more complex than most c
     {
       id: 'MoreThanMostCommonSelectorComplexity',
       score: 5,
-      value: 1,
+      value: 1 / 3,
     }
   ])
   assert.is(actual.complexity.score, 95)
@@ -50,7 +50,7 @@ Complexity('should deduct points for a lot of Selectors more complex than most c
     {
       id: 'MoreThanMostCommonSelectorSpecificity',
       score: 2,
-      value: [0, 0, 1],
+      value: 200 / 700,
     }
   ])
   assert.is(actual.complexity.score, 98)

src/complexity.test.js

@@ -49,7 +49,29 @@ const guards = [
     id: 'CssSize',
     score: result.stylesheet.size > 200_000 ? 5 : 0,
     value: result.stylesheet.size,
-  })
+  }),
+
+  // Should not contain (too much) comments
+  // Deduct 1 point for every 250 bytes
+  result => {
+    const { comments } = result.stylesheet
+    return {
+      id: 'TooMuchComments',
+      score: Math.min(10, Math.floor(comments.size / 250)),
+      value: comments.size,
+    }
+  },
+
+  // Should not contain too much embedded content
+  // Deduct 1 point for every 250 bytes
+  result => {
+    const { size } = result.stylesheet.embeddedContent
+    return {
+      id: 'TooMuchEmbeddedContent',
+      score: Math.min(20, Math.floor(size.total / 250)),
+      value: size.total,
+    }
+  },
 ]
 
 export { guards }

src/performance.js

@@ -21,7 +21,7 @@ Performance('deducts points for having a single @import', () => {
   assert.equal(actual.performance.violations, [
     {
       id: 'Imports',
-      value: [`url('some-url')`],
+      value: 1,
       score: 10,
     },
   ])
@@ -37,10 +37,7 @@ Performance('deducts points for having multiple @imports', () => {
   assert.equal(actual.performance.violations, [
     {
       id: 'Imports',
-      value: [
-        `url('some-url')`,
-        `url('another-url')`,
-      ],
+      value: 2,
       score: 20,
     },
   ])
@@ -143,4 +140,42 @@ Performance('deducts points for large stylesheets', () => {
   assert.is(actual.performance.score, 95)
 })
 
+Performance('deducts points for having comments', () => {
+  const fixture = new Array(100)
+    .fill('/* a comment to take up some space */')
+    .map((comment, index) => `${comment} selector-${index} { opacity: 0.${index} }`)
+    .join('')
+  const actual = calculate(fixture)
+
+  assert.is(actual.performance.score, 90)
+  assert.equal(actual.performance.violations, [
+    {
+      id: 'TooMuchComments',
+      score: 10,
+      value: 3300,
+    },
+  ])
+})
+
+Performance('deducts points for having embedded content', () => {
+  const fixture = new Array(100)
+    .fill('')
+    .map((_, index) => `
+      selector-${index} {
+        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);
+      }
+    `)
+    .join('')
+  const actual = calculate(fixture)
+
+  assert.is(actual.performance.score, 80)
+  assert.equal(actual.performance.violations, [
+    {
+      id: 'TooMuchEmbeddedContent',
+      score: 20,
+      value: 45990,
+    },
+  ])
+})
+
 Performance.run()