@projectwallace/css-code-quality 2.0.0 → 3.0.0

package/dist/{css-code-quality.js → core.js}

@@ -1,5 +1,5 @@
-import { compareSpecificity as i, analyze as l } from "@projectwallace/css-analyzer";
-const m = [
+import { compareSpecificity as i } from "@projectwallace/css-analyzer";
+const l = [
   // Should not contain @import rules
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   (e) => ({
@@ -64,7 +64,7 @@ const m = [
       value: s.total
     };
   }
-], u = [
+], m = [
   // Source Lines of Code should be low
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   (e) => {
@@ -172,7 +172,7 @@ const m = [
     }
     return t;
   }
-], E = [
+], u = [
   // Complexity per Selector should not differ too much from the most common Complexity
   /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
   (e) => {
@@ -275,7 +275,7 @@ function n(e, s) {
   };
 }
 function L(e) {
-  const s = n(e, m), o = n(e, u), t = n(e, E);
+  const s = n(e, l), o = n(e, m), t = n(e, u);
   return {
     violations: s.violations.concat(o.violations).concat(t.violations),
     passes: s.passes.concat(o.passes).concat(t.passes),
@@ -284,10 +284,6 @@ function L(e) {
     complexity: t
   };
 }
-function d(e) {
-  const s = l(e);
-  return L(s);
-}
 export {
-  d as calculate
+  L as calculate
 };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { analyze as c } from "@projectwallace/css-analyzer";
+import { calculate as l } from "./core.js";
+function e(a) {
+  const t = c(a);
+  return l(t);
+}
+export {
+  e as calculate
+};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@projectwallace/css-code-quality",
   "description": "Calculate the Code Quality score of your CSS based on a range of different quality guards",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "repository": {
     "type": "git",
-    "url": "git@github.com:projectwallace/css-code-quality.git"
+    "url": "git+https://github.com:projectwallace/css-code-quality.git"
   },
   "homepage": "https://github.com/projectwallace/css-code-quality",
   "issues": "https://github.com/projectwallace/css-code-quality/issues",
@@ -23,28 +23,25 @@
     "maintainability",
     "score"
   ],
-  "files": [
-    "dist",
-    "src",
-    "!src/**/*.test.js"
-  ],
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "type": "module",
-  "source": "src/index.js",
-  "main": "./dist/css-code-quality.umd.cjs",
-  "module": "./dist/css-code-quality.js",
-  "unpkg": "./dist/css-code-quality.umd.cjs",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/css-code-quality.js",
-      "require": "./dist/css-code-quality.umd.cjs"
+      "import": "./dist/index.js"
     },
     "./core": {
       "types": "./dist/core.d.ts",
-      "import": "./src/core.js"
+      "import": "./dist/core.js"
     }
   },
-  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "uvu",
     "build": "vite build",

package/dist/css-code-quality.umd.cjs

@@ -1 +0,0 @@
-(function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("@projectwallace/css-analyzer")):typeof define=="function"&&define.amd?define(["exports","@projectwallace/css-analyzer"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a.cssCodeQuality={},a.cssAnalyzer))})(this,function(a,r){"use strict";const u=[e=>({id:"Imports",score:e.atrules.import.total*10,value:e.atrules.import.total,actuals:Object.keys(e.atrules.import.unique)}),e=>({id:"EmptyRules",score:e.rules.empty.total,value:e.rules.empty.total}),e=>{const s={id:"SelectorDuplications",score:0,value:1-e.selectors.uniquenessRatio};return e.selectors.uniquenessRatio<.66&&(s.score=Math.floor((1-e.selectors.uniquenessRatio)*10)),s},e=>{const s={id:"DeclarationDuplications",score:0,value:1-e.declarations.uniquenessRatio};return e.declarations.uniquenessRatio<.66&&(s.score=Math.floor((1-e.declarations.uniquenessRatio)*10)),s},e=>({id:"CssSize",score:e.stylesheet.size>2e5?5:0,value:e.stylesheet.size}),e=>{const{comments:s}=e.stylesheet;return{id:"TooMuchComments",score:Math.min(10,Math.floor(s.size/250)),value:s.size}},e=>{const{size:s}=e.stylesheet.embeddedContent;return{id:"TooMuchEmbeddedContent",score:Math.min(20,Math.floor(s.total/250)),value:s.total}}],m=[e=>{const s={id:"SourceLinesOfCode",score:0,value:e.stylesheet.sourceLinesOfCode};if(e.stylesheet.sourceLinesOfCode>1e4){const o=Math.floor((e.stylesheet.sourceLinesOfCode-1e4)/1e3);s.score=Math.min(15,o)}return s},e=>{const o=e.rules.selectors.mean,t={id:"AverageSelectorsPerRule",score:0,value:o,actuals:e.rules.selectors.items};if(o>2){const c=Math.floor((o-2)*5);t.score=Math.min(15,c)}return t},e=>{const o={id:"AverageDeclarationsPerRule",score:0,value:e.rules.declarations.mean,actuals:e.rules.declarations.items};if(e.rules.declarations.mean>5){const t=Math.floor((e.rules.declarations.mean-5)*5);o.score=Math.min(15,t)}return o},e=>{let o=e.rules.selectors.max||0;const t={id:"MaxSelectorsPerRule",score:0,value:o,actuals:e.rules.selectors.items};if(o>10){const c=Math.ceil((o-10)*.5);t.score=Math.min(c,15)}return t},e=>{const o=e.rules.declarations.max||0,t={id:"MaxDeclarationsPerRule",score:0,value:o,actuals:e.rules.declarations.items};if(o>10){const c=Math.ceil((o-10)*.5);t.score=Math.min(15,c)}return t},e=>{const s=e.rules.selectors.mode,o=e.rules.selectors.items.filter(c=>c>s).length,t={id:"MoreThanMostCommonSelectorsPerRule",score:0,value:e.rules.selectors.mode,actuals:e.rules.selectors.items};if(o>e.rules.total*.1){const c=Math.floor(o*.01);t.score=Math.min(15,c)}return t},e=>{const s=e.rules.selectors.mode,o=e.rules.declarations.items.filter(c=>c>s).length,t={id:"MoreThanMostCommonDeclarationsPerRule",score:0,value:e.rules.declarations.mode,actuals:e.rules.declarations.items};if(o>e.rules.total*.1){const c=Math.floor(o*.01);t.score=Math.min(15,c)}return t}],E=[e=>{const s=e.selectors.complexity.mode,o=e.selectors.complexity.items.filter(c=>c>s).length,t={id:"MoreThanMostCommonSelectorComplexity",score:0,value:e.selectors.total===0?0:o/e.selectors.total,actuals:e.selectors.complexity.items};if(o>e.selectors.total*.1){const c=Math.floor(o*.01);t.score=Math.min(10,c)}return t},e=>{const s=e.selectors.specificity.mode,t=e.selectors.specificity.items.filter(n=>r.compareSpecificity(n,s)<0).length,c={id:"MoreThanMostCommonSelectorSpecificity",score:0,value:e.selectors.total===0?0:t/e.selectors.total,actuals:e.selectors.specificity.items};if(t>e.selectors.total*.1){const n=Math.floor(t*.01);c.score=Math.min(10,n)}return c},e=>{const o=e.selectors.complexity.max||0,t={id:"MaxSelectorComplexity",score:0,value:e.selectors.complexity.max,actuals:e.selectors.complexity.items};if(o>5){const c=Math.ceil((o-5)*.5);t.score=Math.min(5,c)}return t},e=>{const o=e.selectors.complexity.mean,t={id:"AverageSelectorComplexity",score:0,value:o,actuals:e.selectors.complexity.items};if(o>2){const c=Math.ceil((o-2)*2);t.score=Math.min(10,c)}return t},e=>{const o=e.selectors.id.ratio,t={id:"IdSelectorRatio",score:0,value:o,actuals:Object.keys(e.selectors.id.unique)};if(o>.01){const c=Math.floor((o-.01)*10);t.score=Math.min(c,5)}return t},e=>{const o=e.declarations.importants.ratio,t={id:"ImportantRatio",score:0,value:o,actuals:e.declarations.importants.total};if(o>.01){const c=Math.floor((o-.01)*10);t.score=Math.min(c,5)}return t}];function l(e,s){let o=100,t=[],c=[];for(const n of s){const i=n(e);i.score>0?(o-=i.score,t.push(i)):c.push(i)}return{score:Math.max(o,0),violations:t,passes:c}}function d(e){const s=l(e,u),o=l(e,m),t=l(e,E);return{violations:s.violations.concat(o.violations).concat(t.violations),passes:s.passes.concat(o.passes).concat(t.passes),performance:s,maintainability:o,complexity:t}}function M(e){const s=r.analyze(e);return d(s)}a.calculate=M,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/src/complexity.js

@@ -1,134 +0,0 @@
-import { compareSpecificity } from '@projectwallace/css-analyzer'
-
-export const guards = [
-
-  // Complexity per Selector should not differ too much from the most common Complexity
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const mode = result.selectors.complexity.mode
-    const selectorsAboveMode = result.selectors.complexity.items
-      .filter(c => c > mode)
-      .length
-
-    const outcome = {
-      id: 'MoreThanMostCommonSelectorComplexity',
-      score: 0,
-      value: result.selectors.total === 0 ? 0 : selectorsAboveMode / result.selectors.total,
-      actuals: result.selectors.complexity.items,
-    }
-
-    if (selectorsAboveMode > result.selectors.total * 0.1) {
-      const score = Math.floor(selectorsAboveMode * 0.01)
-      outcome.score = Math.min(10, score)
-    }
-
-    return outcome
-  },
-
-  // Specificity per Selector should not differ too much from the most common Specificity
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const mode = result.selectors.specificity.mode
-    /** @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 = {
-      id: 'MoreThanMostCommonSelectorSpecificity',
-      score: 0,
-      value: result.selectors.total === 0 ? 0 : selectorsAboveMode / result.selectors.total,
-      actuals: result.selectors.specificity.items,
-    }
-
-    if (selectorsAboveMode > result.selectors.total * 0.1) {
-      const score = Math.floor(selectorsAboveMode * 0.01)
-      outcome.score = Math.min(10, score)
-    }
-
-    return outcome
-  },
-
-  // Maximum Selector Complexity should be low
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const MAX_SELECTOR_COMPLEXITY = 5
-    const actual = result.selectors.complexity.max || 0
-
-    const outcome = {
-      id: 'MaxSelectorComplexity',
-      score: 0,
-      value: result.selectors.complexity.max,
-      actuals: result.selectors.complexity.items,
-    }
-
-    // Deduct 0.5 points per complexity over 5, up to 5 points
-    if (actual > MAX_SELECTOR_COMPLEXITY) {
-      const score = Math.ceil((actual - MAX_SELECTOR_COMPLEXITY) * 0.5)
-      outcome.score = Math.min(5, score)
-    }
-
-    return outcome
-  },
-
-  // Average Selector Complexity should be low
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const ALLOWED_COMPLEXITY = 2
-    const actual = result.selectors.complexity.mean
-
-    const outcome = {
-      id: 'AverageSelectorComplexity',
-      score: 0,
-      value: actual,
-      actuals: result.selectors.complexity.items,
-    }
-
-    // Deduct 2 points per selector over 2
-    if (actual > ALLOWED_COMPLEXITY) {
-      const score = Math.ceil((actual - ALLOWED_COMPLEXITY) * 2)
-      outcome.score = Math.min(10, score)
-    }
-
-    return outcome
-  },
-
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const ALLOWED = 0.01
-    const actual = result.selectors.id.ratio
-    const outcome = {
-      id: 'IdSelectorRatio',
-      score: 0,
-      value: actual,
-      actuals: Object.keys(result.selectors.id.unique)
-    }
-
-    if (actual > ALLOWED) {
-      const score = Math.floor((actual - ALLOWED) * 10)
-      outcome.score = Math.min(score, 5)
-    }
-
-    return outcome
-  },
-
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const ALLOWED = 0.01
-    const actual = result.declarations.importants.ratio
-    const outcome = {
-      id: 'ImportantRatio',
-      score: 0,
-      value: actual,
-      actuals: result.declarations.importants.total,
-    }
-
-    if (actual > ALLOWED) {
-      const score = Math.floor((actual - ALLOWED) * 10)
-      outcome.score = Math.min(score, 5)
-    }
-
-    return outcome
-  },
-]

package/src/core.js

@@ -1,49 +0,0 @@
-import { guards as performanceGuards } from './performance.js'
-import { guards as maintainabilityGuards } from './maintainability.js'
-import { guards as complexityGuards } from './complexity.js'
-
-/**
- * @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result
- * @param {performanceGuards | maintainabilityGuards | complexityGuards} guards
- */
-function calculateScore(result, guards) {
-	let score = 100
-	let violations = []
-	let passes = []
-
-	for (const guard of guards) {
-		const outcome = guard(result)
-
-		if (outcome.score > 0) {
-			score -= outcome.score
-			violations.push(outcome)
-		} else {
-			passes.push(outcome)
-		}
-	}
-
-	return {
-		score: Math.max(score, 0),
-		violations,
-		passes,
-	}
-}
-
-/** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} analysis */
-export function calculate(analysis) {
-	const performance = calculateScore(analysis, performanceGuards)
-	const maintainability = calculateScore(analysis, maintainabilityGuards)
-	const complexity = calculateScore(analysis, complexityGuards)
-
-	return {
-		violations: performance.violations
-			.concat(maintainability.violations)
-			.concat(complexity.violations),
-		passes: performance.passes
-			.concat(maintainability.passes)
-			.concat(complexity.passes),
-		performance,
-		maintainability,
-		complexity,
-	}
-}

package/src/index.js

@@ -1,10 +0,0 @@
-import { analyze } from '@projectwallace/css-analyzer'
-import { calculate as calculateFromAnalysis } from './core.js'
-
-/**
- * @param {string} css
- */
-export function calculate(css) {
-	const analysis = analyze(css)
-	return calculateFromAnalysis(analysis)
-}

package/src/maintainability.js

@@ -1,159 +0,0 @@
-export const guards = [
-
-  // Source Lines of Code should be low
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const outcome = {
-      id: 'SourceLinesOfCode',
-      score: 0,
-      value: result.stylesheet.sourceLinesOfCode,
-    }
-
-    if (result.stylesheet.sourceLinesOfCode > 10000) {
-      // deduct 1 point per 1000 lines of code over 10,000
-      const score = Math.floor((result.stylesheet.sourceLinesOfCode - 10000) / 1000)
-      outcome.score = Math.min(15, score)
-    }
-
-    return outcome
-  },
-
-  // Average count of Selectors per RuleSet should be low
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const ALLOWED_SELECTORS_PER_RULESET = 2
-    const actual = result.rules.selectors.mean
-
-    const outcome = {
-      id: 'AverageSelectorsPerRule',
-      score: 0,
-      value: actual,
-      actuals: result.rules.selectors.items,
-    }
-
-    // Deduct 5 points per selector over 2
-    if (actual > ALLOWED_SELECTORS_PER_RULESET) {
-      const score = Math.floor((actual - ALLOWED_SELECTORS_PER_RULESET) * 5)
-      outcome.score = Math.min(15, score)
-    }
-
-    return outcome
-  },
-
-  // Average count of Declarations per RuleSet should be low
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const ALLOWED_DECLARATIONS_PER_RULESET = 5
-
-    const outcome = {
-      id: 'AverageDeclarationsPerRule',
-      score: 0,
-      value: result.rules.declarations.mean,
-      actuals: result.rules.declarations.items,
-    }
-
-    // Deduct 5 points per declaration over 5
-    if (result.rules.declarations.mean > ALLOWED_DECLARATIONS_PER_RULESET) {
-      const score = Math.floor((result.rules.declarations.mean - ALLOWED_DECLARATIONS_PER_RULESET) * 5)
-      outcome.score = Math.min(15, score)
-    }
-
-    return outcome
-  },
-
-  // Max number of Selectors per Rule should be low
-  /** @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: max,
-      actuals: result.rules.selectors.items,
-    }
-
-    // Deduct 0.5 points per selectors over 10
-    if (max > MAX_SELECTORS_PER_RULESET) {
-      const score = Math.ceil((max - MAX_SELECTORS_PER_RULESET) * 0.5)
-      outcome.score = Math.min(score, 15)
-    }
-
-    return outcome
-  },
-
-  // Max number of Declarations per Rule should be low
-  /** @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: max,
-      actuals: result.rules.declarations.items,
-    }
-
-    // Deduct 0.5 points per declarations over 10
-    if (max > MAX_DECLARATIONS_PER_RULESET) {
-      const score = Math.ceil((max - MAX_DECLARATIONS_PER_RULESET) * 0.5)
-      outcome.score = Math.min(15, score)
-    }
-
-    return outcome
-  },
-
-  // Number of Selectors per RuleSet should not differ too much from the most common amount of
-  // Selectors per RuleSet
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const mode = result.rules.selectors.mode
-    const rulesHavingMoreThanMode = result.rules.selectors.items
-      .filter(item => item > mode)
-      .length
-
-    const outcome = {
-      id: 'MoreThanMostCommonSelectorsPerRule',
-      score: 0,
-      value: result.rules.selectors.mode,
-      actuals: result.rules.selectors.items,
-    }
-
-    // if more than 10% of RuleSets has more Selectors than most common:
-    if (rulesHavingMoreThanMode > result.rules.total * 0.1) {
-      // then deduct 0.01 for ever applicable RuleSet
-      const score = Math.floor(rulesHavingMoreThanMode * 0.01)
-      // with a maximum of 10 points
-      outcome.score = Math.min(15, score)
-    }
-
-    return outcome
-  },
-
-  // Number of Declarations per RuleSet should not differ too much from the most common amount of
-  // Declarations per RuleSet
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const mode = result.rules.selectors.mode
-    const rulesHavingMoreThanMode = result.rules.declarations.items.filter(item => item > mode).length
-
-    const outcome = {
-      id: 'MoreThanMostCommonDeclarationsPerRule',
-      score: 0,
-      value: result.rules.declarations.mode,
-      actuals: result.rules.declarations.items,
-    }
-
-    // if more than 10% of RuleSets has more Declarations than most common:
-    if (rulesHavingMoreThanMode > result.rules.total * 0.1) {
-      // then deduct 0.01 for ever applicable RuleSet
-      const score = Math.floor(rulesHavingMoreThanMode * 0.01)
-      // with a maximum of 10 points
-      outcome.score = Math.min(15, score)
-    }
-
-    return outcome
-  },
-]

package/src/performance.js

@@ -1,83 +0,0 @@
-export const guards = [
-
-  // Should not contain @import rules
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => ({
-    id: 'Imports',
-    score: result.atrules.import.total * 10,
-    value: result.atrules.import.total,
-    actuals: Object.keys(result.atrules.import.unique),
-  }),
-
-  // Should not contain empty rules
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => ({
-    id: 'EmptyRules',
-    score: result.rules.empty.total,
-    value: result.rules.empty.total,
-  }),
-
-  // Too many selectors appear multiple times
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const outcome = {
-      id: 'SelectorDuplications',
-      score: 0,
-      value: 1 - result.selectors.uniquenessRatio,
-    }
-
-    if (result.selectors.uniquenessRatio < 0.66) {
-      outcome.score = Math.floor((1 - result.selectors.uniquenessRatio) * 10)
-    }
-
-    return outcome
-  },
-
-  // Too many declarations appear multiple times
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => {
-    const outcome = {
-      id: 'DeclarationDuplications',
-      score: 0,
-      value: 1 - result.declarations.uniquenessRatio,
-    }
-
-    if (result.declarations.uniquenessRatio < 0.66) {
-      outcome.score = Math.floor((1 - result.declarations.uniquenessRatio) * 10)
-    }
-
-    return outcome
-  },
-
-  // The total amount of CSS should not be too high
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  result => ({
-    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
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  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
-  /** @param {ReturnType<import('@projectwallace/css-analyzer').analyze>} result */
-  (result) => {
-    const { size } = result.stylesheet.embeddedContent
-    return {
-      id: 'TooMuchEmbeddedContent',
-      score: Math.min(20, Math.floor(size.total / 250)),
-      value: size.total,
-    }
-  },
-]