@projectwallace/css-code-coverage 0.3.1 → 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.1",
+  "version": "0.4.0",
   "description": "",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
@@ -21,34 +21,37 @@
   ],
   "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",

package/dist/css-code-coverage.js

@@ -1,247 +0,0 @@
-import * as h from "valibot";
-import { format as F } from "@projectwallace/format-css";
-import { tokenTypes as x, tokenize as $ } from "css-tree/tokenizer";
-let J = h.array(
-  h.object({
-    text: h.optional(h.string()),
-    url: h.string(),
-    ranges: h.array(
-      h.object({
-        start: h.number(),
-        end: h.number()
-      })
-    )
-  })
-);
-function q(t) {
-  return h.safeParse(J, t).success;
-}
-function X(t) {
-  try {
-    let e = JSON.parse(t);
-    return q(e) ? e : [];
-  } catch {
-    return [];
-  }
-}
-function P(t) {
-  return t.map(({ url: e, text: s, ranges: n }) => {
-    if (!s)
-      return { url: e, text: s, ranges: n };
-    let c = F(s), f = /* @__PURE__ */ new Set([
-      x.EOF,
-      x.BadString,
-      x.BadUrl,
-      x.WhiteSpace,
-      x.Semicolon,
-      x.Comment,
-      x.Colon
-    ]), o = n.map(({ start: a, end: i }) => ({ start: a, end: i, tokens: [] }));
-    function v(a, i) {
-      let r = 0;
-      for (let u of o) {
-        if (u.start > i) return -1;
-        if (u.start <= a && u.end >= i)
-          return r;
-        r++;
-      }
-      return -1;
-    }
-    let _ = 0;
-    $(s, (a, i, r) => {
-      if (f.has(a)) return;
-      _++, a === x.Url && (_ += 2);
-      let u = v(i, r);
-      u !== -1 && o[u].tokens.push(_);
-    });
-    let g = /* @__PURE__ */ new Map();
-    _ = 0, $(c, (a, i, r) => {
-      f.has(a) || (_++, a === x.Url && (_ += 2), g.set(_, { start: i, end: r }));
-    });
-    let y = [];
-    for (let a of o) {
-      let i = g.get(a.tokens.at(0)), r = g.get(a.tokens.at(-1));
-      i !== void 0 && r !== void 0 && y.push({
-        start: i.start,
-        end: r.end
-      });
-    }
-    return { url: e, text: c, ranges: y };
-  });
-}
-function R(t) {
-  let e = /* @__PURE__ */ new Map();
-  for (let s of t) {
-    let n = s.text || "";
-    if (e.has(n)) {
-      let f = e.get(n).ranges;
-      for (let o of s.ranges) {
-        let v = !1;
-        for (let _ of f)
-          if (_.start === o.start && _.end === o.end) {
-            v = !0;
-            break;
-          }
-        v || f.push(o);
-      }
-    } else
-      e.set(n, {
-        url: s.url,
-        ranges: s.ranges
-      });
-  }
-  return e;
-}
-function D(t) {
-  try {
-    let e = new URL(t);
-    return e.pathname.slice(e.pathname.lastIndexOf(".") + 1);
-  } catch {
-    let e = t.lastIndexOf(".");
-    return t.slice(e, t.indexOf("/", e) + 1);
-  }
-}
-function G(t, e, s) {
-  let n = t(e), c = "", f = [], o = 0, v = n.querySelectorAll("style");
-  for (let _ of Array.from(v)) {
-    let g = _.textContent;
-    if (!g.trim()) continue;
-    c += g;
-    let y = e.indexOf(g), a = y + g.length;
-    for (let i of s)
-      i.start >= y && i.end <= a && f.push({
-        start: o + (i.start - y),
-        end: o + (i.end - y)
-      });
-    o += g.length;
-  }
-  return {
-    css: c,
-    ranges: f
-  };
-}
-function H(t) {
-  return /<\/?(html|body|head|div|span|script|style)/i.test(t);
-}
-function K(t, e) {
-  let s = [];
-  for (let n of t) {
-    if (!n.text) continue;
-    let c = D(n.url).toLowerCase();
-    if (c !== "js") {
-      if (c === "css") {
-        s.push(n);
-        continue;
-      }
-      if (H(n.text)) {
-        if (!e)
-          continue;
-        let { css: f, ranges: o } = G(e, n.text, n.ranges);
-        s.push({
-          url: n.url,
-          text: f,
-          ranges: o
-        });
-        continue;
-      }
-      s.push({
-        url: n.url,
-        text: n.text,
-        ranges: n.ranges
-      });
-    }
-  }
-  return s;
-}
-function j(t, e) {
-  return e === 0 ? 0 : t / e;
-}
-function Y(t, e) {
-  let s = t.length;
-  if (!q(t))
-    throw new TypeError("No valid coverage data found");
-  let n = K(t, e), c = P(n), f = R(c), o = Array.from(f).map(([r, { url: u, ranges: L }]) => {
-    function M(l, d) {
-      let b = d + l.length, N = b + 1, W = /^\s*$/.test(l), k = l.endsWith("}");
-      if (!W && !k) {
-        for (let m of L)
-          if (!(m.start > b || m.end < d)) {
-            if (m.start <= d && m.end >= b)
-              return !0;
-            if (l.startsWith("@") && m.start > d && m.start < N)
-              return !0;
-          }
-      }
-      return !1;
-    }
-    let S = r.split(`
-`), O = S.length, p = new Uint8Array(O), C = 0, B = r.length, U = 0, E = 0;
-    for (let l = 0; l < S.length; l++) {
-      let d = S[l], b = E, W = E + d.length + 1, k = /^\s*$/.test(d), m = d.endsWith("}"), z = M(d, b), w = !1, T = l > 0 && p[l - 1] === 1;
-      (z && !m && !k || (k || m) && T || k && !T && M(S[l + 1], W)) && (w = !0), p[l] = w ? 1 : 0, w && (C++, U += d.length + 1), E = W;
-    }
-    let A = [
-      {
-        start_line: 1,
-        is_covered: p[0] === 1,
-        end_line: 1,
-        total_lines: 1
-      }
-    ];
-    for (let l = 1; l < p.length; l++) {
-      let d = p[l];
-      if (d !== p[l - 1]) {
-        let b = A.at(-1);
-        b.end_line = l, b.total_lines = l - b.start_line + 1, A.push({
-          start_line: l + 1,
-          is_covered: d === 1,
-          end_line: l,
-          total_lines: 0
-        });
-      }
-    }
-    let I = A.at(-1);
-    return I.total_lines = p.length + 1 - I.start_line, I.end_line = p.length, {
-      url: u,
-      text: r,
-      ranges: L,
-      unused_bytes: B - U,
-      used_bytes: U,
-      total_bytes: B,
-      line_coverage_ratio: j(C, O),
-      byte_coverage_ratio: j(U, B),
-      line_coverage: p,
-      total_lines: O,
-      covered_lines: C,
-      uncovered_lines: O - C,
-      chunks: A
-    };
-  }), { total_lines: v, total_covered_lines: _, total_uncovered_lines: g, total_bytes: y, total_used_bytes: a, total_unused_bytes: i } = o.reduce(
-    (r, u) => (r.total_lines += u.total_lines, r.total_covered_lines += u.covered_lines, r.total_uncovered_lines += u.uncovered_lines, r.total_bytes += u.total_bytes, r.total_used_bytes += u.used_bytes, r.total_unused_bytes += u.unused_bytes, r),
-    {
-      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: s,
-    total_bytes: y,
-    total_lines: v,
-    used_bytes: a,
-    covered_lines: _,
-    unused_bytes: i,
-    uncovered_lines: g,
-    byte_coverage_ratio: j(a, y),
-    line_coverage_ratio: j(_, v),
-    coverage_per_stylesheet: o,
-    total_stylesheets: o.length
-  };
-}
-export {
-  Y as calculate_coverage,
-  X as parse_coverage
-};

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[]): Map<NonNullable<Coverage['text']>, Pick<Coverage, 'ranges' | 'url'>>;