@projectwallace/css-code-coverage 0.5.0 → 0.6.0

package/README.md

@@ -23,11 +23,13 @@ npm install @projectwallace/css-code-coverage
 ```ts
 import { calculate_coverage } from '@projectwallace/css-code-coverage'
 
-function parse_html(html) {
-	return new DOMParser().parseFromString(html, 'text/html')
-}
+let report = await calculcate_coverage(coverage_data)
 
-let report = calculcate_coverage(coverage_data, parse_html)
+// => report.line_coverage_ratio: 0.80
+// => report.byte_coverage_ratio: 0.85
+// => report.total_lines: 1000
+// => report.covered_lines: 800
+// etc.
 ```
 
 See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main/src/index.ts) for the data that's returned.
@@ -36,12 +38,30 @@ See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main
 
 There are two principal ways of collecting CSS Coverage data:
 
+### Coverage API (preferred)
+
+Both Puppeteer and Playwright provide an API to programmatically get the coverage data, allowing you to put that directly into this library. Here is the gist:
+
+```ts
+// Start collecting coverage
+await page.coverage.startCSSCoverage()
+// Load the page, do all sorts of interactions to increase coverage, etc.
+await page.goto('http://example.com')
+// Stop the coverage and store the result in a variable to pass along
+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)
+```
+
 ### Browser devtools
 
 In Edge, Chrome or chromium you can manually collect coverage in the browser's DevTools. In all cases you'll generate coverage data manually and the browser will let you export the data to a JSON file. Note that this JSON contains both JS coverage as well as the CSS coverage. Learn how it works:
 
 - Collect coverage in Microsoft Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/coverage/
-- Collect coevrage in Google Chrome: https://developer.chrome.com/docs/devtools/coverage/
+- Collect coverage in Google Chrome: https://developer.chrome.com/docs/devtools/coverage/
 
 Additionally, DevTools Tips writes about it in their [explainer](https://devtoolstips.org/tips/en/detect-unused-code/).
 
@@ -67,46 +87,3 @@ for (let file of files) {
 	coverage_data.push(...parse_coverage(json_content))
 }
 ```
-
-### Coverage API
-
-Both Puppeteer and Playwright provide an API to programmatically get the coverage data, allowing you to put that directly into this library. Here is the gist:
-
-```ts
-// Start collecting coverage
-await page.coverage.startCSSCoverage()
-// Load the page, do all sorts of interactions to increase coverage, etc.
-await page.goto('http://example.com')
-// Stop the coverage and store the result in a variable to pass along
-let coverage = await page.coverage.stopCSSCoverage()
-
-// Now we can process it
-import { calculate_coverage } from '@projectwallace/css-code-coverage'
-
-function parse_html(html) {
-	return new DOMParser().parseFromString(html, 'text/html')
-}
-
-let report = calculcate_coverage(coverage, parse_html)
-```
-
-### Optional: coverage from `<style>` blocks
-
-Coverage generators also create coverage ranges for `<style>` blocks in HTML. If this applies to your code you should provide a HTML parser that we use to 'scrape' the HTML in case the browser gives us not just plain CSS contents. Depending on where you run this analysis you can use:
-
-1.  Browser:
-    ```ts
-    function parse_html(html) {
-    	return new DOMParser().parseFromString(html, 'text/html')
-    }
-    ```
-1.  Node (using [linkedom](https://github.com/WebReflection/linkedom) in this example, but other parsers could work, too):
-
-    ```ts
-    // $ npm install linkedom
-    import { DOMParser } from 'linkedom'
-
-    function parse_html(html: string) {
-    	return new DOMParser().parseFromString(html, 'text/html')
-    }
-    ```

package/dist/cli.js

@@ -2,7 +2,6 @@
 import { parseArgs, styleText } from "node:util";
 import * as v from "valibot";
 import { format } from "@projectwallace/format-css";
-import { tokenTypes, tokenize } from "css-tree/tokenizer";
 import { readFile, readdir, stat } from "node:fs/promises";
 import { join } from "node:path";
 
@@ -90,69 +89,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
@@ -182,7 +243,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)
 	}));
 }
 
@@ -201,9 +262,7 @@ function ext(url) {
 //#endregion
 //#region src/lib/remap-html.ts
 async function get_dom_parser() {
-	if (typeof window !== "undefined" && "DOMParser" in window)
- /* v8 ignore */
-	return new window.DOMParser();
+	if (typeof window !== "undefined" && "DOMParser" in window) return new window.DOMParser();
 	let { DOMParser } = await import("./esm--VCpEgdH.js");
 	return new DOMParser();
 }
@@ -263,12 +322,85 @@ async function filter_coverage(coverage) {
 	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
@@ -282,91 +414,14 @@ function ratio(fraction, total) {
 */
 async function calculate_coverage(coverage) {
 	let total_files_found = coverage.length;
-	let coverage_per_stylesheet = deduplicate_entries(prettify(await filter_coverage(coverage))).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,
@@ -380,9 +435,9 @@ async function calculate_coverage(coverage) {
 		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),
@@ -480,15 +535,10 @@ function print({ report, context }, params) {
 			}
 			console.log(styleText("dim", "─".repeat(terminal_width)));
 			let lines = sheet.text.split("\n");
-			let line_coverage = sheet.line_coverage;
-			for (let i = 0; i < lines.length; i++) {
-				if (line_coverage[i] === 1) continue;
-				for (let j = i - NUM_LEADING_LINES; j < i; j++) if (j >= 0) console.log(styleText("dim", line_number(j)), styleText("dim", indent(lines[j])));
-				while (line_coverage[i] === 0) {
-					console.log(styleText("red", line_number(i, false)), indent(lines[i]));
-					i++;
-				}
-				for (let end = i + NUM_TRAILING_LINES; i < end && i < lines.length; i++) console.log(styleText("dim", line_number(i)), styleText("dim", indent(lines[i])));
+			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();
 			}
 		}

package/dist/index.d.ts

@@ -24,10 +24,28 @@ declare function parse_coverage(input: string): {
   }[];
 }[];
 //#endregion
+//#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;
@@ -38,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;

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)
 	}));
 }
 
@@ -136,9 +197,7 @@ function ext(url) {
 //#endregion
 //#region src/lib/remap-html.ts
 async function get_dom_parser() {
-	if (typeof window !== "undefined" && "DOMParser" in window)
- /* v8 ignore */
-	return new window.DOMParser();
+	if (typeof window !== "undefined" && "DOMParser" in window) return new window.DOMParser();
 	let { DOMParser } = await import("./esm-CWr4VY0v.js");
 	return new DOMParser();
 }
@@ -198,12 +257,85 @@ async function filter_coverage(coverage) {
 	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
@@ -217,91 +349,14 @@ function ratio(fraction, total) {
 */
 async function calculate_coverage(coverage) {
 	let total_files_found = coverage.length;
-	let coverage_per_stylesheet = deduplicate_entries(prettify(await filter_coverage(coverage))).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,
@@ -315,9 +370,9 @@ async function calculate_coverage(coverage) {
 		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.5.0",
-  "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"
   }
 }