Baseline-lint

Instantly catch browser compatibility issues in your CSS and JavaScript—powered by Google’s Baseline data, right in your workflow.

Comment

baseline-lint

Instantly catch browser compatibility issues in your CSS and JavaScript—powered by Google’s Baseline data, right in your workflow.

Inspiration

Look, I got tired of the same old workflow. Write CSS, deploy, users report bugs in Safari. Debug for hours. Fix. Repeat. It's exhausting.

When Google announced their Baseline initiative, I thought "Finally! A standard for features that work everywhere!" But there was a catch - you still had to manually check every feature against their docs. I needed something that would do this automatically while I'm coding.

That's when it hit me: what if we had a linting tool that could flag non-baseline features immediately? Stop the compatibility bugs before they ever make it to production?

What it does

baseline-lint is basically your "browser compatibility bodyguard." It scans your CSS and JavaScript files and tells you if you're using features that might break in certain browsers.

It works on three levels:

  • Command line tool: Run it directly on your files
  • Visual dashboard: Browse and scan files with a nice UI
  • GitHub Actions: Catch issues in PRs before they hit production

But the real magic is that it connects directly to Google's official web-features data. When a feature becomes "Baseline," our tool knows about it right away.

How I built it

I started with a proof-of-concept that could parse CSS files and match properties against the web-features database. The initial version was embarrassingly slow and memory-hungry, but it worked.

From there, I built out:

  1. A proper CLI using commander.js
  2. CSS and JS parsers with AST analysis
  3. LRU caching to avoid re-checking the same features
  4. A Next.js dashboard for visual analysis
  5. GitHub Actions integration with PR comments
  6. Testing infrastructure to catch bugs

I had to dive deep into the web-features package to understand how Google classifies features. Turns out, there's a ton of nuance in how they track browser support!

Challenges I ran into

Holy hell, there were some rough patches:

  • GitHub Actions kept hanging - Took me forever to figure out the process wasn't exiting properly
  • Memory usage exploded when scanning large files - Had to implement stream processing and LRU caching
  • CSS parsing is a nightmare - So many edge cases and vendor prefixes
  • The web-features API changed mid-development - Had to refactor how I queried feature status
  • Timeout issues in CI - Fixed with proper exit handlers and cleanup

The worst was when I discovered my PR comment feature was creating duplicate comments on every run. Had to dig into GitHub's API docs at 3 AM to fix that one.

Accomplishments that I'm proud of

I've built tools before, but this one feels special:

  • The performance on large files is excellent - it handles 3MB+ CSS files in seconds
  • The dashboard looks professional and is genuinely useful
  • The project has comprehensive testing (that actually works!)
  • The PR comments are clean and actionable
  • It all works smoothly across platforms (Windows was a pain but I got it)

But honestly? I'm most proud that I built something developers actually need. This solves a real problem we all face.

What I learned

This project taught me more than I expected:

  • The insane complexity behind browser feature detection
  • How Google's Baseline initiative actually works
  • Better CI/CD practices and GitHub Actions
  • Memory optimization for Node.js applications
  • How to build a proper developer tool end-to-end
  • React Server Components for the dashboard

I also learned that seemingly simple linting tools involve a ton of edge cases and performance considerations. There's always one more browser quirk you didn't account for.

What's next for baseline-lint

This is just the beginning! I'm planning to:

  • Add editor integrations (VS Code extension first)
  • Expand JavaScript detection to include more APIs
  • Build a public website with a feature explorer
  • Add suggestions for fallbacks when issues are detected
  • Create shareable baseline configuration profiles
  • Improve dashboard analytics for tracking progress

The dream is to make this part of standard web development workflows, just like ESLint and Prettier are today.

Built With

  • Node.js
  • Next.js
  • React
  • TypeScript (definitions)
  • web-features (Google's official package)
  • GitHub API
  • AST parsers (CSS & JS)
  • LRU cache
  • Jest (testing)

Built With

Share this project:

Updates