vtex-css-sanitizer-cli 1.0.3 → 1.0.7

package/.github/workflows/release.yml

@@ -0,0 +1,79 @@
+# Workflow: Build & Release
+# Se dispara cuando se hace push de un tag con formato v*.*.*
+# Compila la GUI para Windows y Linux y crea un GitHub Release con los binarios.
+
+name: Build & Release
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        include:
+          - os: ubuntu-latest
+            platform: linux
+            build_script: build:linux
+          - os: windows-latest
+            platform: win
+            build_script: build:win
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        working-directory: gui
+        run: yarn install --frozen-lockfile
+
+      - name: Sync version from tag
+        working-directory: gui
+        run: npm version "${GITHUB_REF_NAME#v}" --no-git-tag-version
+
+      - name: Build & Package
+        working-directory: gui
+        run: yarn ${{ matrix.build_script }}
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: release-${{ matrix.platform }}
+          path: |
+            gui/release/*.exe
+            gui/release/*.AppImage
+          if-no-files-found: warn
+
+  release:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts
+          merge-multiple: true
+
+      - name: List artifacts
+        run: find artifacts -type f | head -20
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          generate_release_notes: true
+          files: |
+            artifacts/**/*.exe
+            artifacts/**/*.AppImage

package/PUBLISHING.md

@@ -0,0 +1,68 @@
+# Guía de Publicación y Releases
+
+Este repositorio actúa como un monorepo que contiene 3 proyectos independientes que conviven juntos. Cada uno tiene su propio flujo de publicación y distribución:
+
+1. **CLI (Línea de comandos)**: Publicado en el registro de `npm`.
+2. **GUI (Aplicación de Escritorio)**: Compilado y publicado en GitHub Releases a través de GitHub Actions.
+
+A continuación se detalla cómo trabajar con cada uno de ellos cuando hay cambios.
+
+
+## 1. CLI (NPM Package)
+
+La versión de línea de comandos se encuentra en la raíz del proyecto (`/src`) y se distribuye a través del registro de `npm` (`vtex-css-sanitizer-cli`).
+
+**Cómo publicar una nueva versión:**
+
+1. Realiza tus cambios o correcciones en la carpeta `/src`.
+2. Asegúrate de compilar el código TypeScript:
+   ```bash
+   npm run build
+   ```
+3. Actualiza la versión en el `package.json` de la raíz del proyecto. Puedes usar el comando de npm para que te genere el commit y el tag automáticamente:
+   ```bash
+   npm version patch # Para fixes menores (ej: 1.0.4 -> 1.0.5)
+   npm version minor # Para nuevas funciones (ej: 1.0.4 -> 1.1.0)
+   npm version major # Para cambios que rompen compatibilidad (ej: 1.0.4 -> 2.0.0)
+   ```
+4. Publica el paquete en npm (requiere estar logueado previamente con `npm login` si no lo estás):
+   ```bash
+   npm publish
+   ```
+5. Empuja los commits y tags generados al repositorio remoto:
+   ```bash
+   git push origin main --follow-tags
+   ```
+
+---
+
+## 2. GUI (Aplicación de Escritorio)
+
+La aplicación con interfaz gráfica y Electron se encuentra completamente autocontenida en la carpeta `/gui`. Las actualizaciones de esta aplicación se distribuyen a través de la pestaña de **Releases** en GitHub.
+
+Los botones de "Descargar para Windows" o "Descargar para Linux" en la Landing Page siempre apuntan al tag especial genérico de `/releases/latest` en GitHub, garantizando que los usuarios siempre descarguen la versión más reciente publicada.
+
+**Cómo generar y publicar una nueva versión de la GUI:**
+
+1. Realiza y prueba tus cambios dentro de la carpeta `/gui`.
+2. Haz commit y push de los cambios a la rama `main`:
+   ```bash
+   git add gui/
+   git commit -m "feat(gui): nueva funcionalidad"
+   git push origin main
+   ```
+3. **Dispara la creación del Release en GitHub creando un tag Git:**
+   Debes crear un tag en Git que comience con la letra `v` apuntando a la versión que quieres publicar:
+   ```bash
+   git tag v1.0.7
+   git push origin v1.0.7
+   ```
+   *(También puedes empujar tus tags de una vez usando `git push origin main --tags`)*
+
+**¿Qué ocurre después de pushear el tag en Git?**
+
+1. GitHub intercepta el tag `v*.*.*` y automáticamente arranca la [GitHub Action programada](.github/workflows/release.yml).
+2. La Action levanta dos entornos virtuales en los servidores de GitHub (uno con Windows y otro con Ubuntu).
+3. Automáticamente ingresa a la carpeta `/gui`, instala dependencias, **sincroniza la versión del tag en `gui/package.json`**, compila el framework y genera los instaladores `.exe` (NSIS para Windows) y `.AppImage` (para Linux).
+4. La Action crea la entrada en la sección **Releases** de este repositorio y sube ambos binarios como *assets*.
+5. A partir de ese momento, los botones de la Landing Page empezarán a servir automáticamente esta nueva versión.

package/README.md

@@ -7,7 +7,7 @@
 
 ---
 
-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.
+vtex-css-sanitizer es una herramienta 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. Disponible como **Aplicación de Escritorio (GUI)** o como herramienta de **Línea de Comandos (CLI)**.
 
 ---
 
@@ -23,22 +23,35 @@ Estos restos de código aumentan el tamaño de los bundles y hacen que la base d
 ### ✨ 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.
