@projectwallace/css-code-coverage 0.6.0 → 0.7.0

package/README.md

@@ -53,7 +53,7 @@ let coverage = await page.coverage.stopCSSCoverage()
 // Now we can process it
 import { calculate_coverage } from '@projectwallace/css-code-coverage'
 
-let report = await calculcate_coverage(coverage)
+let report = calculcate_coverage(coverage)
 ```
 
 ### Browser devtools

package/dist/cli.js

@@ -259,15 +259,43 @@ function ext(url) {
 	}
 }
 
+//#endregion
+//#region src/lib/html-parser.ts
+/**
+* @description
+* Very, very naive but effective DOMParser.
+* It can only find <style> elements and their .textContent
+*/
+var DOMParser = class {
+	parseFromString(html, _type) {
+		let styles = [];
+		let lower = html.toLowerCase();
+		let pos = 0;
+		while (true) {
+			let open = lower.indexOf("<style", pos);
+			if (open === -1) break;
+			let start = lower.indexOf(">", open);
+			if (start === -1) break;
+			let close = lower.indexOf("</style>", start);
+			if (close === -1) break;
+			let text = html.slice(start + 1, close);
+			styles.push({ textContent: text });
+			pos = close + 8;
+		}
+		return { querySelectorAll(selector) {
+			return styles;
+		} };
+	}
+};
+
 //#endregion
 //#region src/lib/remap-html.ts
-async function get_dom_parser() {
+function get_dom_parser() {
 	if (typeof window !== "undefined" && "DOMParser" in window) return new window.DOMParser();
-	let { DOMParser } = await import("./esm--VCpEgdH.js");
 	return new DOMParser();
 }
-async function remap_html(html, old_ranges) {
-	let doc = (await get_dom_parser()).parseFromString(html, "text/html");
+function remap_html(html, old_ranges) {
+	let doc = get_dom_parser().parseFromString(html, "text/html");
 	let combined_css = "";
 	let new_ranges = [];
 	let current_offset = 0;
@@ -295,7 +323,20 @@ async function remap_html(html, old_ranges) {
 function is_html(text) {
 	return /<\/?(html|body|head|div|span|script|style)/i.test(text);
 }
-async function filter_coverage(coverage) {
+const SELECTOR_REGEX = /(@[a-z-]+|\[[^\]]+\]|[a-zA-Z_#.-][a-zA-Z0-9_-]*)\s*\{/;
+const DECLARATION_REGEX = /^\s*[a-zA-Z-]+\s*:\s*.+;?\s*$/m;
+function is_css_like(text) {
+	return SELECTOR_REGEX.test(text) || DECLARATION_REGEX.test(text);
+}
+function is_js_like(text) {
+	try {
+		new Function(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function filter_coverage(coverage) {
 	let result = [];
 	for (let entry of coverage) {
 		let extension = ext(entry.url).toLowerCase();
@@ -305,7 +346,7 @@ async function filter_coverage(coverage) {
 			continue;
 		}
 		if (is_html(entry.text)) {
-			let { css, ranges } = await remap_html(entry.text, entry.ranges);
+			let { css, ranges } = remap_html(entry.text, entry.ranges);
 			result.push({
 				url: entry.url,
 				text: css,
@@ -313,7 +354,7 @@ async function filter_coverage(coverage) {
 			});
 			continue;
 		}
-		result.push({
+		if (is_css_like(entry.text) && !is_js_like(entry.text)) result.push({
 			url: entry.url,
 			text: entry.text,
 			ranges: entry.ranges
@@ -412,9 +453,9 @@ function calculate_stylesheet_coverage({ text, url, chunks }) {
 * 4. Calculate used/unused CSS bytes (fastest path, no inspection of the actual CSS needed)
 * 5. Calculate line-coverage, byte-coverage per stylesheet
 */
-async function calculate_coverage(coverage) {
+function calculate_coverage(coverage) {
 	let total_files_found = coverage.length;
-	let coverage_per_stylesheet = extend_ranges(deduplicate_entries(await filter_coverage(coverage))).map((sheet) => chunkify(sheet)).map((sheet) => prettify(sheet)).map((stylesheet) => calculate_stylesheet_coverage(stylesheet));
+	let coverage_per_stylesheet = extend_ranges(deduplicate_entries(filter_coverage(coverage))).map((sheet) => chunkify(sheet)).map((sheet) => prettify(sheet)).map((stylesheet) => calculate_stylesheet_coverage(stylesheet));
 	let { total_lines, total_covered_lines, total_uncovered_lines, total_bytes, total_used_bytes, total_unused_bytes } = coverage_per_stylesheet.reduce((totals, sheet) => {
 		totals.total_lines += sheet.total_lines;
 		totals.total_covered_lines += sheet.covered_lines;
@@ -472,9 +513,9 @@ function validate_min_file_line_coverage(actual, expected) {
 		expected
 	};
 }
-async function program({ min_file_coverage, min_file_line_coverage }, coverage_data) {
+function program({ min_file_coverage, min_file_line_coverage }, coverage_data) {
 	if (coverage_data.length === 0) throw new MissingDataError();
-	let coverage = await calculate_coverage(coverage_data);
+	let coverage = calculate_coverage(coverage_data);
 	let min_line_coverage_result = validate_min_line_coverage(coverage.line_coverage_ratio, min_file_coverage);
 	let min_file_line_coverage_result = validate_min_file_line_coverage(Math.min(...coverage.coverage_per_stylesheet.map((sheet) => sheet.line_coverage_ratio)), min_file_line_coverage);
 	return {
@@ -506,43 +547,54 @@ async function read(coverage_dir) {
 function indent(line) {
 	return (line || "").replace(/^\t+/, (tabs) => " ".repeat(tabs.length * 4));
 }
-function print({ report, context }, params) {
-	if (report.min_line_coverage.ok) console.log(`${styleText(["bold", "green"], "Success")}: total line coverage is ${(report.min_line_coverage.actual * 100).toFixed(2)}%`);
-	else console.error(`${styleText(["bold", "red"], "Failed")}: line coverage is ${(report.min_line_coverage.actual * 100).toFixed(2)}% which is lower than the threshold of ${report.min_line_coverage.expected}`);
+let line_number = (num, covered = true) => `${num.toString().padStart(5, " ")} ${covered ? "│" : "━"} `;
+function percentage(ratio$1, decimals = 2) {
+	return `${(ratio$1 * 100).toFixed(ratio$1 === 1 ? 0 : decimals)}%`;
+}
+function print_lines({ report, context }, params, { styleText: styleText$1, print_width }) {
+	let output = [];
+	if (report.min_line_coverage.ok) output.push(`${styleText$1(["bold", "green"], "Success")}: total line coverage is ${percentage(report.min_line_coverage.actual)}`);
+	else output.push(`${styleText$1(["bold", "red"], "Failed")}: line coverage is ${percentage(report.min_line_coverage.actual)}% which is lower than the threshold of ${report.min_line_coverage.expected}`);
 	if (report.min_file_line_coverage.expected !== void 0) {
 		let { expected, actual, ok: ok$1 } = report.min_file_line_coverage;
-		if (ok$1) console.log(`${styleText(["bold", "green"], "Success")}: all files pass minimum line coverage of ${expected * 100}%`);
+		if (ok$1) output.push(`${styleText$1(["bold", "green"], "Success")}: all files pass minimum line coverage of ${percentage(expected)}`);
 		else {
 			let num_files_failed = context.coverage.coverage_per_stylesheet.filter((sheet) => sheet.line_coverage_ratio < expected).length;
-			console.error(`${styleText(["bold", "red"], "Failed")}: ${num_files_failed} files do not meet the minimum line coverage of ${expected * 100}% (minimum coverage was ${(actual * 100).toFixed(2)}%)`);
-			if (params["show-uncovered"] === "none") console.log(`  Hint: set --show-uncovered=violations to see which files didn't pass`);
+			output.push(`${styleText$1(["bold", "red"], "Failed")}: ${num_files_failed} ${num_files_failed === 1 ? "file does" : "files do"} not meet the minimum line coverage of ${percentage(expected)} (minimum coverage was ${percentage(actual)})`);
+			if (params["show-uncovered"] === "none") output.push(`  Hint: set --show-uncovered=violations to see which files didn't pass`);
 		}
 	}
 	if (params["show-uncovered"] !== "none") {
 		const NUM_LEADING_LINES = 3;
 		const NUM_TRAILING_LINES = NUM_LEADING_LINES;
-		let terminal_width = process.stdout.columns || 80;
-		let line_number = (num, covered = true) => `${num.toString().padStart(5, " ")} ${covered ? "│" : "━"} `;
+		print_width = print_width ?? 80;
 		let min_file_line_coverage = report.min_file_line_coverage.expected;
 		for (let sheet of context.coverage.coverage_per_stylesheet.sort((a, b) => a.line_coverage_ratio - b.line_coverage_ratio)) if (sheet.line_coverage_ratio !== 1 && params["show-uncovered"] === "all" || min_file_line_coverage !== void 0 && min_file_line_coverage !== 0 && sheet.line_coverage_ratio < min_file_line_coverage && params["show-uncovered"] === "violations") {
-			console.log();
-			console.log(styleText("dim", "─".repeat(terminal_width)));
-			console.log(sheet.url);
-			console.log(`Coverage: ${(sheet.line_coverage_ratio * 100).toFixed(2)}%, ${sheet.covered_lines}/${sheet.total_lines} lines covered`);
+			output.push();
+			output.push(styleText$1("dim", "─".repeat(print_width)));
+			output.push(sheet.url);
+			output.push(`Coverage: ${percentage(sheet.line_coverage_ratio)}, ${sheet.covered_lines}/${sheet.total_lines} lines covered`);
 			if (min_file_line_coverage && min_file_line_coverage !== 0 && sheet.line_coverage_ratio < min_file_line_coverage) {
 				let lines_to_cover = min_file_line_coverage * sheet.total_lines - sheet.covered_lines;
-				console.log(`Tip: cover ${Math.ceil(lines_to_cover)} more lines to meet the file threshold of ${min_file_line_coverage * 100}%`);
+				output.push(`Tip: cover ${Math.ceil(lines_to_cover)} more ${lines_to_cover === 1 ? "line" : "lines"} to meet the file threshold of ${percentage(min_file_line_coverage)}`);
 			}
-			console.log(styleText("dim", "─".repeat(terminal_width)));
+			output.push(styleText$1("dim", "─".repeat(print_width)));
 			let lines = sheet.text.split("\n");
 			for (let chunk of sheet.chunks.filter((chunk$1) => !chunk$1.is_covered)) {
-				for (let x = Math.max(chunk.start_line - NUM_LEADING_LINES, 0); x < chunk.start_line; x++) console.log(styleText("dim", line_number(x)), styleText("dim", indent(lines[x - 1])));
-				for (let i = chunk.start_line; i <= chunk.end_line; i++) console.log(styleText("red", line_number(i, false)), indent(lines[i - 1]));
-				for (let y = chunk.end_line; y < Math.min(chunk.end_line + NUM_TRAILING_LINES, lines.length); y++) console.log(styleText("dim", line_number(y)), styleText("dim", indent(lines[y - 1])));
-				console.log();
+				for (let x = Math.max(chunk.start_line - NUM_LEADING_LINES, 1); x < chunk.start_line; x++) output.push([styleText$1("dim", line_number(x)), styleText$1("dim", indent(lines[x - 1]))].join(""));
+				for (let i = chunk.start_line; i <= chunk.end_line; i++) output.push([styleText$1("red", line_number(i, false)), indent(lines[i - 1])].join(""));
+				for (let y = chunk.end_line + 1; y < Math.min(chunk.end_line + NUM_TRAILING_LINES, lines.length); y++) output.push([styleText$1("dim", line_number(y)), styleText$1("dim", indent(lines[y - 1]))].join(""));
+				output.push();
 			}
 		}
 	}
