@projectwallace/css-code-coverage 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,2 +1,78 @@
-export * from './src/index'
-export {}
+import * as v from "valibot";
+
+//#region src/lib/parse-coverage.d.ts
+declare let RangeSchema: v.ObjectSchema<{
+  readonly start: v.NumberSchema<undefined>;
+  readonly end: v.NumberSchema<undefined>;
+}, undefined>;
+type Range = v.InferInput<typeof RangeSchema>;
+declare let CoverageSchema: v.ObjectSchema<{
+  readonly text: v.StringSchema<undefined>;
+  readonly url: v.StringSchema<undefined>;
+  readonly ranges: v.ArraySchema<v.ObjectSchema<{
+    readonly start: v.NumberSchema<undefined>;
+    readonly end: v.NumberSchema<undefined>;
+  }, undefined>, undefined>;
+}, undefined>;
+type Coverage = v.InferInput<typeof CoverageSchema>;
+declare function parse_coverage(input: string): {
+  text: string;
+  url: string;
+  ranges: {
+    start: number;
+    end: number;
+  }[];
+}[];
+//#endregion
+//#region src/lib/types.d.ts
+type NodeList = Iterable<{
+  textContent: string;
+}> | NodeListOf<HTMLStyleElement>;
+interface Parser {
+  (html: string): {
+    querySelectorAll: (selector: string) => NodeList;
+  };
+}
+//#endregion
+//#region src/lib/index.d.ts
+type CoverageData = {
+  unused_bytes: number;
+  used_bytes: number;
+  total_bytes: number;
+  line_coverage_ratio: number;
+  byte_coverage_ratio: number;
+  total_lines: number;
+  covered_lines: number;
+  uncovered_lines: number;
+};
+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;
+  }[];
+};
+type CoverageResult = CoverageData & {
+  total_files_found: number;
+  total_stylesheets: number;
+  coverage_per_stylesheet: StylesheetCoverage[];
+};
+/**
+ * @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
+ */
+declare function calculate_coverage(coverage: Coverage[], parse_html?: Parser): CoverageResult;
+//#endregion
+export { type Coverage, CoverageData, CoverageResult, type Parser, type Range, StylesheetCoverage, calculate_coverage, parse_coverage };

package/dist/index.js

@@ -0,0 +1,325 @@
+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({
+	start: v.number(),
+	end: v.number()
+});
+let CoverageSchema = v.object({
+	text: v.string(),
+	url: v.string(),
+	ranges: v.array(RangeSchema)
+});
+function is_valid_coverage(input) {
+	return v.safeParse(v.array(CoverageSchema), input).success;
+}
+function parse_coverage(input) {
+	try {
+		let parse_result = JSON.parse(input);
+		return is_valid_coverage(parse_result) ? parse_result : [];
+	} catch {
+		return [];
+	}
+}
+
+//#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++;
+			}
+			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
+			});
+		});
+		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
+			});
+		}
+		return {
+			url,
+			text: formatted,
+			ranges: new_ranges
+		};
+	});
+}
+
+//#endregion
+//#region src/lib/decuplicate.ts
+/**
+* @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 }]) => ({
+		text,
+		url,
+		ranges
+	}));
+}
+
+//#endregion
+//#region src/lib/ext.ts
+function ext(url) {
+	try {
+		let parsed_url = new URL(url);
+		return parsed_url.pathname.slice(parsed_url.pathname.lastIndexOf(".") + 1);
+	} catch {
+		let ext_index = url.lastIndexOf(".");
+		return url.slice(ext_index, url.indexOf("/", ext_index) + 1);
+	}
+}
+
+//#endregion
+//#region src/lib/remap-html.ts
+function remap_html(parse_html, html, old_ranges) {
+	let doc = parse_html(html);
+	let combined_css = "";
+	let new_ranges = [];
+	let current_offset = 0;
+	let style_elements = doc.querySelectorAll("style");
+	for (let style_element of Array.from(style_elements)) {
+		let style_content = style_element.textContent;
+		if (!style_content.trim()) continue;
+		combined_css += style_content;
+		let start_index = html.indexOf(style_content);
+		let end_index = start_index + style_content.length;
+		for (let range of old_ranges) if (range.start >= start_index && range.end <= end_index) new_ranges.push({
+			start: current_offset + (range.start - start_index),
+			end: current_offset + (range.end - start_index)
+		});
+		current_offset += style_content.length;
+	}
+	return {
+		css: combined_css,
+		ranges: new_ranges
+	};
+}
+
+//#endregion
+//#region src/lib/filter-entries.ts
+function is_html(text) {
+	return /<\/?(html|body|head|div|span|script|style)/i.test(text);
+}
+function filter_coverage(coverage, parse_html) {
+	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)) {
+			if (!parse_html) continue;
+			let { css, ranges } = remap_html(parse_html, entry.text, entry.ranges);
+			result.push({
+				url: entry.url,
+				text: css,
+				ranges
+			});
+			continue;
+		}
+		result.push({
+			url: entry.url,
+			text: entry.text,
+			ranges: entry.ranges
+		});
+	}
+	return result;
+}
+
+//#endregion
+//#region src/lib/index.ts
+function ratio(fraction, total) {
+	if (total === 0) return 0;
+	return fraction / total;
+}
+/**
+* @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
+*/
+function calculate_coverage(coverage, parse_html) {
+	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 { 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;
+		return totals;
+	}, {
+		total_lines: 0,
+		total_covered_lines: 0,
+		total_uncovered_lines: 0,
+		total_bytes: 0,
+		total_used_bytes: 0,
+		total_unused_bytes: 0
+	});
+	return {
+		total_files_found,
+		total_bytes,
+		total_lines,
+		used_bytes: total_used_bytes,
+		covered_lines: total_covered_lines,
+		unused_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),
+		coverage_per_stylesheet,
+		total_stylesheets: coverage_per_stylesheet.length
+	};
+}
+
+//#endregion
+export { calculate_coverage, parse_coverage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectwallace/css-code-coverage",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
@@ -21,37 +21,41 @@
   ],
   "license": "EUPL-1.2",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.18.0"
   },
   "type": "module",
   "files": [
     "dist"
   ],
