vtex-css-sanitizer-cli 1.0.1

package/README.md

@@ -0,0 +1,111 @@
+# VTEX CSS Sanitizer
+
+---
+
+[![npm version](https://badge.fury.io/js/vtex-deploy-helper.svg)](https://badge.fury.io/js/vtex-deploy-helper)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+vtex-css-sanitizer es una herramienta de línea de comandos (CLI) diseñada para limpiar y optimizar las hojas de estilo en proyectos de **VTEX IO**. Analiza tu base de código para encontrar clases CSS huérfanas y declaraciones `blockClass` sin uso, ayudándote a mantener tu proyecto limpio, performante y fácil de mantener.
+
+---
+
+### El Problema
+
+En el desarrollo diario con VTEX IO, es común que:
+
+1. **Las reglas CSS queden huérfanas:** Se elimina un `blockClass` de un archivo JSON, pero sus estilos asociados permanecen en los archivos `.css`.
+2. **Las `blockClass` queden sin uso:** Se declara un `blockClass` en un bloque, pero nunca se crea una regla CSS para estilizarlo.
+
+Estos restos de código aumentan el tamaño de los bundles y hacen que la base de código sea más difícil de navegar. Esta herramienta automatiza el proceso de detección y limpieza.
+
+### ✨ Características
+
+- **Análisis Bidireccional:** Encuentra tanto CSS sin `blockClass` como `blockClass` sin CSS.
+- **Limpieza Interactiva:** El comando `fix` te guía a través de cada regla candidata, dándote el control total para decidir qué se elimina y qué se conserva.
+- **Inteligente:** Reconoce las clases de estado dinámicas de VTEX (ej. `--isActive`) y solo valida el `blockClass` principal.
+- **Seguro:** Ignora automáticamente los archivos CSS de componentes React custom para evitar falsos positivos.
+- **Informes Detallados:** Genera informes en formato Markdown de cada análisis y sesión de limpieza para un registro histórico.
+
+### 📦 Instalación
+
+Para usar esta herramienta en cualquier proyecto de tu máquina, instálala globalmente:
+
+```bash
+npm install -g vtex-css-sanitizer
+```
+
+### 🚀 Uso
+
+Navega a la carpeta raíz de tu proyecto VTEX IO y ejecuta los siguientes comandos.
+
+#### 1. Analizar el Proyecto (`analyze`)
+
+Este comando escanea tu proyecto en modo de solo lectura y te muestra un informe en la consola, además de generar un archivo Markdown en la carpeta `.sanitizer-reports/`.
+
+```bash
+vtex-css-sanitizer analyze .
+```
+
+**Salida de ejemplo en consola:**
+
+```
+--- INFORME DE RESULTADOS ---
+
+🔴 Se encontraron 3 SUFIJOS CSS que no corresponden a ninguna 'blockClass' declarada:
+
+  - Sufijo: --main-header-old
+    └─ Usado en: styles/css/vtex.flex-layout.css (selector: ".flexRow--main-header-old")
+
+🟡 Se encontraron 2 'blockClass' declaradas que NO se usan en ningún archivo CSS:
+
+  - blockClass: "promo-banner-temporary"
+    └─ Declarada en: store/blocks/home/home.jsonc (en el bloque: "rich-text#promo-banner")
+
+--- ANÁLISIS COMPLETADO ---
+
+📄 Informe de análisis guardado en: .sanitizer-reports/analysis-report-2025-07-17.md
+```
+
+#### 2. Limpiar el Proyecto (`fix`)
+
+Este comando inicia un proceso interactivo que te guiará regla por regla para que decidas cuál eliminar.
+
+```bash
+vtex-css-sanitizer fix .
+```
+
+**Proceso interactivo de ejemplo:**
+
+```
+[ Progreso: Archivo 24 de 59 ]
+------------------------------------------------------------------
+Revisando Archivo: styles/css/vtex.breadcrumb.css
+Candidato 1 de 1
+------------------------------------------------------------------
+Se encontró la siguiente regla CSS que podría no estar en uso:
+
+:global(.vtex-breadcrumb-1-x-link--2) {
+  font-weight: 900;
+}
+? ¿Deseas eliminar esta regla CSS? › (Y/n)
+```
+
+- **(Y)** para `Sí` (elimina la regla).
+- **(n)** para `No` (conserva la regla).
+- **Ctrl+C** para cancelar el proceso.
+
+Al finalizar, se genera un informe detallado de las reglas eliminadas y conservadas en la carpeta `.sanitizer-reports/`.
+
+### 📄 Informes
+
+Todos los informes generados se guardan en una nueva carpeta `.sanitizer-reports` en la raíz de tu proyecto. Esta carpeta debería ser añadida a tu `.gitignore`.
+
+### 🤝 Contribuciones
+
+Las contribuciones, issues y peticiones de funcionalidades son bienvenidas.
+
+### 📜 Licencia
+
+Distribuido bajo la Licencia MIT. Ver `LICENSE` para más información.

package/dist/commands/analyze.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyzeCommand = analyzeCommand;
+const file_finder_1 = require("../utils/file-finder");
+const json_processor_1 = require("../utils/json-processor");
+const css_processor_1 = require("../utils/css-processor");
+const report_generator_1 = require("../utils/report-generator");
+const path_1 = __importDefault(require("path"));
+async function analyzeCommand(projectPath) {
+    console.log(`\n🔍 Iniciando análisis en: ${path_1.default.resolve(projectPath)}`);
+    // 1. Encontrar todos los archivos relevantes
+    const jsonFiles = (0, file_finder_1.findJsonFiles)(projectPath);
+    const cssFiles = (0, file_finder_1.findCssFiles)(projectPath);
+    if (jsonFiles.length === 0 || cssFiles.length === 0) {
+        console.error('❌ Error: No se encontraron archivos de store o styles/css. Asegúrate de que la ruta es correcta.');
+        return;
+    }
+    console.log(`   - Encontrados ${jsonFiles.length} archivos de bloques (.jsonc, .json)`);
+    console.log(`   - Encontrados ${cssFiles.length} archivos de estilos (.css)`);
+    // 2. Extraer la información
+    const declaredBlockClassesMap = await (0, json_processor_1.extractBlockClasses)(jsonFiles);
+    const usedCssSuffixesMap = await (0, css_processor_1.extractCssSuffixes)(cssFiles);
+    const declaredBlockClasses = new Set(declaredBlockClassesMap.keys());
+    const usedCssSuffixes = new Set(usedCssSuffixesMap.keys());
+    console.log(`\n📊 Análisis de datos:`);
+    console.log(`   - ${declaredBlockClasses.size} 'blockClass' únicas declaradas.`);
+    console.log(`   - ${usedCssSuffixes.size} sufijos de CSS únicos encontrados.`);
+    // 3. Comparar y encontrar discrepancias
+    // --- CSS sin uso ---
+    const unusedCss = [...usedCssSuffixes].filter(suffix => !declaredBlockClasses.has(suffix));
+    // --- blockClass sin uso ---
+    const unusedBlockClasses = [...declaredBlockClasses].filter(cls => !usedCssSuffixes.has(cls));
+    console.log('\n--- INFORME DE RESULTADOS ---');
+    if (unusedCss.length > 0) {
+        console.log(`\n🔴 Se encontraron ${unusedCss.length} SUFIJOS CSS que no corresponden a ninguna 'blockClass' declarada:`);
+        unusedCss.forEach(suffix => {
+            const locations = usedCssSuffixesMap.get(suffix) || [];
+            console.log(`\n  - Sufijo: --${suffix}`);
+            locations.slice(0, 3).forEach(loc => {
+                console.log(`    └─ Usado en: ${path_1.default.relative(projectPath, loc.filePath)} (selector: "${loc.selector}")`);
+            });
+        });
+        console.log("\n   Estos estilos podrían ser eliminados. Usa el comando 'fix' para limpiarlos.");
+    }
+    else {
+        console.log(`\n✅ ¡Genial! Todos los sufijos CSS utilizados corresponden a una 'blockClass' declarada.`);
+    }
+    console.log('\n---------------------------------');
+    if (unusedBlockClasses.length > 0) {
+        console.log(`\n🟡 Se encontraron ${unusedBlockClasses.length} 'blockClass' declaradas que NO se usan en ningún archivo CSS:`);
+        unusedBlockClasses.forEach(cls => {
+            const locations = declaredBlockClassesMap.get(cls) || [];
+            console.log(`\n  - blockClass: "${cls}"`);
+            locations.slice(0, 3).forEach(loc => {
+                console.log(`    └─ Declarada en: ${path_1.default.relative(projectPath, loc.filePath)} (en el bloque: "${loc.blockName}")`);
+            });
+        });
+        console.log("\n   Estas declaraciones son inútiles y pueden ser eliminadas de los archivos .jsonc/.json.");
+    }
+    else {
+        console.log(`\n✅ ¡Excelente! Todas las 'blockClass' declaradas tienen reglas CSS asociadas.`);
+    }
+    console.log('\n--- ANÁLISIS COMPLETADO ---\n');
+    try {
+        const reportPath = await (0, report_generator_1.generateAnalysisReport)(projectPath, unusedCss, unusedBlockClasses, usedCssSuffixesMap, declaredBlockClassesMap);
+        console.log(`\n📄 Informe de análisis guardado en: ${path_1.default.relative(projectPath, reportPath)}`);
+    }
+    catch (error) {
+        console.error('\n❌ Ocurrió un error al guardar el informe de análisis:', error);
+    }
+}

package/dist/commands/fix.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fixCommand = fixCommand;
+const file_finder_1 = require("../utils/file-finder");
+const json_processor_1 = require("../utils/json-processor");
+const css_processor_1 = require("../utils/css-processor");
+const path_1 = __importDefault(require("path"));
+const promises_1 = __importDefault(require("fs/promises"));
+const postcss_1 = __importDefault(require("postcss"));
+const prompts_1 = __importDefault(require("prompts"));
+const report_generator_1 = require("../utils/report-generator");
+async function fixCommand(projectPath) {
+    console.log(`\n🔧 Iniciando proceso de limpieza interactiva en: ${path_1.default.resolve(projectPath)}`);
+    // --- 1. Análisis (sin cambios) ---
+    const jsonFiles = (0, file_finder_1.findJsonFiles)(projectPath);
+    const cssFiles = (0, file_finder_1.findCssFiles)(projectPath);
+    const declaredBlockClassesMap = await (0, json_processor_1.extractBlockClasses)(jsonFiles);
+    const usedCssSuffixesMap = await (0, css_processor_1.extractCssSuffixes)(cssFiles);
+    const declaredBlockClasses = new Set(declaredBlockClassesMap.keys());
+    const usedCssSuffixes = new Set(usedCssSuffixesMap.keys());
+    const unusedSuffixes = new Set([...usedCssSuffixes].filter(suffix => !declaredBlockClasses.has(suffix)));
+    if (unusedSuffixes.size === 0) {
+        console.log('\n✅ ¡Genial! No se encontraron reglas CSS para eliminar. ¡El proyecto ya está limpio!');
+        return;
+    }
+    console.log(`\n🔎 Se han encontrado reglas CSS con sufijos potencialmente no utilizados. Vamos a revisarlas una por una.`);
+    console.log('------------------------------------------------------------------');
+    const deletedRules = [];
+    const keptRules = [];
+    let totalRulesRemoved = 0;
+    // --- 2. Procesamiento Interactivo con CONTADOR ---
+    const totalFiles = cssFiles.length;
+    for (let fileIndex = 0; fileIndex < totalFiles; fileIndex++) {
+        const filePath = cssFiles[fileIndex];
+        const originalContent = await promises_1.default.readFile(filePath, 'utf-8');
+        const root = postcss_1.default.parse(originalContent);
+        const candidates = (0, css_processor_1.identifyRulesForDeletion)(root, unusedSuffixes);
+        if (candidates.length === 0) {
+            continue;
+        }
+        let rulesRemovedInFile = 0;
+        for (let i = 0; i < candidates.length; i++) {
+            const rule = candidates[i];
+            const relativePath = path_1.default.relative(projectPath, filePath);
+            const ruleAsString = rule.toString();
+            console.clear();
+            // Se muestra el progreso general y el del archivo actual
+            console.log(`[ Progreso: Archivo ${fileIndex + 1} de ${totalFiles} ]`);
+            console.log(`------------------------------------------------------------------`);
+            console.log(`Revisando Archivo: ${relativePath}`);
+            console.log(`Candidato ${i + 1} de ${candidates.length}`);
+            console.log('------------------------------------------------------------------');
+            console.log('Se encontró la siguiente regla CSS que podría no estar en uso:');
+            console.log('\n\x1b[33m%s\x1b[0m', ruleAsString);
+            const response = await (0, prompts_1.default)({
+                type: 'confirm',
+                name: 'shouldDelete',
+                message: '¿Deseas eliminar esta regla CSS?',
+                initial: true
+            });
+            if (response.shouldDelete === undefined) {
+                console.log('\n🛑 Proceso de limpieza cancelado por el usuario.');
+                // Antes de salir, generamos el informe con lo que se haya hecho hasta ahora
+                if (deletedRules.length > 0 || keptRules.length > 0) {
+                    await (0, report_generator_1.generateFixReport)(projectPath, deletedRules, keptRules);
+                    console.log(`\n📄 Informe parcial de limpieza guardado.`);
+                }
+                return;
+            }
+            if (response.shouldDelete) {
+                rule.remove();
+                rulesRemovedInFile++;
+                deletedRules.push({ rule: ruleAsString, filePath });
+                console.log('\x1b[31m%s\x1b[0m', '🗑️  Regla eliminada.');
+            }
+            else {
+                keptRules.push({ rule: ruleAsString, filePath });
+                console.log('\x1b[32m%s\x1b[0m', '👍  Regla conservada.');
+            }
+            console.log('------------------------------------------------------------------');
+        }
+        if (rulesRemovedInFile > 0) {
+            const newContent = root.toString();
+            await promises_1.default.writeFile(filePath, newContent, 'utf-8');
+            console.log(`\n💾 Se guardaron los cambios en ${path_1.default.relative(projectPath, filePath)}. Se eliminaron ${rulesRemovedInFile} reglas.`);
+            totalRulesRemoved += rulesRemovedInFile;
+            await (0, prompts_1.default)({ type: 'invisible', name: 'continue', message: 'Presiona Enter para continuar con el siguiente archivo...' });
+        }
+    }
+    console.clear();
+    if (totalRulesRemoved > 0) {
+        console.log(`\n✅ Proceso completado. Se eliminaron un total de ${totalRulesRemoved} reglas CSS.`);
+    }
+    else {
+        console.log(`\n✅ Proceso completado. No se realizó ninguna eliminación.`);
+    }
+    if (deletedRules.length > 0 || keptRules.length > 0) {
+        try {
+            const reportPath = await (0, report_generator_1.generateFixReport)(projectPath, deletedRules, keptRules);
+            console.log(`\n📄 Informe de limpieza guardado en: ${path_1.default.relative(projectPath, reportPath)}`);
+        }
+        catch (error) {
+            console.error('\n❌ Ocurrió un error al guardar el informe de limpieza:', error);
+        }
+    }
+}

package/dist/index.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const analyze_1 = require("./commands/analyze");
+const fix_1 = require("./commands/fix");
+const package_json_1 = __importDefault(require("../package.json"));
+const program = new commander_1.Command();
+program
+    .name('vtex-css-sanitizer')
+    .description('Una CLI para limpiar clases CSS no usadas en proyectos VTEX IO')
+    .version(package_json_1.default.version);
+program
+    .command('analyze')
+    .description('Analiza el proyecto y muestra las clases CSS y blockClass no utilizadas')
+    .argument('<path>', 'Ruta al directorio raíz del proyecto VTEX (ej: .)')
+    .action(analyze_1.analyzeCommand);
+program
+    .command('fix')
+    .description('Elimina las reglas CSS no utilizadas de los archivos')
+    .argument('<path>', 'Ruta al directorio raíz del proyecto VTEX (ej: .)')
+    .action(fix_1.fixCommand);
+program.parse(process.argv);

package/dist/utils/css-processor.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractCssSuffixes = extractCssSuffixes;
+exports.identifyRulesForDeletion = identifyRulesForDeletion;
+const promises_1 = __importDefault(require("fs/promises"));
+const postcss_1 = __importDefault(require("postcss"));
+const VTEX_CLASS_REGEX = /\.([\w-]+(?:--[\w-]+)+)/g;
+function getPrimarySuffix(vtexClassName) {
+    const parts = vtexClassName.split('--');
+    if (parts.length > 1) {
+        return parts[1];
+    }
+    return null;
+}
+async function extractCssSuffixes(cssFiles) {
+    const usedSuffixes = new Map();
+    for (const filePath of cssFiles) {
+        try {
+            const content = await promises_1.default.readFile(filePath, 'utf-8');
+            const root = postcss_1.default.parse(content);
+            root.walkRules(rule => {
+                rule.selectors.forEach(selector => {
+                    const matches = [...selector.matchAll(VTEX_CLASS_REGEX)];
+                    for (const match of matches) {
+                        const fullClassName = match[0].substring(1);
+                        const primarySuffix = getPrimarySuffix(fullClassName);
+                        if (primarySuffix) {
+                            const locations = usedSuffixes.get(primarySuffix) || [];
+                            locations.push({ filePath, selector });
+                            usedSuffixes.set(primarySuffix, locations);
+                        }
+                    }
+                });
+            });
+        }
+        catch (error) {
+            console.error(`❌ Error procesando el archivo CSS ${filePath}:`, error);
+        }
+    }
+    return usedSuffixes;
+}
+/**
+ * Identifica todas las reglas de CSS que son candidatas a ser eliminadas.
+ * No las elimina, solo las devuelve para su procesamiento interactivo.
+ */
+function identifyRulesForDeletion(root, unusedSuffixes) {
+    const candidates = [];
+    root.walkRules(rule => {
+        const ruleSelectors = rule.selectors;
+        let allSelectorsAreUnused = ruleSelectors.length > 0;
+        for (const selector of ruleSelectors) {
+            const matches = [...selector.matchAll(VTEX_CLASS_REGEX)];
+            if (matches.length === 0) {
+                allSelectorsAreUnused = false;
+                break;
+            }
+            const hasAtLeastOneUsedSuffix = matches.some(match => {
+                const primarySuffix = getPrimarySuffix(match[0].substring(1));
+                return primarySuffix && !unusedSuffixes.has(primarySuffix);
+            });
+            if (hasAtLeastOneUsedSuffix) {
+                allSelectorsAreUnused = false;
+                break;
+            }
+        }
+        if (allSelectorsAreUnused) {
+            candidates.push(rule);
+        }
+    });
+    return candidates;
+}

package/dist/utils/file-finder.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findJsonFiles = findJsonFiles;
+exports.findCssFiles = findCssFiles;
+const glob_1 = require("glob");
+const path_1 = __importDefault(require("path"));
+/**
+ * Encuentra todos los archivos .json y .jsonc en la carpeta /store.
+ */
+function findJsonFiles(projectPath) {
+    const storePath = path_1.default.join(projectPath, 'store');
+    return (0, glob_1.sync)(`${storePath}/**/*.{json,jsonc}`);
+}
+/**
+ * Encuentra todos los archivos .css DE APPS NATIVAS (vtex.*) en la carpeta /styles/css.
+ * Omite los archivos de CSS de componentes custom para evitar falsos positivos.
+ */
+function findCssFiles(projectPath) {
+    const stylesPath = path_1.default.join(projectPath, 'styles/css');
+    const allCssFiles = (0, glob_1.sync)(`${stylesPath}/**/*.css`);
+    const nativeVtexCssFiles = allCssFiles.filter(filePath => {
+        const fileName = path_1.default.basename(filePath);
+        return fileName.startsWith('vtex.');
+    });
+    return nativeVtexCssFiles;
+}

package/dist/utils/json-processor.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractBlockClasses = extractBlockClasses;
+const promises_1 = __importDefault(require("fs/promises"));
+const jsonc_parser_1 = require("jsonc-parser");
+/**
+ * Recorre todos los archivos JSON/JSONC para extraer las declaraciones de `blockClass`.
+ * @returns Un Map donde la clave es el valor de blockClass y el valor es dónde se encontró.
+ */
+async function extractBlockClasses(jsonFiles) {
+    const declaredClasses = new Map();
+    for (const filePath of jsonFiles) {
+        try {
+            const content = await promises_1.default.readFile(filePath, 'utf-8');
+            const parsedJson = (0, jsonc_parser_1.parse)(content);
+            if (typeof parsedJson !== 'object' || parsedJson === null)
+                continue;
+            for (const blockName in parsedJson) {
+                if (!Object.prototype.hasOwnProperty.call(parsedJson, blockName))
+                    continue;
+                const blockDef = parsedJson[blockName];
+                const blockClassValue = blockDef?.props?.blockClass;
+                let classesFound = [];
+                if (typeof blockClassValue === 'string') {
+                    classesFound = blockClassValue.split(' ').filter(Boolean);
+                }
+                else if (Array.isArray(blockClassValue)) {
+                    classesFound = blockClassValue.filter(cls => typeof cls === 'string' && cls.length > 0);
+                }
+                if (classesFound.length > 0) {
+                    for (const cls of classesFound) {
+                        const locations = declaredClasses.get(cls) || [];
+                        locations.push({ filePath, blockName });
+                        declaredClasses.set(cls, locations);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error(`❌ Error procesando el archivo JSON ${filePath}:`, error);
+        }
+    }
+    return declaredClasses;
+}

package/dist/utils/report-generator.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAnalysisReport = generateAnalysisReport;
+exports.generateFixReport = generateFixReport;
+const promises_1 = __importDefault(require("fs/promises"));
+const path_1 = __importDefault(require("path"));
+// --- Helper para crear el directorio de informes ---
+async function ensureReportDirectory(projectPath) {
+    const reportDir = path_1.default.join(projectPath, '.sanitizer-reports');
+    await promises_1.default.mkdir(reportDir, { recursive: true }); // recursive: true evita errores si el dir ya existe
+    return reportDir;
+}
+// --- Helper para obtener la fecha en formato YYYY-MM-DD ---
+function getFormattedDate() {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+// --- Generador para el informe de 'analyze' ---
+async function generateAnalysisReport(projectPath, unusedCss, unusedBlockClasses, usedCssSuffixesMap, declaredBlockClassesMap) {
+    const reportDir = await ensureReportDirectory(projectPath);
+    const reportPath = path_1.default.join(reportDir, `analysis-report-${getFormattedDate()}.md`);
+    let markdownContent = `# ✅ Informe de Análisis de CSS - ${getFormattedDate()}\n\n`;
+    markdownContent += `Este informe detalla las clases CSS y declaraciones \`blockClass\` que podrían estar sin uso en el proyecto.\n\n`;
+    markdownContent += `--- \n\n`;
+    // Sección 1: CSS sin uso
+    markdownContent += `## 🔴 Sufijos CSS sin \`blockClass\` correspondiente (${unusedCss.length} encontrados)\n\n`;
+    if (unusedCss.length > 0) {
+        unusedCss.forEach(suffix => {
+            markdownContent += `### \`--${suffix}\`\n\n`;
+            const locations = usedCssSuffixesMap.get(suffix) || [];
+            locations.slice(0, 5).forEach(loc => {
+                markdownContent += `*   **Usado en:** \`${path_1.default.relative(projectPath, loc.filePath)}\`\n`;
+                markdownContent += `*   **Selector:** \`${loc.selector}\`\n\n`;
+            });
+        });
+    }
+    else {
+        markdownContent += `¡Excelente! No se encontraron sufijos CSS sin uso.\n\n`;
+    }
+    markdownContent += `--- \n\n`;
+    // Sección 2: blockClass sin uso
+    markdownContent += `## 🟡 \`blockClass\` sin estilos CSS asociados (${unusedBlockClasses.length} encontrados)\n\n`;
+    if (unusedBlockClasses.length > 0) {
+        unusedBlockClasses.forEach(cls => {
+            markdownContent += `### \`"${cls}"\`\n\n`;
+            const locations = declaredBlockClassesMap.get(cls) || [];
+            locations.slice(0, 5).forEach(loc => {
+                markdownContent += `*   **Declarado en:** \`${path_1.default.relative(projectPath, loc.filePath)}\`\n`;
+                markdownContent += `*   **Bloque:** \`${loc.blockName}\`\n\n`;
+            });
+        });
+    }
+    else {
+        markdownContent += `¡Genial! Todas las \`blockClass\` declaradas se están utilizando.\n\n`;
+    }
+    await promises_1.default.writeFile(reportPath, markdownContent);
+    return reportPath;
+}
+async function generateFixReport(projectPath, deletedRules, keptRules) {
+    const reportDir = await ensureReportDirectory(projectPath);
+    const reportPath = path_1.default.join(reportDir, `fix-report-${getFormattedDate()}.md`);
+    let markdownContent = `# 🛠️ Informe de Limpieza de CSS - ${getFormattedDate()}\n\n`;
+    markdownContent += `Este informe detalla las acciones realizadas durante el proceso de limpieza interactiva.\n\n`;
+    markdownContent += `--- \n\n`;
+    // Sección 1: Reglas eliminadas
+    markdownContent += `## 🗑️ Reglas Eliminadas (${deletedRules.length})\n\n`;
+    if (deletedRules.length > 0) {
+        deletedRules.forEach(entry => {
+            markdownContent += `*   **Archivo:** \`${path_1.default.relative(projectPath, entry.filePath)}\`\n`;
+            markdownContent += `    \`\`\`css\n    ${entry.rule}\n    \`\`\`\n\n`;
+        });
+    }
+    else {
+        markdownContent += `No se eliminó ninguna regla durante esta sesión.\n\n`;
+    }
+    markdownContent += `--- \n\n`;
+    // Sección 2: Reglas conservadas
+    markdownContent += `## 👍 Reglas Conservadas por el Usuario (${keptRules.length})\n\n`;
+    if (keptRules.length > 0) {
+        keptRules.forEach(entry => {
+            markdownContent += `*   **Archivo:** \`${path_1.default.relative(projectPath, entry.filePath)}\`\n`;
+            markdownContent += `    \`\`\`css\n    ${entry.rule}\n    \`\`\`\n\n`;
+        });
+    }
+    else {
+        markdownContent += `No se conservó ninguna regla candidata durante esta sesión.\n\n`;
+    }
+    await promises_1.default.writeFile(reportPath, markdownContent);
+    return reportPath;
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vtex-css-sanitizer-cli",
+  "version": "1.0.1",
+  "description": "Herramienta CLI para eliminar CSS y blockClass no utilizados en proyectos VTEX IO.",
+  "main": "dist/index.js",
+  "bin": {
+    "vtex-css-sanitizer": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "ts-node src/index.ts",
+    "dev": "npm run build && node dist/index.js"
+  },
+  "keywords": [
+    "vtex",
+    "vtexio",
+    "css",
+    "cleanup"
+  ],
+  "author": "Elias Daniel Emanuele",
+  "license": "ISC",
+  "dependencies": {
+    "@types/glob": "^8.1.0",
+    "commander": "^11.0.0",
+    "glob": "^8.1.0",
+    "jsonc-parser": "^3.2.0",
+    "postcss": "^8.4.29",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.7",
+    "@types/prompts": "^2.4.9",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
+  }
+}