https://github.com/wesleybertipaglia/weblinter
WebLinter is a CLI tool that helps developers detect the use of web features (like CSS properties or HTML elements) that aren’t yet part of the Web Platform Baseline
https://github.com/wesleybertipaglia/weblinter
baseline lint web
Last synced: 8 months ago
JSON representation
WebLinter is a CLI tool that helps developers detect the use of web features (like CSS properties or HTML elements) that aren’t yet part of the Web Platform Baseline
- Host: GitHub
- URL: https://github.com/wesleybertipaglia/weblinter
- Owner: wesleybertipaglia
- License: mit
- Created: 2025-10-05T23:46:09.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-06T00:26:48.000Z (9 months ago)
- Last Synced: 2025-10-06T00:55:55.318Z (9 months ago)
- Topics: baseline, lint, web
- Language: TypeScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebLinter – Baseline-Aware Feature Checker
**WebLinter** is a CLI tool that helps developers detect the use of web features (like CSS properties or HTML elements) that **aren’t yet part of the [Web Platform Baseline](https://developer.chrome.com/blog/web-platform-baseline/)** — helping ensure broader browser compatibility and fewer surprises in production.
## 🌐 Why WebLinter?
In the fast-moving world of frontend development, it's easy to use features that are *technically standardized* but still *not universally supported*.
The **Web Platform Baseline** defines the set of features that are reliably available across all modern browsers — without requiring polyfills or fallback logic.
### ❗ The Problem
You add a shiny new CSS feature like `backdrop-filter`, it works on your machine, and looks great. But your users on other browsers? Blank screens. Broken layouts. Confusion.
### ✅ The Solution
**WebLinter** scans your codebase, detects features not yet in the Baseline, and alerts you — early. No surprises. No regressions.
It’s powered by [web-features](https://github.com/web-platform-dx/web-features), the same dataset used by MDN and Chrome DevRel.
## 🔍 Features
* **Baseline-Aware Detection**
Flags usage of CSS and HTML features that are not in the Baseline.
* **CSS & HTML Analysis**
Uses **PostCSS** and **Parse5** to deeply parse files for accurate results.
* **Smart File Scanning**
Supports custom `paths`, `extensions`, and `exclude` patterns for precise scanning.
* **Caching System**
Feature usage data is cached locally, improving performance for repeated runs. Configurable via `cacheDays`.
* **Helpful Warnings**
CLI output includes **line numbers**, **context**, and **baseline status** — with both warnings and errors.
## ⚙️ Configuration & Initialization
The first time you run:
```bash
npx weblinter
```
**WebLinter will automatically:**
* Create a `.weblinter` config file in your project root if it doesn't exist yet.
* Generate and cache feature usage data in a `.weblinter_data` folder (ignored by Git).
You can customize `.weblinter` like this:
```json
{
"paths": ["src", "components"], // Folders to include for linting
"extensions": ["css", "html"], // File extensions to lint
"exclude": ["node_modules", "**/*.json", "dist"], // Paths or patterns to exclude
"cacheDays": 10, // Number of days to cache parsed files
"showNotFoundResults": false // Show results for missing files (set to true to debug missing paths)
}
```
If you want, you can also explicitly create the config file anytime by running:
```bash
npx weblinter init
```
## 🧪 Example Output
```bash
❌ Non-baseline feature found:
→ /example/style.css
Warnings (low baseline):
⚠ css.properties.backdrop-filter
Errors (non-baseline):
✖ css.properties.interpolate-size
✖ css.properties.overlay
✖ css.properties.reading-flow
```
> Each result is tied to real feature identifiers from the `web-features` dataset — the same canonical source used by Chrome and MDN.
## 🧱 How It Works
| Component | Role |
| ---------------- | ------------------------------------------ |
| `web-features` | Official dataset of web platform features |
| `PostCSS` | Parses CSS to find feature usage |
| `Parse5` | Parses HTML and extracts relevant features |
| `Globby` | Efficient file searching via glob patterns |
| `Commander.js` | CLI argument parsing and interface |
| `Chalk` | Styled terminal output |
| **Custom Cache** | Stores analysis results for performance |
## 🚧 Roadmap / Future Improvements
* JS/TS support (via Babel parsing)
* Framework-aware detection (React, Vue, Svelte, etc.)
* Plugin support (Webpack, Vite, etc.)
* VS Code extension for real-time linting
## 🤝 Contributing
Contributions are welcome — especially during the Chrome Hackathon!
* Open an issue
* Suggest a feature
* Submit a pull request
Let’s make the web baseline-friendly together.
## 📄 License
MIT License — see [`LICENSE`](./LICENSE) for details.
## ❤️ Made for the Chrome Hackathon
WebLinter was built to promote a more resilient and accessible web by helping developers respect the boundaries of today’s browser capabilities. By sticking to the Web Platform Baseline, your projects remain **stable**, **inclusive**, and **future-friendly** — for everyone, everywhere.