• 

• 

• 

Inspiration

Modern teams want to use new web features, but one unsupported feature can break production. Baseline tells us what’s broadly safe; what was missing was a lightweight way to enforce that safety inside real code and PRs. We built a tool that turns Baseline guidance into developer workflow: scan → explain → enforce.

What it does

Scans CSS, HTML, and common JS Web APIs across a repo.

Classifies each finding by Baseline status at the subfeature level: Widely, Newly, Not in.

Explains risk with MDN links and clear advice (e.g., fallbacks or feature detection).

Reports via an accessible HTML dashboard (filters, sorting, “risky only”, CSV export).

Enforces in CI with threshold policies (MAX_NONE, MAX_LOW) and a per-key allowlist for justified exceptions.

CLI (baseline-compat ) generates a self-contained baseline-compat-report/ folder—no backend.

How we built it

Discovery & parsing: fast-glob → css-tree (CSS AST with positions), parse5 (HTML with sourceCodeLocationInfo), plus lightweight JS token heuristics (e.g., structuredClone, View Transitions, File System Access, Notifications).

Enrichment: map each usage to an MDN BCD key and compute Baseline using web-features + compute-baseline.

Outputs: report.json → rendered to report.html (dark mode, sticky headers, filters) and report.csv.

CI: GitHub Actions scans on PRs, uploads artifacts, posts a summary comment, and blocks when thresholds are exceeded; allowlist applied first.

Hosting: GitHub Pages serves /docs as a static live demo.

Challenges we ran into

Memory on large repos: solved with ignore globs (node_modules, dist, bundles), file-size caps, and safe Node heap flags in the CLI.

Accurate HTML line numbers: enabled parse5’s sourceCodeLocationInfo.

Good DX on CI failures: ordered steps so artifacts & comments still appear even if the gate fails.

Accomplishments that we’re proud of

An end-to-end loop that both educates (MDN + advice) and enforces (thresholds + allowlist).

A clean, accessible report that non-experts can filter and understand quickly.

Zero-config defaults with pragmatic escape hatches for teams.

What we learned

Baseline’s value is in subfeature-level precision; pairing that with clear remediation advice drives action.

Small UX touches (filters, CSV, PR comment) dramatically improve adoption and team trust.

CI needs to be informative even when failing—artifacts and comments are essential.

What’s next for Baseline Compatibility Dashboard

Deeper JS AST coverage and additional CSS/HTML features (e.g., more selectors/at-rules).

VS Code helper with inline hints and quick-fix suggestions.

Publish the CLI to npm for npx one-shot scans across repos.

Optional SBOM-style JSON output for pipeline ingestion and policy dashboards.

Built With

• actions;
• compute-baseline;
• css
• css-tree;
• fast-glob;
• github
• html;
• mdn/browser-compat-data;
• node.js;
• pages;
• parse5;
• ts-node;
• typescript;
• web-features;