Greenlight

A VS Code extension + GitHub Action that warns you when web features aren’t Baseline-safe and suggests fixes before code ships.

Comment

Inspiration

Greenlight helps web developers avoid breaking features across browsers. It works in two ways: 1. VS Code Extension — As you type HTML, CSS, or JavaScript, Greenlight checks your code against Baseline data. If you use a risky feature (like :has() selectors or the View Transitions API), it shows a warning and suggests alternatives or polyfills. This keeps you aware of compatibility issues before they ever reach production. 2. GitHub Action — On pull requests, Greenlight scans the codebase and leaves a simple comment: a short report of which features aren’t Baseline-safe, where they appear, and how to fix them. Teams can configure it to block merges or just leave warnings.

Developers waste time hunting through MDN or Can I Use just to check if a feature works everywhere. Greenlight puts the answer right where you need it - inline and in your workflow.

What it does

• Detects modern CSS/JS features in your code.
• Compares them against Baseline 2024/2025 (or a custom config).
• Highlights issues inline in VS Code.
• Suggests fallbacks (links, polyfills, snippets).
• Posts a compatibility summary in GitHub pull requests.

How we built it

• Node + TypeScript for the core detection logic.
• web-features npm package to get Baseline data.
• Babel/TypeScript AST + PostCSS to scan JS/TS and CSS.
• VS Code API for inline warnings and quick-fix actions.
• GitHub Actions workflow with a shared CLI to post PR comments.

Challenges we ran into

• Mapping source code tokens to Baseline feature IDs.
• Keeping feedback helpful without overwhelming the developer.
• Packaging Baseline data for offline use.

Accomplishments that we're proud of

• A working end-to-end flow: warning in VS Code, report in GitHub PRs.
• A config system (baseline.config.json) that makes the tool flexible.
• A smooth 3-minute demo that shows the value instantly.

What we learned

• How to integrate Baseline data into real developer tools.
• How to balance strict compatibility enforcement with helpful suggestions.
• How critical it is to surface compatibility info where developers already are (editor + CI).

What's next for Greenlight

• Add framework-specific rules (React, Vue, Next.js).
• Generate /COMPAT.md docs automatically.
• Provide more codemods for auto-fixes.
• Publish on the VS Code Marketplace and GitHub Marketplace.

Built With

Share this project:

Updates