-  "main": "dist/css-code-coverage.js",
+  "bin": {
+    "css-coverage": "dist/cli.js"
+  },
+  "main": "dist/index.js",
   "exports": {
     "types": "./dist/index.d.ts",
-    "default": "./dist/css-code-coverage.js"
+    "default": "./dist/index.js"
   },
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "c8 --reporter=text playwright test",
-    "build": "vite build",
+    "build": "tsdown",
     "check": "tsc --noEmit",
     "lint": "oxlint --config .oxlintrc.json",
     "lint-package": "publint"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.0",
+    "@types/node": "^24.8.1",
     "c8": "^10.1.3",
     "linkedom": "^0.18.12",
     "oxlint": "^1.22.0",
     "publint": "^0.3.14",
-    "typescript": "^5.9.3",
-    "vite": "^7.1.9",
-    "vite-plugin-dts": "^4.5.4"
+    "tsdown": "^0.15.8",
+    "typescript": "^5.9.3"
   },
   "dependencies": {
     "@projectwallace/format-css": "^2.1.1",
+    "css-tree": "^3.1.0",
     "valibot": "^1.1.0"
   }
 }

package/dist/css-code-coverage.js

@@ -1,224 +0,0 @@
-import * as g from "valibot";
-import { format as x } from "@projectwallace/format-css";
-let m = g.array(
-  g.object({
-    text: g.string(),
-    url: g.string(),
-    ranges: g.array(
-      g.object({
-        start: g.number(),
-        end: g.number()
-      })
-    )
-  })
-);
-function p(e) {
-  return g.safeParse(m, e).success;
-}
-function M(e) {
-  try {
-    let t = JSON.parse(e);
-    return p(t) ? t : [];
-  } catch {
-    return [];
-  }
-}
-function k(e) {
-  let t = /* @__PURE__ */ new Map();
-  for (let n of e) {
-    let r = n.text;
-    if (t.has(r)) {
-      let l = t.get(r).ranges;
-      for (let a of n.ranges) {
-        let s = !1;
-        for (let f of l)
-          if (f.start === a.start && f.end === a.end) {
-            s = !0;
-            break;
-          }
-        s || l.push(a);
-      }
-    } else
-      t.set(r, {
-        url: n.url,
-        ranges: n.ranges
-      });
-  }
-  return Array.from(t, ([n, { url: r, ranges: o }]) => ({ text: n, url: r, ranges: o }));
-}
-function A(e) {
-  try {
-    let t = new URL(e);
-    return t.pathname.slice(t.pathname.lastIndexOf(".") + 1);
-  } catch {
-    let t = e.lastIndexOf(".");
-    return e.slice(t, e.indexOf("/", t) + 1);
-  }
-}
-function w(e, t, n) {
-  let r = e(t), o = "", l = [], a = 0, s = r.querySelectorAll("style");
-  for (let f of Array.from(s)) {
-    let c = f.textContent;
-    if (!c.trim()) continue;
-    o += c;
-    let i = t.indexOf(c), d = i + c.length;
-    for (let _ of n)
-      _.start >= i && _.end <= d && l.push({
-        start: a + (_.start - i),
-        end: a + (_.end - i)
-      });
-    a += c.length;
-  }
-  return {
-    css: o,
-    ranges: l
-  };
-}
-function E(e) {
-  return /<\/?(html|body|head|div|span|script|style)/i.test(e);
-}
-function O(e, t) {
-  let n = [];
-  for (let r of e) {
-    let o = A(r.url).toLowerCase();
-    if (o !== "js") {
-      if (o === "css") {
-        n.push(r);
-        continue;
-      }
-      if (E(r.text)) {
-        if (!t)
-          continue;
-        let { css: l, ranges: a } = w(t, r.text, r.ranges);
-        n.push({
-          url: r.url,
-          text: l,
-          ranges: a
-        });
-        continue;
-      }
-      n.push({
-        url: r.url,
-        text: r.text,
-        ranges: r.ranges
-      });
-    }
-  }
-  return n;
-}
-function L(e) {
-  let t = [], n = 0;
-  for (let r of e.ranges)
-    n !== r.start && (t.push({
-      start_offset: n,
-      end_offset: r.start,
-      is_covered: !1
-    }), n = r.start), t.push({
-      start_offset: r.start,
-      end_offset: r.end,
-      is_covered: !0
-    }), n = r.end;
-  return n !== e.text.length && t.push({
-    start_offset: n,
-    end_offset: e.text.length,
-    is_covered: !1
-  }), {
-    ...e,
-    chunks: t
-  };
-}
-function N(e) {
-  for (let n of e)
-    for (let r of n.ranges)
-      for (let o = 1; o >= -28; o--) {
-        let l = r.start + o;
-        if (n.text.charAt(l) === "@") {
-          r.start = l;
-          break;
-        }
-      }
-  return e;
-}
-function S(e) {
-  let t = 1, n = 0, r = e.chunks.map((l, a) => {
-    let s = x(e.text.slice(l.start_offset, l.end_offset));
-    l.is_covered && (a === 0 ? s = s + `
-` : a === e.chunks.length - 1 ? s = `
-` + s : s = `
-` + s + `
-`);
-    let f = s.split(`
-`).length, c = n, i = Math.max(n + s.length - 1, 0), d = t, _ = t + f;
-    return t = _, n = i, {
-      ...l,
-      start_offset: c,
-      start_line: d,
-      end_line: _ - 1,
-      end_offset: i,
-      css: s,
-      total_lines: _ - d
-    };
-  });
-  return {
-    ...e,
-    // TODO: update ranges as well?? Or remove them because we have chunks now
-    chunks: r,
-    text: r.map(({ css: l }) => l).join("")
-  };
-}
-function y(e, t) {
-  return t === 0 ? 0 : e / t;
-}
-function T(e) {
-  let { text: t, url: n, chunks: r } = e, o = 0, l = 0, a = 0, s = 0, f = 0, c = 0;
-  for (let i of r) {
-    let d = i.total_lines, _ = i.end_offset - i.start_offset;
-    s += d, a += _, i.is_covered ? (f += d, l += _) : (c += d, o += _);
-  }
-  return {
-    url: n,
-    text: t,
-    uncovered_bytes: o,
-    covered_bytes: l,
-    total_bytes: a,
-    line_coverage_ratio: y(f, s),
-    byte_coverage_ratio: y(l, a),
-    total_lines: s,
-    covered_lines: f,
-    uncovered_lines: c,
-    chunks: r
-  };
-}
-function C(e, t) {
-  let n = e.length;
-  if (!p(e))
-    throw new TypeError("No valid coverage data found");
-  let r = O(e, t), o = k(r), f = N(o).map((u) => L(u)).map((u) => S(u)).map((u) => T(u)), { total_lines: c, total_covered_lines: i, total_uncovered_lines: d, total_bytes: _, total_covered_bytes: h, total_uncovered_bytes: b } = f.reduce(
-    (u, v) => (u.total_lines += v.total_lines, u.total_covered_lines += v.covered_lines, u.total_uncovered_lines += v.uncovered_lines, u.total_bytes += v.total_bytes, u.total_covered_bytes += v.covered_bytes, u.total_uncovered_bytes += v.uncovered_bytes, u),
-    {
-      total_lines: 0,
-      total_covered_lines: 0,
-      total_uncovered_lines: 0,
-      total_bytes: 0,
-      total_covered_bytes: 0,
-      total_uncovered_bytes: 0
-    }
-  );
-  return {
-    total_files_found: n,
-    total_bytes: _,
-    total_lines: c,
-    covered_bytes: h,
-    covered_lines: i,
-    uncovered_bytes: b,
-    uncovered_lines: d,
-    byte_coverage_ratio: y(h, _),
-    line_coverage_ratio: y(i, c),
-    coverage_per_stylesheet: f,
-    total_stylesheets: f.length
-  };
-}
-export {
-  C as calculate_coverage,
-  M as parse_coverage
-};

package/dist/src/chunkify.d.ts

@@ -1,9 +0,0 @@
-import { Coverage } from './parse-coverage';
-export type ChunkedCoverage = Coverage & {
-    chunks: {
-        start_offset: number;
-        end_offset: number;
-        is_covered: boolean;
-    }[];
-};
-export declare function chunkify_stylesheet(stylesheet: Coverage): ChunkedCoverage;

package/dist/src/chunkify.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/decuplicate.d.ts

@@ -1,9 +0,0 @@
-import { Coverage } from './parse-coverage.ts';
-/**
- * @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
- */
-export declare function deduplicate_entries(entries: Coverage[]): Coverage[];

package/dist/src/deduplicate.test.d.ts

@@ -1 +0,0 @@
-export {};