Baseline Gardener

A CI/CD tool that catches browser compatibility issues before your users do - automatically scan your code for non-baseline web features and get instant feedback on what works across modern browsers.

Comment

Baseline Gardener - Hackathon Project Story

What Inspired This Project

As a web developer, I've been burned too many times by compatibility issues that only surface after deployment. You know the feeling - your shiny new CSS Grid layout works perfectly in Chrome, but suddenly your boss is calling because the site looks broken in their browser.

The Web Platform's Baseline initiative caught my attention because it promises to solve exactly this problem - giving developers clear guidance on which features are safe to use. But there was a gap: no automated way to check if your code actually follows baseline compatibility guidelines during development.

What I Learned

This project taught me several valuable lessons:

  1. The complexity of web feature detection - What seems straightforward ("just check if this API exists") becomes nuanced when you consider different syntax patterns, polyfills, and edge cases.

  2. AST parsing is powerful - Using tools like Babel's parser, css-tree, and htmlparser2 opened up possibilities. You can detect patterns in code that regex simply can't handle reliably.

  3. Data quality matters - The web-features package is incredible, containing detailed metadata about 1000+ web platform features.

  4. CI/CD integration is everything - A tool that only works locally is half-finished. Making it work seamlessly with GitHub Actions and other CI systems was an important part.

How I Built It

Architecture Decisions

The project follows a modular architecture with clear separation of concerns:

parsers/ → detectors/ → baseline/ → reporters/

Technical Implementation

Language Parsers: Each supported language (JavaScript, CSS, HTML) has its own parser using industry-standard tools:

  • JavaScript: Babel's AST parser with custom traversal logic
  • CSS: css-tree for robust CSS parsing and analysis
  • HTML: htmlparser2 for lightweight DOM analysis

Feature Detection: Rather than hardcoding feature lists, I built a dynamic mapping generator that processes the web-features package:

// From 1076 total web features, we map ~528 (49%) 
// to specific code patterns developers actually write
const mapping = generateMappings(webFeatures);

Baseline Integration: Each detected feature gets cross-referenced with baseline data to determine compatibility status.

Multiple Output Formats: Supporting text, JSON, Markdown, and SARIF ensures the tool works in different contexts - from terminal usage to GitHub Code Scanning integration.

The Technical Challenge: Dynamic Mapping

The biggest technical hurdle was creating comprehensive mappings from abstract feature descriptions to concrete code patterns. For example:

  • Web-features says "CSS Container Queries" is baseline
  • Developers write @container (min-width: 300px)
  • The tool needs to connect these two facts

My solution processes feature metadata and generates detection patterns:

// Auto-generate mappings like:
cssRules: {
  '@container': 'css-container-queries',
  'container-type': 'css-container-queries',
  'container-name': 'css-container-queries'
}

What Makes This Special

Data-Driven: Unlike other compatibility tools that rely on static browser support matrices, Baseline Gardener uses the living web-features dataset that's maintained by the WebDX Community Group.

Developer-Focused: The tool integrates naturally into existing workflows - CLI for local development, GitHub Actions for CI/CD, SARIF output for security scanning tools.

Comprehensive: Supporting JavaScript, CSS, and HTML in a single tool means developers get holistic compatibility checking, not fragmented results from multiple tools.

Practical: Rather than just saying "this feature isn't baseline," the tool provides actionable information about what alternatives exist and how widely supported features actually are.

Impact and Future Vision

This tool addresses a real pain point in modern web development. By catching compatibility issues during development rather than after deployment, it can save teams significant debugging time and improve user experiences across diverse browser environments.

The modular architecture makes it easy to extend - adding new languages/frameworks (Vue, Svelte), new baseline data sources, or new output formats requires minimal changes to the core system.

Technical Stats

  • Coverage: 528 web features mapped from 1076 total (49% coverage)
  • Languages: JavaScript, CSS, HTML, Vue, Svelte
  • Parsers: 3 production-grade AST parsers
  • Output Formats: 4 different formats for various use cases
  • CI Integration: Works with GitHub Actions, CircleCI, Jenkins, etc.

The project demonstrates that with the right architecture and data sources, we can build tools that make baseline compatibility as automatic as linting or type checking.

Built With

Share this project:

Updates