@projectwallace/css-code-coverage 0.4.1 → 0.6.0

package/dist/index.d.ts

@@ -24,20 +24,28 @@ declare function parse_coverage(input: string): {
   }[];
 }[];
 //#endregion
-//#region src/lib/types.d.ts
-type NodeList = Iterable<{
-  textContent: string;
-}> | NodeListOf<HTMLStyleElement>;
-interface Parser {
-  (html: string): {
-    querySelectorAll: (selector: string) => NodeList;
-  };
-}
+//#region src/lib/chunkify.d.ts
+type Chunk = {
+  start_offset: number;
+  end_offset: number;
+  is_covered: boolean;
+};
+type ChunkedCoverage = Omit<Coverage, 'ranges'> & {
+  chunks: Chunk[];
+};
+//#endregion
+//#region src/lib/prettify.d.ts
+type PrettifiedChunk = ChunkedCoverage['chunks'][number] & {
+  start_line: number;
+  end_line: number;
+  total_lines: number;
+  css: string;
+};
 //#endregion
 //#region src/lib/index.d.ts
 type CoverageData = {
-  unused_bytes: number;
-  used_bytes: number;
+  uncovered_bytes: number;
+  covered_bytes: number;
   total_bytes: number;
   line_coverage_ratio: number;
   byte_coverage_ratio: number;
@@ -48,14 +56,7 @@ type CoverageData = {
 type StylesheetCoverage = CoverageData & {
   url: string;
   text: string;
-  ranges: Range[];
-  line_coverage: Uint8Array;
-  chunks: {
-    is_covered: boolean;
-    start_line: number;
-    end_line: number;
-    total_lines: number;
-  }[];
+  chunks: PrettifiedChunk[];
 };
 type CoverageResult = CoverageData & {
   total_files_found: number;
@@ -73,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[], parse_html?: Parser): CoverageResult;
+declare function calculate_coverage(coverage: Coverage[]): Promise<CoverageResult>;
 //#endregion
-export { type Coverage, CoverageData, CoverageResult, type Parser, type Range, StylesheetCoverage, calculate_coverage, parse_coverage };
+export { type Coverage, CoverageData, CoverageResult, type Range, StylesheetCoverage, calculate_coverage, parse_coverage };

package/dist/index.js

@@ -1,6 +1,5 @@
 import * as v from "valibot";
 import { format } from "@projectwallace/format-css";
-import { tokenTypes, tokenize } from "css-tree/tokenizer";
 
 //#region src/lib/parse-coverage.ts
 let RangeSchema = v.object({
@@ -25,69 +24,131 @@ function parse_coverage(input) {
 }
 
 //#endregion
-//#region src/lib/prettify.ts
-let irrelevant_tokens = new Set([
-	tokenTypes.EOF,
-	tokenTypes.BadString,
-	tokenTypes.BadUrl,
-	tokenTypes.WhiteSpace,
-	tokenTypes.Semicolon,
-	tokenTypes.Comment,
-	tokenTypes.Colon
-]);
-function prettify(coverage) {
-	return coverage.map(({ url, text, ranges }) => {
-		let formatted = format(text);
-		let ext_ranges = ranges.map(({ start, end }) => ({
-			start,
-			end,
-			tokens: []
-		}));
-		function is_in_range(start, end) {
-			let range_index = 0;
-			for (let range of ext_ranges) {
-				if (range.start > end) return -1;
-				if (range.start <= start && range.end >= end) return range_index;
-				range_index++;
+//#region src/lib/chunkify.ts
+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;
+		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) {
+				latest_chunk.end_offset = chunk.end_offset;
+				continue;
 			}
-			return -1;
 		}
-		let index = 0;
-		tokenize(text, (type, start, end) => {
-			if (irrelevant_tokens.has(type)) return;
-			index++;
-			let range_index = is_in_range(start, end);
-			if (range_index !== -1) ext_ranges[range_index].tokens.push(index);
-		});
-		let new_tokens = /* @__PURE__ */ new Map();
-		index = 0;
-		tokenize(formatted, (type, start, end) => {
-			if (irrelevant_tokens.has(type)) return;
-			index++;
-			new_tokens.set(index, {
-				start,
-				end
+		previous_chunk = chunk;
+		new_chunks.push(chunk);
+	}
+	return {
+		...stylesheet,
+		chunks: new_chunks
+	};
+}
+function chunkify(stylesheet) {
+	let chunks = [];
+	let offset = 0;
+	for (let range of stylesheet.ranges) {
+		if (offset !== range.start) {
+			chunks.push({
+				start_offset: offset,
+				end_offset: range.start,
+				is_covered: false
 			});
+			offset = range.start;
+		}
+		chunks.push({
+			start_offset: range.start,
+			end_offset: range.end,
+			is_covered: true
 		});
-		let new_ranges = [];
-		for (let range of ext_ranges) {
-			let start_token = new_tokens.get(range.tokens.at(0));
-			let end_token = new_tokens.get(range.tokens.at(-1));
-			if (start_token !== void 0 && end_token !== void 0) new_ranges.push({
-				start: start_token.start,
-				end: end_token.end
-			});
+		offset = range.end;
+	}
+	if (offset !== stylesheet.text.length - 1) chunks.push({
+		start_offset: offset,
+		end_offset: stylesheet.text.length,
+		is_covered: false
+	});
+	return merge({
+		url: stylesheet.url,
+		text: stylesheet.text,
+		chunks
+	});
+}
+
+//#endregion
+//#region src/lib/prettify.ts
+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();
+		if (chunk.is_covered) {
+			let is_last = index === stylesheet.chunks.length - 1;
+			if (index === 0) css = css + (is_last ? "" : "\n");
+			else if (index === stylesheet.chunks.length - 1) css = "\n" + css;
+			else css = "\n" + css + "\n";
 		}
+		let line_count = css.split("\n").length;
+		let start_offset = offset;
+		let end_offset = offset + css.length - 1;
+		let start_line = line;
+		let end_line = line + line_count;
+		line = end_line;
+		offset = end_offset;
 		return {
-			url,
-			text: formatted,
-			ranges: new_ranges
+			...chunk,
+			start_offset,
+			start_line,
+			end_line: end_line - 1,
+			end_offset,
+			css,
+			total_lines: end_line - start_line
 		};
 	});
+	return {
+		...stylesheet,
+		chunks: pretty_chunks,
+		text: pretty_chunks.map(({ css }) => css).join("\n")
+	};
 }
 
 //#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 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;
+			}
+		}
+		new_ranges.add(range);
+	}
+	return new_ranges;
+}
 /**
 * @description
 * prerequisites
@@ -117,7 +178,7 @@ function deduplicate_entries(entries) {
 	return Array.from(checked_stylesheets, ([text, { url, ranges }]) => ({
 		text,
 		url,
-		ranges
+		ranges: concatenate(dedupe_list(ranges.sort((a, b) => a.start - b.start))).sort((a, b) => a.start - b.start)
 	}));
 }
 
@@ -135,8 +196,13 @@ function ext(url) {
 
 //#endregion
 //#region src/lib/remap-html.ts
-function remap_html(parse_html, html, old_ranges) {
-	let doc = parse_html(html);
+async 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");
 	let combined_css = "";
 	let new_ranges = [];
 	let current_offset = 0;
@@ -164,7 +230,7 @@ function remap_html(parse_html, html, old_ranges) {
 function is_html(text) {
 	return /<\/?(html|body|head|div|span|script|style)/i.test(text);
 }
-function filter_coverage(coverage, parse_html) {
+async function filter_coverage(coverage) {
 	let result = [];
 	for (let entry of coverage) {
 		let extension = ext(entry.url).toLowerCase();
@@ -174,8 +240,7 @@ function filter_coverage(coverage, parse_html) {
 			continue;
 		}
 		if (is_html(entry.text)) {
-			if (!parse_html) continue;
-			let { css, ranges } = remap_html(parse_html, entry.text, entry.ranges);
+			let { css, ranges } = await remap_html(entry.text, entry.ranges);
 			result.push({
 				url: entry.url,
 				text: css,
@@ -192,12 +257,85 @@ function filter_coverage(coverage, parse_html) {
 	return result;
 }
 
+//#endregion
+//#region src/lib/extend-ranges.ts
+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 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
 //#region src/lib/index.ts
 function ratio(fraction, total) {
 	if (total === 0) return 0;
 	return fraction / total;
 }
+function calculate_stylesheet_coverage({ text, url, chunks }) {
+	let uncovered_bytes = 0;
+	let covered_bytes = 0;
+	let total_bytes = 0;
+	let total_lines = 0;
+	let covered_lines = 0;
+	let uncovered_lines = 0;
+	for (let chunk of chunks) {
+		let lines = chunk.total_lines;
+		let bytes = chunk.end_offset - chunk.start_offset;
+		total_lines += lines;
+		total_bytes += bytes;
+		if (chunk.is_covered) {
+			covered_lines += lines;
+			covered_bytes += bytes;
+		} else {
+			uncovered_lines += lines;
+			uncovered_bytes += bytes;
+		}
+	}
+	return {
+		url,
+		text,
+		uncovered_bytes,
+		covered_bytes,
+		total_bytes,
+		line_coverage_ratio: ratio(covered_lines, total_lines),
+		byte_coverage_ratio: ratio(covered_bytes, total_bytes),
+		total_lines,
+		covered_lines,
+		uncovered_lines,
+		chunks
+	};
+}
 /**
 * @description
 * CSS Code Coverage calculation
@@ -209,94 +347,16 @@ function ratio(fraction, total) {
 * 4. Calculate used/unused CSS bytes (fastest path, no inspection of the actual CSS needed)
 * 5. Calculate line-coverage, byte-coverage per stylesheet
 */
-function calculate_coverage(coverage, parse_html) {
+async function calculate_coverage(coverage) {
 	let total_files_found = coverage.length;
-	if (!is_valid_coverage(coverage)) throw new TypeError("No valid coverage data found");
-	let coverage_per_stylesheet = deduplicate_entries(prettify(filter_coverage(coverage, parse_html))).map(({ text, url, ranges }) => {
-		function is_line_covered(line, start_offset) {
-			let end = start_offset + line.length;
-			let next_offset = end + 1;
-			let is_empty = /^\s*$/.test(line);
-			let is_closing_brace = line.endsWith("}");
-			if (!is_empty && !is_closing_brace) for (let range of ranges) {
-				if (range.start > end || range.end < start_offset) continue;
-				if (range.start <= start_offset && range.end >= end) return true;
-				else if (line.startsWith("@") && range.start > start_offset && range.start < next_offset) return true;
-			}
-			return false;
-		}
-		let lines = text.split("\n");
-		let total_file_lines = lines.length;
-		let line_coverage = new Uint8Array(total_file_lines);
-		let file_lines_covered = 0;
-		let file_total_bytes = text.length;
-		let file_bytes_covered = 0;
-		let offset = 0;
-		for (let index = 0; index < lines.length; index++) {
-			let line = lines[index];
-			let start = offset;
-			let next_offset = offset + line.length + 1;
-			let is_empty = /^\s*$/.test(line);
-			let is_closing_brace = line.endsWith("}");
-			let is_in_range = is_line_covered(line, start);
-			let is_covered = false;
-			let prev_is_covered = index > 0 && line_coverage[index - 1] === 1;
-			if (is_in_range && !is_closing_brace && !is_empty) is_covered = true;
-			else if ((is_empty || is_closing_brace) && prev_is_covered) is_covered = true;
-			else if (is_empty && !prev_is_covered && is_line_covered(lines[index + 1], next_offset)) is_covered = true;
-			line_coverage[index] = is_covered ? 1 : 0;
-			if (is_covered) {
-				file_lines_covered++;
-				file_bytes_covered += line.length + 1;
-			}
-			offset = next_offset;
-		}
-		let chunks = [{
-			start_line: 1,
-			is_covered: line_coverage[0] === 1,
-			end_line: 1,
-			total_lines: 1
-		}];
-		for (let index = 1; index < line_coverage.length; index++) {
-			let is_covered = line_coverage.at(index);
-			if (is_covered !== line_coverage.at(index - 1)) {
-				let last_chunk$1 = chunks.at(-1);
-				last_chunk$1.end_line = index;
-				last_chunk$1.total_lines = index - last_chunk$1.start_line + 1;
-				chunks.push({
-					start_line: index + 1,
-					is_covered: is_covered === 1,
-					end_line: index,
-					total_lines: 0
-				});
-			}
-		}
-		let last_chunk = chunks.at(-1);
-		last_chunk.total_lines = line_coverage.length + 1 - last_chunk.start_line;
-		last_chunk.end_line = line_coverage.length;
-		return {
-			url,
-			text,
-			ranges,
-			unused_bytes: file_total_bytes - file_bytes_covered,
-			used_bytes: file_bytes_covered,
-			total_bytes: file_total_bytes,
-			line_coverage_ratio: ratio(file_lines_covered, total_file_lines),
-			byte_coverage_ratio: ratio(file_bytes_covered, file_total_bytes),
-			line_coverage,
-			total_lines: total_file_lines,
-			covered_lines: file_lines_covered,
-			uncovered_lines: total_file_lines - file_lines_covered,
-			chunks
-		};
-	});
+	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 { 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;
 		totals.total_uncovered_lines += sheet.uncovered_lines;
 		totals.total_bytes += sheet.total_bytes;
-		totals.total_used_bytes += sheet.used_bytes;
-		totals.total_unused_bytes += sheet.unused_bytes;
+		totals.total_used_bytes += sheet.covered_bytes;
+		totals.total_unused_bytes += sheet.uncovered_bytes;
 		return totals;
 	}, {
 		total_lines: 0,
@@ -310,9 +370,9 @@ function calculate_coverage(coverage, parse_html) {
 		total_files_found,
 		total_bytes,
 		total_lines,
-		used_bytes: total_used_bytes,
+		covered_bytes: total_used_bytes,
 		covered_lines: total_covered_lines,
-		unused_bytes: total_unused_bytes,
+		uncovered_bytes: total_unused_bytes,
 		uncovered_lines: total_uncovered_lines,
 		byte_coverage_ratio: ratio(total_used_bytes, total_bytes),
 		line_coverage_ratio: ratio(total_covered_lines, total_lines),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@projectwallace/css-code-coverage",
-  "version": "0.4.1",
-  "description": "",
+  "version": "0.6.0",
+  "description": "Generate useful CSS Code Coverage report from browser-reported coverage",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
     "type": "git",
@@ -55,7 +55,6 @@
   },
   "dependencies": {
     "@projectwallace/format-css": "^2.1.1",
-    "css-tree": "^3.1.0",
     "valibot": "^1.1.0"
   }
 }