baseline-guard

Baseline Guard: Your CI-ready safety net that keeps React apps and modern web projects within the safe zone of universally supported features.

Comment

Inspiration

We don’t just need “a solution to a problem”—we need it at the right stage. Browser-compat issues caught in prod are expensive; caught in the editor are easy to miss; caught in the project + CI are impossible to ignore. Not everyone uses the same IDE/extension/Chrome add-on, so checks get skipped. baseline-guard moves compatibility checks to where they can’t be missed: your repo and pipeline.

What it does

  • Scans JS/TS/TSX/CSS/HTML for modern web features (e.g., : has(), container queries, RegExp lookbehind, WebGPU).
  • Compares them against your target browsers (from baseline.config.json or Browserslist) using the official web-features dataset.
  • Fails or warns (configurable) when a feature isn’t safely supported.
  • Outputs pretty console logs or saves MD/HTML/JSON reports.
  • Lets teams add inline custom rules directly in baseline.config.json.

How we built it

  • TypeScript + Node CLI (editor-agnostic).
  • web-features for Baseline + per-browser minimum versions.
  • browserslist to resolve targets like safari 16.0–16.3.
  • fast-glob to scan project files; lightweight regex detectors per rule.
  • Inline rules via JSON (pattern + flags) compiled to RegExp at runtime.
  • Nice DX: compact Targets and Rules tables, --pack, --tags, --only/--exclude, --watch, reports.

Challenges we ran into

  • Mapping feature IDs → compat minima correctly across Safari/iOS ranges.
  • Making regex detectors robust without being slow or noisy.
  • Avoiding duplicate/contradictory configs (single baseline.config.json source of truth).
  • Clear output that works for both devs and CI logs.

Accomplishments that we’re proud of

  • Project-level, default-on compatibility guard—no IDE dependency.
  • Inline custom rules in baseline.config.json (no extra files).
  • Clean CLI UX: summary tables, rule packs, and simple reporting.
  • Works great in CI/CD (non-zero exit on mode: "error").
  • Real-world catches (e.g., RegExp lookbehind vs Safari 16.x targets).

What we learned

  • Teams want guarantees at commit/CI time, not just editor hints.
  • Baseline + minima beat “gut feel” and generic device requirements.
  • Small UX touches (tables, saveable reports) make adoption stick.
  • Regex gets you far fast; AST detectors will reduce false positives next.

What’s next for baseline-guard

  • VS Code integration that piggybacks on the same CLI.
  • Rule marketplace / presets by org, framework, or year (e.g., “Baseline 2025”).
  • Suggestions: link to docs/polyfills or safe alternatives when a rule fires.

Built With

Share this project:

Updates

posted an update —

Baseline Guard — quick update

Shipped a cleaner, smarter CLI to keep your web app inside the safe, cross-browser “Baseline” zone.

What’s new

  • Inline custom rules right in baseline.config.json (no extra files)
  • Compact Targets table + Rules table in the CLI
  • Save reports in md, html, or json (--report=md|html|json --save)
  • Default pack = all (or filter with --only, --exclude, --tags)
  • Better checks for tricky features (e.g., RegExp lookbehind)

Add a rule (example)

{
  "rules": [
    {
      "id": "css-custom-prop-register",
      "featureId": "css-properties-and-values",
      "files": ["css"],
      "pattern": "@property\\s+--",
      "flags": "g",
      "message": "@property may not be in your baseline.",
      "tags": ["css","experimental"]
    }
  ]
}

Try it

npx baseline-guard --save --report=md

npm: https://www.npmjs.com/package/baseline-guard GitHub: https://github.com/codewithshinde/baseline-guard

Log in or sign up for Devpost to join the conversation.