breaking: update css-analyzer to v6, drops actuals for TooMuchEmbeddedContent (#29)

closes #28

Author: bartveneman

package-lock.json

@@ -51,7 +51,7 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@projectwallace/css-analyzer": "^5.14.0"
+    "@projectwallace/css-analyzer": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.4.5",

package.json

@@ -29,8 +29,10 @@ export const guards = [
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   result => {
     const mode = result.selectors.specificity.mode
-    const selectorsAboveMode = result.selectors.specificity.items
-      .filter(c => compareSpecificity(c, mode) < 0)
+    /** @type {import('@projectwallace/css-analyzer').Specificity[]} */
+    // @ts-expect-error css-analyzer type is incorrect
+    const items = result.selectors.specificity.items
+    const selectorsAboveMode = items.filter(c => compareSpecificity(c, mode) < 0)
       .length
 
     const outcome = {
@@ -52,7 +54,7 @@ export const guards = [
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   result => {
     const MAX_SELECTOR_COMPLEXITY = 5
-    const actual = result.selectors.complexity.max
+    const actual = result.selectors.complexity.max || 0
 
     const outcome = {
       id: 'MaxSelectorComplexity',

src/complexity.js

@@ -29,9 +29,7 @@ function calculateScore(result, guards) {
 	}
 }
 
-/**
- * @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} analysis
- */
+/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} analysis */
 export function calculate(analysis) {
 	const performance = calculateScore(analysis, performanceGuards)
 	const maintainability = calculateScore(analysis, maintainabilityGuards)

src/core.js

@@ -73,7 +73,6 @@ Index('smoke test', () => {
 				"id": "TooMuchEmbeddedContent",
 				"score": 0,
 				"value": 0,
-				"actuals": []
 			},
 			{
 				"id": "SourceLinesOfCode",
@@ -235,7 +234,6 @@ Index('smoke test', () => {
 					"id": "TooMuchEmbeddedContent",
 					"score": 0,
 					"value": 0,
-					"actuals": []
 				}
 			]
 		},

src/index.test.js

@@ -65,17 +65,18 @@ export const guards = [
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   result => {
     const MAX_SELECTORS_PER_RULESET = 10
+    let max = result.rules.selectors.max || 0
 
     const outcome = {
       id: 'MaxSelectorsPerRule',
       score: 0,
-      value: result.rules.selectors.max,
+      value: max,
       actuals: result.rules.selectors.items,
     }
 
     // Deduct 0.5 points per selectors over 10
-    if (result.rules.selectors.max > MAX_SELECTORS_PER_RULESET) {
-      const score = Math.ceil((result.rules.selectors.max - MAX_SELECTORS_PER_RULESET) * 0.5)
+    if (max > MAX_SELECTORS_PER_RULESET) {
+      const score = Math.ceil((max - MAX_SELECTORS_PER_RULESET) * 0.5)
       outcome.score = Math.min(score, 15)
     }
 
@@ -86,17 +87,18 @@ export const guards = [
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   result => {
     const MAX_DECLARATIONS_PER_RULESET = 10
+    const max = result.rules.declarations.max || 0
 
     const outcome = {
       id: 'MaxDeclarationsPerRule',
       score: 0,
-      value: result.rules.declarations.max,
+      value: max,
       actuals: result.rules.declarations.items,
     }
 
     // Deduct 0.5 points per declarations over 10
-    if (result.rules.declarations.max > MAX_DECLARATIONS_PER_RULESET) {
-      const score = Math.ceil((result.rules.declarations.max - MAX_DECLARATIONS_PER_RULESET) * 0.5)
+    if (max > MAX_DECLARATIONS_PER_RULESET) {
+      const score = Math.ceil((max - MAX_DECLARATIONS_PER_RULESET) * 0.5)
       outcome.score = Math.min(15, score)
     }
 

src/maintainability.js

@@ -39,11 +39,11 @@ export const guards = [
     const outcome = {
       id: 'DeclarationDuplications',
       score: 0,
-      value: 1 - result.declarations.unique.ratio,
+      value: 1 - result.declarations.uniquenessRatio,
     }
 
-    if (result.declarations.unique.ratio < 0.66) {
-      outcome.score = Math.floor((1 - result.declarations.unique.ratio) * 10)
+    if (result.declarations.uniquenessRatio < 0.66) {
+      outcome.score = Math.floor((1 - result.declarations.uniquenessRatio) * 10)
     }
 
     return outcome
@@ -72,13 +72,12 @@ export const guards = [
   // Should not contain too much embedded content
   // Deduct 1 point for every 250 bytes
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
+  (result) => {
     const { size } = result.stylesheet.embeddedContent
     return {
       id: 'TooMuchEmbeddedContent',
       score: Math.min(20, Math.floor(size.total / 250)),
       value: size.total,
-      actuals: Object.keys(result.stylesheet.embeddedContent.unique),
     }
   },
 ]

src/performance.js

@@ -186,7 +186,6 @@ Performance('deducts points for having embedded content', () => {
       id: 'TooMuchEmbeddedContent',
       score: 20,
       value: 45990,
-      actuals: Array.from({ length: 100 }).fill('').map((_, index) => generateEmbed(index)),
     },
   ])
 })