Inspiration
The moment a developer deploys to production and users report "the site is broken" - only to discover a modern CSS feature like Subgrid doesn't work in Safari 15. That weekend scramble to fix something that could've been caught during development is what Baseguard was made to prevent.
What it does
Baseguard is a Webpack plugin that automatically scans your code during builds and warns about browser compatibility issues before they reach production.
How it works:
- Install as a dev dependency: npm install baseguard --save-dev
- Add to webpack config
- Build your project normally
- Baseguard automatically scans all JavaScript, CSS, and HTML files
- Detects web features you're using
- Checks compatibility against Google Baseline data
- Warns about features with limited browser support
- Suggests specific fallbacks and alternatives
- Generates detailed HTML and JSON reports
What it detects:
- JavaScript APIs (fetch, IntersectionObserver, Service Workers, etc.)
- CSS features (Grid, Subgrid, Container Queries, backdrop-filter, etc.)
- HTML elements (dialog, picture, loading="lazy", etc.)
Output: Console warnings during builds + comprehensive HTML reports showing exactly which features need attention and how to fix them.
How we built it
Node.js, Webpack Plugin API, Babel (AST parsing), PostCSS (CSS parsing) and Google Baseline
Challenges we ran into
Initially used simple regex to find features like fetch. This missed window.fetch, globalThis.fetch, and imported functions. Switched to Babel's AST parser to understand code structure properly
Accomplishments that we're proud of
Built a tool that can detects 75+ web features across JavaScript, CSS, and HTML
What we learned
The 30-month threshold for "Widely Available" status and how webpack plugins integrate into the build pipeline. Also learnt how to use Google cloud shell.
What's next for Baseguard
Possibly a VS Code Extension
Built With
- baseline
- css3
- html5
- javascript
- webpack
