@projectwallace/css-code-coverage 0.1.1 → 0.1.3

package/README.md

@@ -19,52 +19,33 @@ npm install @projectwallace/css-code-coverage
 
 ### Prerequisites
 
-1. You have collected browser coverage data of your CSS. There are several ways to do this:
-
-   1. in the browser devtools in [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/coverage/)/[Chrome](https://developer.chrome.com/docs/devtools/coverage/)/chromium
-   1. Via the `coverage.startCSSCoverage()` API that headless browsers like [Playwright](https://playwright.dev/docs/api/class-coverage#coverage-start-css-coverage) or [Puppeteer](https://pptr.dev/api/puppeteer.coverage.startcsscoverage/) provide.
-
-   Either way you end up with one or more JSON files that contain coverage data.
-
-   ```ts
-   // Read a single JSON or a folder full of JSON files with coverage data
-   // Coverage data looks like this:
-   // {
-   //   url: 'https://www.projectwallace.com/style.css',
-   //   text: 'a { color: blue; text-decoration: underline; }', etc.
-   //   ranges: [
-   //     { start: 0, end: 46 }
-   //   ]
-   // }
-   import { parse_coverage } from '@projectwallace/css-code-coverage'
-
-   let files = await fs.glob('./css-coverage/**/*.json')
-   let coverage_data = []
-
-   for (let file of files) {
-   	let json_content = await fs.readFile(file, 'urf-8')
-   	coverage_data.push(...parse_coverage(json_content))
-   }
-   ```
-
-1. You 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):
-
-      ```ts
-      // $ npm install linkedom
-      import { DOMParser } from 'linkedom'
-
-      function parse_html(html: string) {
-      	return new DOMParser().parseFromString(html, 'text/html')
-      }
-      ```
+You have collected browser coverage data of your CSS. There are several ways to do this:
+
+1.  in the browser devtools in [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/coverage/)/[Chrome](https://developer.chrome.com/docs/devtools/coverage/)/chromium
+1.  Via the `coverage.startCSSCoverage()` API that headless browsers like [Playwright](https://playwright.dev/docs/api/class-coverage#coverage-start-css-coverage) or [Puppeteer](https://pptr.dev/api/puppeteer.coverage.startcsscoverage/) provide.
+
+Either way you end up with one or more JSON files that contain coverage data.
+
+```ts
+// Read a single JSON or a folder full of JSON files with coverage data
+// Coverage data looks like this:
+// {
+//   url: 'https://www.projectwallace.com/style.css',
+//   text: 'a { color: blue; text-decoration: underline; }', etc.
+//   ranges: [
+//     { start: 0, end: 46 }
+//   ]
+// }
+import { parse_coverage } from '@projectwallace/css-code-coverage'
+
+let files = await fs.glob('./css-coverage/**/*.json')
+let coverage_data = []
+
+for (let file of files) {
+	let json_content = await fs.readFile(file, 'urf-8')
+	coverage_data.push(...parse_coverage(json_content))
+}
+```
 
 ### Bringing it together
 
@@ -73,3 +54,26 @@ import { calculate_coverage } from '@projectwallace/css-code-coverage'
 
 let report = calculcate_coverage(coverage_data, parse_html)
 ```
+
+See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main/src/index.ts) for the data that's returned.
+
+### Optional: coverage from `<style>` blocks
+
+Covergae 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):
+
+    ```ts
+    // $ npm install linkedom
+    import { DOMParser } from 'linkedom'
+
+    function parse_html(html: string) {
+    	return new DOMParser().parseFromString(html, 'text/html')
+    }
+    ```

package/dist/css-code-coverage.js

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

package/dist/src/filter-entries.d.ts

@@ -1,3 +1,3 @@
 import { Coverage } from './parse-coverage.ts';
 import { Parser } from './types.ts';
-export declare function filter_coverage(coverage: Coverage[], parse_html: Parser): Coverage[];
+export declare function filter_coverage(coverage: Coverage[], parse_html?: Parser): Coverage[];

package/dist/src/index.d.ts

@@ -18,8 +18,8 @@ export type StylesheetCoverage = CoverageData & {
 };
 export type CoverageResult = CoverageData & {
     total_files_found: number;
-    coverage_per_stylesheet: StylesheetCoverage[];
     total_stylesheets: number;
+    coverage_per_stylesheet: StylesheetCoverage[];
 };
 /**
  * @description
@@ -32,4 +32,7 @@ export 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
  */
-export declare function calculate_coverage(coverage: Coverage[], parse_html: Parser): CoverageResult;
+export declare function calculate_coverage(coverage: Coverage[], parse_html?: Parser): CoverageResult;
+export type { Coverage, Range } from './parse-coverage.ts';
+export { parse_coverage } from './parse-coverage.ts';
+export type { Parser } from './types.ts';

package/dist/src/parse-coverage.d.ts

@@ -7,4 +7,5 @@ export type Coverage = {
     text?: string;
     ranges: Range[];
 };
-export declare function parse_json(input: string): Coverage[];
+export declare function is_valid_coverage(input: unknown): boolean;
+export declare function parse_coverage(input: string): Coverage[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectwallace/css-code-coverage",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {