A high-performance Visual Studio Code extension that automatically detects and highlights unused CSS/SCSS/SASS selectors across your entire project. It's built to be fast, accurate, and framework-agnostic.

CSS Analyzer Dashboard

📸 Screenshots & Previews

Dashboard & Coverage	Reference CodeLens	Unused Coverage Details

🌟 Pro Features

Interactive Status Dashboard: A full-featured webview dashboard displaying your style coverage, total/used/unused selectors, an SVG donut chart, and a detailed interactive table with filtering and selector sorting by confidence scores.
Smart Heuristics Confidence Score: Every selector is evaluated using an advanced confidence algorithm (0-100%) to calculate the probability of being unused, keeping false positives to an absolute minimum.
Real-time Detection: Analyzes your code as you type, with smart debouncing to keep the editor smooth.
Smart Hover Details: Hover over any CSS class, ID, or HTML tag to see exactly which files are using it and how many times.
HTML Tag Analysis: Automatically detects and counts references for HTML tag selectors (e.g. body, div, span, p) in both templates and standard DOM APIs.
Quick Fixes (Code Actions): See a selector you want the detector to ignore? Click the 💡 icon (Quick Fix) to add a /* css-unused-ignore */ comment. You can even choose to ignore all unused selectors in an entire file with one click!
Sidebar Explorer Panel: A dedicated Tree View in your VS Code sidebar groups all unused CSS by file. Click a selector to jump instantly to that line of code.
Interactive Status Bar: A discrete indicator in the bottom-right corner shows the health of your CSS at a glance.
Visual Highlights: Unused CSS blocks are subtly highlighted so you can easily spot and remove dead code.
Reference CodeLens: Displays the exact number of times a CSS class, ID, or HTML tag is used right above the selector, with an icon matching your configured diagnostic severity.
Results Exporting: Easily export your analysis reports straight to a JSON file for CI/CD tracking or deep-dive code reviews.
Bilingual IDE Descriptions: All configuration settings now display side-by-side English/Spanish ([EN] ... / [ES] ...) descriptions directly in the settings panel to guarantee localization works perfectly.

🚀 Supported Frameworks & Languages

We scan everything you throw at it. The extension analyzes your CSS/SCSS files and extracts the classes/IDs/tags, then searches for usages in your codebase. It uses specialized, modular high-performance extractors for:

HTML & Templates: <tag-name class="..." id="...">
React / JSX / TSX: className="...", className={'...'}
Vue.js: :class="{...}", v-bind:class="..."
Angular: [class]="...", [ngClass]="{'...': expr}"
Svelte: class:name directives
Astro: class:list={[...]}
Pug / Jade: .class-name
Vanilla JS DOM API: classList.add(), querySelector(), getElementById(), getElementsByTagName(), createElement()
CSS-in-JS: css\.class { }`` inside code files
Inline Styles: <style> blocks inside .vue, .svelte, .astro, etc.

⚙️ Configuration

Open your VS Code Settings (UI) and search for cssUnusedDetector to access these options:

Appearance & Heuristics

Highlight Color (cssUnusedDetector.highlightColor): Customize the background color of unused CSS blocks using a native color picker. Default is #ff000026.
Enable Highlight (cssUnusedDetector.highlightEnabled): Turn the background highlighter on/off.
Enable CodeLens (cssUnusedDetector.codeLensEnabled): Turn the reference counter on/off.
Enable Diagnostics (cssUnusedDetector.diagnosticsEnabled): Show warnings/errors in the Problems panel.
Diagnostic Severity (cssUnusedDetector.diagnosticSeverity): Choose between error, warning, information, or hint. The CodeLens icon will adapt to your choice.
Confidence Threshold (cssUnusedDetector.confidenceThreshold): The minimum confidence percentage (0-100) required to consider a selector as a match. Low probability selectors will be highlighted as unused. Default is 50.

Performance & Limits

Concurrency Limit (cssUnusedDetector.concurrencyLimit): Configure the number of files to read and parse concurrently to optimize performance. Default is 8.
Max File Size MB (cssUnusedDetector.maxFileSizeMB): Maximum file size in megabytes to scan for references to avoid memory leak or high CPU usage. Default is 1.

Analysis Triggers

Analyze on Save (cssUnusedDetector.analyzeOnSave): Run analysis when a file is saved.
Analyze on Type (cssUnusedDetector.analyzeOnType): Run analysis while typing.
Debounce Delay (cssUnusedDetector.debounceDelay): Adjust the delay (in ms) before the auto-analysis triggers after you stop typing. Default is 800.

