Eliminate dead CSS code. CSS Diet scans your entire workspace to detect unused CSS classes across HTML, React, Vue, and Angular — safely, fast, and with smart dynamic detection.
Core Features
- Universal Scanning — Scans
.cssand.scssagainst every markup/code file in your project. - Editor Decorations — Unused classes are greyed out with strikethrough; possibly-used classes get a wavy yellow underline.
- Problems Panel — Warning diagnostics show you exactly where unused classes are defined.
- Smart Dynamic Resolution — Resolves variable values in template literals (e.g.,
const size = 'sm'+`btn-${size}`→.btn-smis USED). - Deep SCSS Support — fully resolves BEM nesting (
&__child) even across@mediaand other At-Rules. - Performant — mtime-based file caching and debounced auto-scan keeps it fast with zero impact on your IDE performance.
Framework Support
| Framework | Supported Syntax |
|---|---|
| Plain HTML | class="btn primary" |
| React (JSX/TSX) | className, Template Literals, Ternaries, Logical expressions, clsx/classnames |
| Vue SFC | class, :class (String, Object keys, Arrays with nested templates) |
| Angular | class, [class], [class.name], [ngClass] (Object/Array) |
| CSS/SCSS | Standard selectors, BEM nesting (&), Comma-lists, Media Queries |
Usage
- Open any project with CSS or SCSS files.
- The extension automatically scans on activation and on every file save (debounced).
- Manual Scan: Run
CSS Diet: Scan Projectfrom the Command Palette (Cmd+Shift+P). - Report: Check the CSS Diet output channel for a detailed per-file breakdown.
⚙️ Configuration
| Setting | Default | Description |
|---|---|---|
cssDiet.enableDynamicDetection |
true |
Resolve variables and patterns (e.g. btn-*) |
cssDiet.ignoredPatterns |
["node_modules","dist",".git"] |
Glob patterns to skip |
cssDiet.scanOnSave |
true |
Re-scan automatically when you save a file |
How it Works
- CSS/SCSS: Uses PostCSS +
postcss-scssto build a class map, resolving all nesting and BEM references. - JSX/TSX: Uses Babel Parser to track variable assignments and substitute them into template literals.
- Vue/Angular: Uses robust regex with backreference quote-matching to correctly capture nested quotes in bound properties.
- Engine: Compares definitions against concrete usages and fuzzy patterns to categorize every class as
USED,POSSIBLY_USED, orUNUSED.
Verification
This extension is verified against a suite of 25 standalone test scenarios. You can run the logic verification script yourself:
node tests/verify_logic.js
License
MIT © Guru Kishore