@projectwallace/css-code-coverage 0.6.0 → 0.8.0

package/dist/index.js

@@ -25,19 +25,20 @@ function parse_coverage(input) {
 
 //#endregion
 //#region src/lib/chunkify.ts
+const WHITESPACE_ONLY_REGEX = /^\s+$/;
 function merge(stylesheet) {
 	let new_chunks = [];
 	let previous_chunk;
 	for (let i = 0; i < stylesheet.chunks.length; i++) {
 		let chunk = stylesheet.chunks.at(i);
-		if (/^\s+$/.test(stylesheet.text.slice(chunk.start_offset, chunk.end_offset))) continue;
+		if (WHITESPACE_ONLY_REGEX.test(stylesheet.text.slice(chunk.start_offset, chunk.end_offset))) continue;
 		let latest_chunk = new_chunks.at(-1);
 		if (i > 0 && previous_chunk && latest_chunk) {
 			if (previous_chunk.is_covered === chunk.is_covered) {
 				latest_chunk.end_offset = chunk.end_offset;
 				previous_chunk = chunk;
 				continue;
-			} else if (/^\s+$/.test(stylesheet.text.slice(chunk.start_offset, chunk.end_offset)) || chunk.end_offset === chunk.start_offset) {
+			} else if (WHITESPACE_ONLY_REGEX.test(stylesheet.text.slice(chunk.start_offset, chunk.end_offset)) || chunk.end_offset === chunk.start_offset) {
 				latest_chunk.end_offset = chunk.end_offset;
 				continue;
 			}
@@ -87,10 +88,10 @@ function prettify(stylesheet) {
 	let line = 1;
 	let offset = 0;
 	let pretty_chunks = stylesheet.chunks.map((chunk, index) => {
-		let css = format(stylesheet.text.slice(chunk.start_offset, chunk.end_offset - 1)).trim();
+		let css = format(stylesheet.text.substring(chunk.start_offset, chunk.end_offset - 1)).trim();
 		if (chunk.is_covered) {
-			let is_last = index === stylesheet.chunks.length - 1;
-			if (index === 0) css = css + (is_last ? "" : "\n");
+			let is_last_chunk = index === stylesheet.chunks.length - 1;
+			if (index === 0) css = css + (is_last_chunk ? "" : "\n");
 			else if (index === stylesheet.chunks.length - 1) css = "\n" + css;
 			else css = "\n" + css + "\n";
 		}
@@ -120,65 +121,46 @@ function prettify(stylesheet) {
 
 //#endregion
 //#region src/lib/decuplicate.ts
-function concatenate(ranges) {
-	let result = [];
-	for (let range of ranges) if (result.length > 0 && (result.at(-1).end === range.start - 1 || result.at(-1).end === range.start)) result.at(-1).end = range.end;
-	else result.push(range);
-	return result;
+function merge_ranges(ranges) {
+	if (ranges.length === 0) return [];
+	ranges.sort((a, b) => a.start - b.start);
+	let merged = [ranges[0]];
+	for (let r of ranges.slice(1)) {
+		let last = merged.at(-1);
+		if (last && r.start <= last.end + 1) {
+			if (r.end > last.end) last.end = r.end;
+		} else merged.push({
+			start: r.start,
+			end: r.end
+		});
+	}
+	return merged;
 }
-function dedupe_list(ranges) {
-	let new_ranges = /* @__PURE__ */ new Set();
-	outer: for (let range of ranges) {
-		for (let processed_range of new_ranges) {
-			if (range.start <= processed_range.start && range.end >= processed_range.end) {
-				new_ranges.delete(processed_range);
-				new_ranges.add(range);
-				continue outer;
-			}
-			if (range.start >= processed_range.start && range.end <= processed_range.end) continue outer;
-			if (range.start < processed_range.end && range.start > processed_range.start && range.end > processed_range.end) {
-				new_ranges.delete(processed_range);
-				new_ranges.add({
-					start: processed_range.start,
-					end: range.end
-				});
-				continue outer;
-			}
+function merge_entry_ranges(sheet, entry) {
+	if (!sheet) return {
+		url: entry.url,
+		ranges: [...entry.ranges]
+	};
+	let seen = new Set(sheet.ranges.map((r) => `${r.start}:${r.end}`));
+	for (let range of entry.ranges) {
+		let id = `${range.start}:${range.end}`;
+		if (!seen.has(id)) {
+			seen.add(id);
+			sheet.ranges.push({ ...range });
 		}
-		new_ranges.add(range);
 	}
-	return new_ranges;
+	return sheet;
 }
-/**
-* @description
-* prerequisites
-* - we check each stylesheet content only once (to avoid counting the same content multiple times)
-* - if a duplicate stylesheet enters the room, we add it's ranges to the existing stylesheet's ranges
-* - only bytes of deduplicated stylesheets are counted
-*/
 function deduplicate_entries(entries) {
-	let checked_stylesheets = /* @__PURE__ */ new Map();
-	for (let entry of entries) {
-		let text = entry.text;
-		if (checked_stylesheets.has(text)) {
-			let ranges = checked_stylesheets.get(text).ranges;
-			for (let range of entry.ranges) {
-				let found = false;
-				for (let checked_range of ranges) if (checked_range.start === range.start && checked_range.end === range.end) {
-					found = true;
-					break;
-				}
-				if (!found) ranges.push(range);
-			}
-		} else checked_stylesheets.set(text, {
-			url: entry.url,
-			ranges: entry.ranges
-		});
-	}
-	return Array.from(checked_stylesheets, ([text, { url, ranges }]) => ({
+	let grouped = entries.reduce((acc, entry) => {
+		let key = entry.text;
+		acc[key] = merge_entry_ranges(acc[key], entry);
+		return acc;
+	}, Object.create(null));
+	return Object.entries(grouped).map(([text, { url, ranges }]) => ({
 		text,
 		url,
-		ranges: concatenate(dedupe_list(ranges.sort((a, b) => a.start - b.start))).sort((a, b) => a.start - b.start)
+		ranges: merge_ranges(ranges)
 	}));
 }
 
@@ -194,15 +176,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,31 +240,44 @@ 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) {
-	let result = [];
-	for (let entry of coverage) {
-		let extension = ext(entry.url).toLowerCase();
-		if (extension === "js") continue;
-		if (extension === "css") {
-			result.push(entry);
-			continue;
-		}
-		if (is_html(entry.text)) {
-			let { css, ranges } = await remap_html(entry.text, entry.ranges);
-			result.push({
-				url: entry.url,
-				text: css,
-				ranges
-			});
-			continue;
-		}
-		result.push({
+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(acc, entry) {
+	let extension = ext(entry.url).toLowerCase();
+	if (extension === "js") return acc;
+	if (extension === "css") {
+		acc.push(entry);
+		return acc;
+	}
+	if (is_html(entry.text)) {
+		let { css, ranges } = remap_html(entry.text, entry.ranges);
+		acc.push({
+			url: entry.url,
+			text: css,
+			ranges
+		});
+		return acc;
+	}
+	if (is_css_like(entry.text) && !is_js_like(entry.text)) {
+		acc.push({
 			url: entry.url,
 			text: entry.text,
 			ranges: entry.ranges
 		});
+		return acc;
 	}
-	return result;
+	return acc;
 }
 
 //#endregion
@@ -262,38 +285,37 @@ async function filter_coverage(coverage) {
 const AT_SIGN = 64;
 const LONGEST_ATRULE_NAME = 28;
 function extend_ranges(coverage) {
-	return coverage.map(({ text, ranges, url }) => {
-		return {
-			text,
-			ranges: ranges.map((range, index) => {
-				let prev_range = ranges[index - 1];
-				for (let i = range.start; i >= range.start - LONGEST_ATRULE_NAME; i--) {
-					if (prev_range && prev_range.end > i) break;
-					let char_position = i;
-					if (text.charCodeAt(char_position) === AT_SIGN) {
-						range.start = char_position;
-						let next_offset = range.end;
-						let next_char$1 = text.charAt(next_offset);
-						while (/\s/.test(next_char$1)) {
-							next_offset++;
-							next_char$1 = text.charAt(next_offset);
-						}
-						if (next_char$1 === "{") range.end = range.end + 1;
-						break;
+	let { ranges, url, text } = coverage;
+	return {
+		text,
+		ranges: ranges.map((range, index) => {
+			let prev_range = ranges[index - 1];
+			for (let i = range.start; i >= range.start - LONGEST_ATRULE_NAME; i--) {
+				if (prev_range && prev_range.end > i) break;
+				let char_position = i;
+				if (text.charCodeAt(char_position) === AT_SIGN) {
+					range.start = char_position;
+					let next_offset = range.end;
+					let next_char$1 = text.charAt(next_offset);
+					while (/\s/.test(next_char$1)) {
+						next_offset++;
+						next_char$1 = text.charAt(next_offset);
 					}
+					if (next_char$1 === "{") range.end = range.end + 1;
+					break;
 				}
-				let offset = range.end;
-				let next_char = text.charAt(offset);
-				while (/\s/.test(next_char)) {
-					offset++;
-					next_char = text.charAt(offset);
-				}
-				if (next_char === "}") range.end = offset + 1;
-				return range;
-			}),
-			url
-		};
-	});
+			}
+			let offset = range.end;
+			let next_char = text.charAt(offset);
+			while (/\s/.test(next_char)) {
+				offset++;
+				next_char = text.charAt(offset);
+			}
+			if (next_char === "}") range.end = offset + 1;
+			return range;
+		}),
+		url
+	};
 }
 
 //#endregion
@@ -336,20 +358,9 @@ function calculate_stylesheet_coverage({ text, url, chunks }) {
 		chunks
 	};
 }
-/**
-* @description
-* CSS Code Coverage calculation
-*
-* These are the steps performed to calculate coverage:
-* 1. Filter eligible files / validate input
-* 2. Prettify the CSS dicovered in each Coverage and update their ranges
-* 3. De-duplicate Coverages: merge all ranges for CSS sources occurring multiple times
-* 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 = coverage.reduce((acc, entry) => filter_coverage(acc, entry), []).reduce((entries, entry) => deduplicate_entries(entries.concat(entry)), []).map((coverage$1) => extend_ranges(coverage$1)).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.8.0",
   "description": "Generate useful CSS Code Coverage report from browser-reported coverage",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
@@ -37,17 +37,19 @@
   },
   "types": "dist/index.d.ts",
   "scripts": {
-    "test": "c8 --reporter=text playwright test",
+    "test": "c8 --reporter=text --reporter=lcov playwright test",
     "build": "tsdown",
     "check": "tsc --noEmit",
     "lint": "oxlint --config .oxlintrc.json",
-    "lint-package": "publint"
+    "lint-package": "publint",
+    "knip": "knip"
   },
   "devDependencies": {
+    "@codecov/vite-plugin": "^1.9.1",
     "@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",