+- **Doble Interfaz:** Utilizalo desde tu terminal preferida (CLI) o a través de nuestra moderna Aplicación de Escritorio (GUI).
+- **Limpieza Interactiva:** El proceso guiado te permite decidir qué se elimina y qué se conserva regla por regla.
 - **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
+### 📦 Descargas e Instalación
 
-Para usar esta herramienta en cualquier proyecto de tu máquina, instálala globalmente:
+Elegí la versión que mejor se adapte a tu necesidad:
+
+#### 1. Versión GUI (Aplicación de Escritorio)
+
+Interfaz visual intuitiva para analizar y limpiar tu proyecto sin tocar la terminal.
+- **[Descargar para Windows (.exe)](https://github.com/emanueleelias/vtex-css-sanitizer/releases/latest)**
+- **[Descargar para Linux (.AppImage)](https://github.com/emanueleelias/vtex-css-sanitizer/releases/latest)**
+
+*(Los binarios se encuentran en la sección "Assets" de cada Release).*
+
+#### 2. Versión CLI (Línea de Comandos)
+
+Ideal para integrar en workflows de desarrollo. Para usar la herramienta en cualquier proyecto local, instálala globalmente vía npm:
 
 ```bash
 npm install -g vtex-css-sanitizer-cli
 ```
 
-### 🚀 Uso
+### 🚀 Uso (Versión CLI)
 
-Navega a la carpeta raíz de tu proyecto VTEX IO y ejecuta los siguientes comandos.
+Navega a la carpeta raíz de tu proyecto VTEX IO y ejecuta los siguientes comandos. *(Nota: La versión GUI proporciona botones visuales equivalentes a estos comandos).*
 
 #### 1. Analizar el Proyecto (`analyze`)
 

package/dist/commands/fix.js

@@ -67,10 +67,9 @@ async function fixCommand(projectPath) {
             if (response.shouldDelete === undefined) {
                 console.log('\n🛑 Proceso de limpieza cancelado por el usuario.');
                 userCancelled = true;
-                break; // Sale del bucle de reglas para este archivo
+                break;
             }
             if (response.shouldDelete) {
-                // Se opera sobre la regla, pero el reporte se guarda temporalmente
                 fileDeletedRules.push({ rule: ruleAsString, filePath });
                 rule.remove();
                 rulesRemovedInFile++;
@@ -82,7 +81,6 @@ async function fixCommand(projectPath) {
             }
             console.log('------------------------------------------------------------------');
         }
-        // Si el usuario canceló, se detiene todo el proceso.
         if (userCancelled) {
             if (deletedRules.length > 0 || keptRules.length > 0) {
                 await (0, report_generator_1.generateFixReport)(projectPath, deletedRules, keptRules);
@@ -90,7 +88,6 @@ async function fixCommand(projectPath) {
             }
             return;
         }
-        // Si se completó el archivo y hubo cambios, se escriben en el disco.
         if (rulesRemovedInFile > 0) {
             const newContent = root.toString();
             await promises_1.default.writeFile(filePath, newContent, 'utf-8');
@@ -98,7 +95,6 @@ async function fixCommand(projectPath) {
             totalRulesRemoved += rulesRemovedInFile;
             await (0, prompts_1.default)({ type: 'invisible', name: 'continue', message: 'Presiona Enter para continuar con el siguiente archivo...' });
         }
-        // Solo si el archivo se procesó por completo, se añaden las acciones al reporte final.
         deletedRules.push(...fileDeletedRules);
         keptRules.push(...fileKeptRules);
     }

package/dist/utils/file-finder.js

@@ -7,12 +7,18 @@ exports.findJsonFiles = findJsonFiles;
 exports.findCssFiles = findCssFiles;
 const glob_1 = require("glob");
 const path_1 = __importDefault(require("path"));
+/**
+ * Normaliza una ruta para que use forward slashes (/), requerido por glob en Windows.
+ */
+function toGlobPath(p) {
+    return p.split(path_1.default.sep).join('/');
+}
 /**
  * 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}`);
+    return (0, glob_1.sync)(`${toGlobPath(storePath)}/**/*.{json,jsonc}`);
 }
 /**
  * Encuentra todos los archivos .css DE APPS NATIVAS (vtex.*) en la carpeta /styles/css.
@@ -20,7 +26,7 @@ function findJsonFiles(projectPath) {
  */
 function findCssFiles(projectPath) {
     const stylesPath = path_1.default.join(projectPath, 'styles/css');
-    const allCssFiles = (0, glob_1.sync)(`${stylesPath}/**/*.css`);
+    const allCssFiles = (0, glob_1.sync)(`${toGlobPath(stylesPath)}/**/*.css`);
     const nativeVtexCssFiles = allCssFiles.filter(filePath => {
         const fileName = path_1.default.basename(filePath);
         return fileName.startsWith('vtex.');

package/gui/electron-builder.yml

@@ -0,0 +1,24 @@
+appId: com.elilab.vtex-css-sanitizer
+productName: VTEX CSS Sanitizer
+directories:
+  buildResources: build
+  output: release
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.*'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+linux:
+  target:
+    - AppImage
+  category: Development
+  icon: build/icon.png
+win:
+  target:
+    - nsis
+  icon: build/icon.png
+nsis:
+  oneClick: false
+  allowToChangeInstallationDirectory: true
+  shortcutName: VTEX CSS Sanitizer

package/gui/electron.vite.config.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+    main: {
+        plugins: [externalizeDepsPlugin()]
+    },
+    preload: {
+        plugins: [externalizeDepsPlugin()]
+    },
+    renderer: {
+        resolve: {
+            alias: {
+                '@renderer': resolve('src/renderer/src')
+            }
+        },
+        plugins: [react(), tailwindcss()]
+    }
+})