Scan Options

Scan Tags (cssUnusedDetector.scanTags): Enable or disable scanning and checking for HTML/XML tag name selectors (like body, div, span). Default is true.
Scan DOM API (cssUnusedDetector.scanDomApi): Scan for vanilla JavaScript DOM API usage (classList, querySelector, etc.).
Scan Style Blocks (cssUnusedDetector.scanStyleBlocks): Extract selectors from <style> blocks in template files.
Scan CSS-in-JS (cssUnusedDetector.scanCssInJs): Scan for css\.class { }`` template literal usages.

Included / Excluded Files

Include Extensions (cssUnusedDetector.includeFileExtensions): Specify which file extensions to scan for class/id/tag usage.
Exclude Folders (cssUnusedDetector.excludeFolders): Folders to ignore (e.g. node_modules, dist, .git).
Exclude Files (cssUnusedDetector.excludeFiles): Specific glob patterns to ignore (e.g. **/*.min.css).

🛠 Commands

You can access these via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

CSS: Detect unused selectors: Manually trigger a full workspace analysis.
CSS: Open analysis panel: Open the sidebar explorer to review unused selectors.
CSS: Open extension settings: Quickly open the configuration panel.
CSS: Export analysis results: Export detailed selector usage metrics directly to a file.

CSS/SCSS Unused Detector (Español)

Una extensión de Visual Studio Code de alto rendimiento que detecta y resalta automáticamente selectores CSS/SCSS/SASS no utilizados en todo tu proyecto. Diseñada para ser rápida, precisa y compatible con cualquier framework.

CSS Analyzer Dashboard

📸 Capturas de Pantalla y Previsualizaciones

Dashboard e Indicador de Cobertura	CodeLens de Referencias	Detalle de Cobertura No Usada

🌟 Características Pro

Dashboard de Estado Interactivo: Un dashboard webview completo que muestra la cobertura de estilos, selectores totales/usados/no usados, un gráfico de donut SVG interactivo y una tabla detallada con ordenamiento por índice de confianza.
Algoritmo de Confianza Avanzado: Cada selector es evaluado por un algoritmo heurístico de confianza (0-100%) para calcular la probabilidad real de no estar siendo utilizado, minimizando falsos positivos.
Detección en tiempo real: Analiza tu código mientras escribes, con un retardo inteligente (debouncing) para mantener el editor fluido.
Detalles en hover inteligente: Pasa el cursor sobre cualquier clase CSS, ID o etiqueta HTML para ver exactamente qué archivos la están usando y cuántas veces.
Análisis de etiquetas HTML: Detecta y cuenta automáticamente las referencias para selectores de etiquetas HTML (ej. body, div, span, p) tanto en plantillas como en APIs del DOM estándar.
Soluciones rápidas (Code Actions): ¿Ves un selector que quieres ignorar? Haz clic en el icono 💡 (Quick Fix) para añadir un comentario /* css-unused-ignore */. ¡Incluso puedes ignorar todos los selectores no utilizados en un archivo entero con un solo clic!
Panel explorador lateral: Una vista de árbol dedicada en la barra lateral de VS Code agrupa todo el CSS no utilizado por archivo. Haz clic en un selector para saltar instantáneamente a esa línea de código.
Barra de estado interactiva: Un indicador discreto en la esquina inferior derecha muestra el estado de salud de tu CSS de un vistazo.
Resaltado visual: Los bloques de CSS no utilizados se resaltan sutilmente para que puedas identificar y eliminar fácilmente el código muerto.
CodeLens de Referencias: Muestra el número exacto de veces que se utiliza una clase CSS, ID o etiqueta HTML justo encima del selector, con un icono que se adapta a la gravedad de diagnóstico configurada.
Exportación de Resultados: Exporta los reportes detallados directamente a un archivo JSON para auditorías o integraciones de CI/CD.
Descripciones bilingües en el IDE: Todos los ajustes de configuración ahora muestran descripciones simultáneas en inglés y español ([EN] ... / [ES] ...) directamente en el panel de configuración para garantizar que la localización funcione perfectamente.

🚀 Frameworks y lenguajes soportados

Escaneamos todo lo que le pongas delante. La extensión utiliza extractores modulares de alto rendimiento diseñados específicamente para:

HTML y Plantillas: <tag-name class="..." id="...">
React / JSX / TSX: className="...", className={'...'}
Vue.js: :class="{...}", v-bind:class="..."
Angular: [class]="...", [ngClass]="{'...': expr}"
Svelte: directivas class:name
Astro: class:list={[...]}
Pug / Jade: .class-name
API DOM JS Estándar: classList.add(), querySelector(), getElementById(), getElementsByTagName(), createElement()
CSS-in-JS: css\.class { }`` dentro de archivos de código
Estilos en línea: bloques <style> dentro de .vue, .svelte, .astro, etc.

⚙️ Configuración

Abre los Ajustes de VS Code (UI) y busca cssUnusedDetector para acceder a estas opciones:

Apariencia y Heurística

Color de resaltado (cssUnusedDetector.highlightColor): Personaliza el color de fondo de los bloques CSS no utilizados mediante un selector de color nativo. Por defecto es #ff000026.
Activar resaltado (cssUnusedDetector.highlightEnabled): Activa o desactiva el resaltado de fondo.
Activar CodeLens (cssUnusedDetector.codeLensEnabled): Activa o desactiva el contador de referencias.
Activar diagnósticos (cssUnusedDetector.diagnosticsEnabled): Muestra advertencias/errores en el panel de Problemas.
Severidad del diagnóstico (cssUnusedDetector.diagnosticSeverity): Elige entre error, warning, information o hint. El icono de CodeLens se adaptará a tu elección.
Umbral de Confianza (cssUnusedDetector.confidenceThreshold): Puntuación de confianza mínima (0-100) para considerar válida una coincidencia probable. Los diagnósticos solo se mostrarán para selectores por debajo de este umbral. Por defecto es 50.

Rendimiento y Límites

Límite de Concurrencia (cssUnusedDetector.concurrencyLimit): Número de archivos que se leerán y procesarán en paralelo para optimizar la velocidad. Por defecto es 8.
Tamaño Máximo de Archivo MB (cssUnusedDetector.maxFileSizeMB): Tamaño de archivo máximo en megabytes para escanear referencias con el fin de evitar problemas de memoria o uso de CPU excesivo. Por defecto es 1.

Disparadores de análisis

Analizar al guardar (cssUnusedDetector.analyzeOnSave): Ejecuta el análisis al guardar un archivo.
Analizar al escribir (cssUnusedDetector.analyzeOnType): Ejecuta el análisis mientras escribes.
Retraso de rebote (cssUnusedDetector.debounceDelay): Ajusta el retardo (en ms) antes de que se active el análisis automático tras dejar de escribir. Por defecto es 800.

Opciones de escaneo

Escanear etiquetas (cssUnusedDetector.scanTags): Activa o desactiva el escaneo y comprobación de selectores de nombres de etiquetas HTML/XML (como body, div, span). Por defecto es true.
Escanear API DOM (cssUnusedDetector.scanDomApi): Escanea el uso de la API DOM de JavaScript estándar (classList, querySelector, etc.).
Escanear bloques de estilo (cssUnusedDetector.scanStyleBlocks): Extrae selectores de los bloques <style> en archivos de plantilla.
Escanear CSS-in-JS (cssUnusedDetector.scanCssInJs): Escanea usos de plantillas de texto de CSS-in-JS css\.class { }``.

Archivos incluidos / excluidos

Incluir extensiones (cssUnusedDetector.includeFileExtensions): Especifica qué extensiones de archivo escanear para buscar usos de clases/IDs/etiquetas.
Excluir carpetas (cssUnusedDetector.excludeFolders): Carpetas a ignorar (ej. node_modules, dist, .git).
Excluir archivos (cssUnusedDetector.excludeFiles): Patrones de glob específicos a ignorar (ej. **/*.min.css).

🛠 Comandos

Puedes acceder a ellos a través de la Paleta de Comandos (Ctrl+Shift+P o Cmd+Shift+P):

CSS: Detectar selectores no utilizados: Activa manualmente un análisis completo del workspace.
CSS: Abrir panel de análisis: Abre el explorador lateral para revisar los selectores no utilizados.
CSS: Abrir ajustes de la extensión: Abre rápidamente el panel de configuración.
CSS: Exportar resultados del análisis: Exporta las métricas de uso de selectores directamente a un archivo.

Made with ❤️ by alex-web.dev

CSS/SCSS Unused Detector