+	return output;
+}
+function print(report, params) {
+	for (let line of print_lines(report, params, {
+		styleText,
+		print_width: process.stdout.columns
+	})) console.log(line);
 }
 
 //#endregion
@@ -606,13 +658,13 @@ function print$1({ report, context }, params) {
 async function cli(cli_args) {
 	let params = validate_arguments(parse_arguments(cli_args));
 	let coverage_data = await read(params["coverage-dir"]);
-	let report = await program({
+	let report = program({
 		min_file_coverage: params["min-line-coverage"],
 		min_file_line_coverage: params["min-file-line-coverage"]
 	}, coverage_data);
 	if (report.report.ok === false) process.exitCode = 1;
-	if (params.reporter === "pretty") print(report, params);
-	else if (params.reporter === "tap") print$1(report, params);
+	if (params.reporter === "tap") return print$1(report, params);
+	return print(report, params);
 }
 try {
 	await cli(process.argv.slice(2));

package/dist/index.d.ts

@@ -74,6 +74,6 @@ type CoverageResult = CoverageData & {
  * 4. Calculate used/unused CSS bytes (fastest path, no inspection of the actual CSS needed)
  * 5. Calculate line-coverage, byte-coverage per stylesheet
  */
-declare function calculate_coverage(coverage: Coverage[]): Promise<CoverageResult>;
+declare function calculate_coverage(coverage: Coverage[]): CoverageResult;
 //#endregion
 export { type Coverage, CoverageData, CoverageResult, type Range, StylesheetCoverage, calculate_coverage, parse_coverage };

package/dist/index.js

@@ -194,15 +194,43 @@ function ext(url) {
 	}
 }
 
+//#endregion
+//#region src/lib/html-parser.ts
+/**
+* @description
+* Very, very naive but effective DOMParser.
+* It can only find <style> elements and their .textContent
+*/
+var DOMParser = class {
+	parseFromString(html, _type) {
+		let styles = [];
+		let lower = html.toLowerCase();
+		let pos = 0;
+		while (true) {
+			let open = lower.indexOf("<style", pos);
+			if (open === -1) break;
+			let start = lower.indexOf(">", open);
+			if (start === -1) break;
+			let close = lower.indexOf("</style>", start);
+			if (close === -1) break;
+			let text = html.slice(start + 1, close);
+			styles.push({ textContent: text });
+			pos = close + 8;
+		}
+		return { querySelectorAll(selector) {
+			return styles;
+		} };
+	}
+};
+
 //#endregion
 //#region src/lib/remap-html.ts
-async function get_dom_parser() {
+function get_dom_parser() {
 	if (typeof window !== "undefined" && "DOMParser" in window) return new window.DOMParser();
-	let { DOMParser } = await import("./esm-CWr4VY0v.js");
 	return new DOMParser();
 }
-async function remap_html(html, old_ranges) {
-	let doc = (await get_dom_parser()).parseFromString(html, "text/html");
+function remap_html(html, old_ranges) {
+	let doc = get_dom_parser().parseFromString(html, "text/html");
 	let combined_css = "";
 	let new_ranges = [];
 	let current_offset = 0;
@@ -230,7 +258,20 @@ async function remap_html(html, old_ranges) {
 function is_html(text) {
 	return /<\/?(html|body|head|div|span|script|style)/i.test(text);
 }
-async function filter_coverage(coverage) {
+const SELECTOR_REGEX = /(@[a-z-]+|\[[^\]]+\]|[a-zA-Z_#.-][a-zA-Z0-9_-]*)\s*\{/;
+const DECLARATION_REGEX = /^\s*[a-zA-Z-]+\s*:\s*.+;?\s*$/m;
+function is_css_like(text) {
+	return SELECTOR_REGEX.test(text) || DECLARATION_REGEX.test(text);
+}
+function is_js_like(text) {
+	try {
+		new Function(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function filter_coverage(coverage) {
 	let result = [];
 	for (let entry of coverage) {
 		let extension = ext(entry.url).toLowerCase();
@@ -240,7 +281,7 @@ async function filter_coverage(coverage) {
 			continue;
 		}
 		if (is_html(entry.text)) {
-			let { css, ranges } = await remap_html(entry.text, entry.ranges);
+			let { css, ranges } = remap_html(entry.text, entry.ranges);
 			result.push({
 				url: entry.url,
 				text: css,
@@ -248,7 +289,7 @@ async function filter_coverage(coverage) {
 			});
 			continue;
 		}
-		result.push({
+		if (is_css_like(entry.text) && !is_js_like(entry.text)) result.push({
 			url: entry.url,
 			text: entry.text,
 			ranges: entry.ranges
@@ -347,9 +388,9 @@ function calculate_stylesheet_coverage({ text, url, chunks }) {
 * 4. Calculate used/unused CSS bytes (fastest path, no inspection of the actual CSS needed)
 * 5. Calculate line-coverage, byte-coverage per stylesheet
 */
-async function calculate_coverage(coverage) {
+function calculate_coverage(coverage) {
 	let total_files_found = coverage.length;
-	let coverage_per_stylesheet = extend_ranges(deduplicate_entries(await filter_coverage(coverage))).map((sheet) => chunkify(sheet)).map((sheet) => prettify(sheet)).map((stylesheet) => calculate_stylesheet_coverage(stylesheet));
+	let coverage_per_stylesheet = extend_ranges(deduplicate_entries(filter_coverage(coverage))).map((sheet) => chunkify(sheet)).map((sheet) => prettify(sheet)).map((stylesheet) => calculate_stylesheet_coverage(stylesheet));
 	let { total_lines, total_covered_lines, total_uncovered_lines, total_bytes, total_used_bytes, total_unused_bytes } = coverage_per_stylesheet.reduce((totals, sheet) => {
 		totals.total_lines += sheet.total_lines;
 		totals.total_covered_lines += sheet.covered_lines;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectwallace/css-code-coverage",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Generate useful CSS Code Coverage report from browser-reported coverage",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
@@ -41,13 +41,14 @@
     "build": "tsdown",
     "check": "tsc --noEmit",
     "lint": "oxlint --config .oxlintrc.json",
-    "lint-package": "publint"
+    "lint-package": "publint",
+    "knip": "knip"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.0",
-    "@types/node": "^24.8.1",
+    "@types/node": "^24.9.2",
     "c8": "^10.1.3",
-    "linkedom": "^0.18.12",
+    "knip": "^5.66.4",
     "oxlint": "^1.22.0",
     "publint": "^0.3.14",
     "tsdown": "^0.15.8",