vtex-css-sanitizer-cli 1.0.2 → 1.0.5

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()]
+    }
+})

package/gui/out/main/index.js

@@ -0,0 +1,536 @@
+"use strict";
+const electron = require("electron");
+const path = require("path");
+const fs = require("fs/promises");
+const postcss = require("postcss");
+const glob = require("glob");
+const jsoncParser = require("jsonc-parser");
+const is = {
+  dev: !electron.app.isPackaged
+};
+const platform = {
+  isWindows: process.platform === "win32",
+  isMacOS: process.platform === "darwin",
+  isLinux: process.platform === "linux"
+};
+const electronApp = {
+  setAppUserModelId(id) {
+    if (platform.isWindows)
+      electron.app.setAppUserModelId(is.dev ? process.execPath : id);
+  },
+  setAutoLaunch(auto) {
+    if (platform.isLinux)
+      return false;
+    const isOpenAtLogin = () => {
+      return electron.app.getLoginItemSettings().openAtLogin;
+    };
+    if (isOpenAtLogin() !== auto) {
+      electron.app.setLoginItemSettings({
+        openAtLogin: auto,
+        path: process.execPath
+      });
+      return isOpenAtLogin() === auto;
+    } else {
+      return true;
+    }
+  },
+  skipProxy() {
+    return electron.session.defaultSession.setProxy({ mode: "direct" });
+  }
+};
+const optimizer = {
+  watchWindowShortcuts(window, shortcutOptions) {
+    if (!window)
+      return;
+    const { webContents } = window;
+    const { escToCloseWindow = false, zoom = false } = shortcutOptions || {};
+    webContents.on("before-input-event", (event, input) => {
+      if (input.type === "keyDown") {
+        if (!is.dev) {
+          if (input.code === "KeyR" && (input.control || input.meta))
+            event.preventDefault();
+        } else {
+          if (input.code === "F12") {
+            if (webContents.isDevToolsOpened()) {
+              webContents.closeDevTools();
+            } else {
+              webContents.openDevTools({ mode: "undocked" });
+              console.log("Open dev tool...");
+            }
+          }
+        }
+        if (escToCloseWindow) {
+          if (input.code === "Escape" && input.key !== "Process") {
+            window.close();
+            event.preventDefault();
+          }
+        }
+        if (!zoom) {
+          if (input.code === "Minus" && (input.control || input.meta))
+            event.preventDefault();
+          if (input.code === "Equal" && input.shift && (input.control || input.meta))
+            event.preventDefault();
+        }
+      }
+    });
+  },
+  registerFramelessWindowIpc() {
+    electron.ipcMain.on("win:invoke", (event, action) => {
+      const win = electron.BrowserWindow.fromWebContents(event.sender);
+      if (win) {
+        if (action === "show") {
+          win.show();
+        } else if (action === "showInactive") {
+          win.showInactive();
+        } else if (action === "min") {
+          win.minimize();
+        } else if (action === "max") {
+          const isMaximized = win.isMaximized();
+          if (isMaximized) {
+            win.unmaximize();
+          } else {
+            win.maximize();
+          }
+        } else if (action === "close") {
+          win.close();
+        }
+      }
+    });
+  }
+};
+function toGlobPath(p) {
+  return p.split(path.sep).join("/");
+}
+function findJsonFiles(projectPath) {
+  const storePath = path.join(projectPath, "store");
+  return glob.sync(`${toGlobPath(storePath)}/**/*.{json,jsonc}`);
+}
+function findCssFiles(projectPath) {
+  const stylesPath = path.join(projectPath, "styles/css");
+  const allCssFiles = glob.sync(`${toGlobPath(stylesPath)}/**/*.css`);
+  const nativeVtexCssFiles = allCssFiles.filter((filePath) => {
+    const fileName = path.basename(filePath);
+    return fileName.startsWith("vtex.");
+  });
+  return nativeVtexCssFiles;
+}
+async function extractBlockClasses(jsonFiles) {
+  const declaredClasses = /* @__PURE__ */ new Map();
+  for (const filePath of jsonFiles) {
+    try {
+      const content = await fs.readFile(filePath, "utf-8");
+      const parsedJson = jsoncParser.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;
+}
+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 = /* @__PURE__ */ new Map();
+  for (const filePath of cssFiles) {
+    try {
+      const content = await fs.readFile(filePath, "utf-8");
+      const root = postcss.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;
+}
+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;
+}
+async function ensureReportDirectory(projectPath) {
+  const reportDir = path.join(projectPath, ".sanitizer-reports");
+  await fs.mkdir(reportDir, { recursive: true });
+  return reportDir;
+}
+function getFormattedDate() {
+  const date = /* @__PURE__ */ 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}`;
+}
+async function generateAnalysisReport(projectPath, unusedCss, unusedBlockClasses, usedCssSuffixesMap, declaredBlockClassesMap) {
+  const reportDir = await ensureReportDirectory(projectPath);
+  const reportPath = path.join(reportDir, `analysis-report-${getFormattedDate()}.md`);
+  let markdownContent = `# ✅ Informe de Análisis de CSS - ${getFormattedDate()}
+
+`;
+  markdownContent += `Este informe detalla las clases CSS y declaraciones \`blockClass\` que podrían estar sin uso en el proyecto.
+
+`;
+  markdownContent += `--- 
+
+`;
+  markdownContent += `## 🔴 Sufijos CSS sin \`blockClass\` correspondiente (${unusedCss.length} encontrados)
+
+`;
+  if (unusedCss.length > 0) {
+    unusedCss.forEach((suffix) => {
+      markdownContent += `### \`--${suffix}\`
+
+`;
+      const locations = usedCssSuffixesMap.get(suffix) || [];
+      locations.slice(0, 5).forEach((loc) => {
+        markdownContent += `*   **Usado en:** \`${path.relative(projectPath, loc.filePath)}\`
+`;
+        markdownContent += `*   **Selector:** \`${loc.selector}\`
+
+`;
+      });
+    });
+  } else {
+    markdownContent += `¡Excelente! No se encontraron sufijos CSS sin uso.
+
+`;
+  }
+  markdownContent += `--- 
+
+`;
+  markdownContent += `## 🟡 \`blockClass\` sin estilos CSS asociados (${unusedBlockClasses.length} encontrados)
+
+`;
+  if (unusedBlockClasses.length > 0) {
+    unusedBlockClasses.forEach((cls) => {
+      markdownContent += `### \`"${cls}"\`
+
+`;
+      const locations = declaredBlockClassesMap.get(cls) || [];
+      locations.slice(0, 5).forEach((loc) => {
+        markdownContent += `*   **Declarado en:** \`${path.relative(projectPath, loc.filePath)}\`
+`;
+        markdownContent += `*   **Bloque:** \`${loc.blockName}\`
+
+`;
+      });
+    });
+  } else {
+    markdownContent += `¡Genial! Todas las \`blockClass\` declaradas se están utilizando.
+
+`;
+  }
+  await fs.writeFile(reportPath, markdownContent);
+  return reportPath;
+}
+async function generateFixReport(projectPath, deletedRules, keptRules) {
+  const reportDir = await ensureReportDirectory(projectPath);
+  const reportPath = path.join(reportDir, `fix-report-${getFormattedDate()}.md`);
+  let markdownContent = `# 🛠️ Informe de Limpieza de CSS - ${getFormattedDate()}
+
+`;
+  markdownContent += `Este informe detalla las acciones realizadas durante el proceso de limpieza.
+
+`;
+  markdownContent += `--- 
+
+`;
+  markdownContent += `## 🗑️ Reglas Eliminadas (${deletedRules.length})
+
+`;
+  if (deletedRules.length > 0) {
+    deletedRules.forEach((entry) => {
+      markdownContent += `*   **Archivo:** \`${path.relative(projectPath, entry.filePath)}\`
+`;
+      markdownContent += `    \`\`\`css
+    ${entry.rule}
+    \`\`\`
+
+`;
+    });
+  } else {
+    markdownContent += `No se eliminó ninguna regla durante esta sesión.
+
+`;
+  }
+  markdownContent += `--- 
+
+`;
+  markdownContent += `## 👍 Reglas Conservadas (${keptRules.length})
+
+`;
+  if (keptRules.length > 0) {
+    keptRules.forEach((entry) => {
+      markdownContent += `*   **Archivo:** \`${path.relative(projectPath, entry.filePath)}\`
+`;
+      markdownContent += `    \`\`\`css
+    ${entry.rule}
+    \`\`\`
+
+`;
+    });
+  } else {
+    markdownContent += `No se conservó ninguna regla candidata durante esta sesión.
+
+`;
+  }
+  await fs.writeFile(reportPath, markdownContent);
+  return reportPath;
+}
+async function analyzeProject(projectPath) {
+  const jsonFiles = findJsonFiles(projectPath);
+  const cssFiles = findCssFiles(projectPath);
+  if (jsonFiles.length === 0 && cssFiles.length === 0) {
+    return {
+      unusedCss: [],
+      unusedBlockClasses: [],
+      stats: { jsonFiles: 0, cssFiles: 0, uniqueBlockClasses: 0, uniqueCssSuffixes: 0 }
+    };
+  }
+  const declaredBlockClassesMap = await extractBlockClasses(jsonFiles);
+  const usedCssSuffixesMap = await extractCssSuffixes(cssFiles);
+  const declaredBlockClasses = new Set(declaredBlockClassesMap.keys());
+  const usedCssSuffixes = new Set(usedCssSuffixesMap.keys());
+  const unusedCssSuffixes = [...usedCssSuffixes].filter(
+    (suffix) => !declaredBlockClasses.has(suffix)
+  );
+  const unusedCss = unusedCssSuffixes.map((suffix) => ({
+    suffix,
+    locations: (usedCssSuffixesMap.get(suffix) || []).map((loc) => ({
+      filePath: path.relative(projectPath, loc.filePath),
+      selector: loc.selector
+    }))
+  }));
+  const unusedBlockClassNames = [...declaredBlockClasses].filter(
+    (cls) => !usedCssSuffixes.has(cls)
+  );
+  const unusedBlockClasses = unusedBlockClassNames.map((cls) => ({
+    blockClass: cls,
+    locations: (declaredBlockClassesMap.get(cls) || []).map((loc) => ({
+      filePath: path.relative(projectPath, loc.filePath),
+      blockName: loc.blockName
+    }))
+  }));
+  try {
+    await generateAnalysisReport(
+      projectPath,
+      unusedCssSuffixes,
+      unusedBlockClassNames,
+      usedCssSuffixesMap,
+      declaredBlockClassesMap
+    );
+  } catch (err) {
+    console.error("Error generando reporte de análisis:", err);
+  }
+  return {
+    unusedCss,
+    unusedBlockClasses,
+    stats: {
+      jsonFiles: jsonFiles.length,
+      cssFiles: cssFiles.length,
+      uniqueBlockClasses: declaredBlockClasses.size,
+      uniqueCssSuffixes: usedCssSuffixes.size
+    }
+  };
+}
+async function getCandidateRules(projectPath) {
+  const jsonFiles = findJsonFiles(projectPath);
+  const cssFiles = findCssFiles(projectPath);
+  const declaredBlockClassesMap = await extractBlockClasses(jsonFiles);
+  const usedCssSuffixesMap = await 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) return [];
+  const candidates = [];
+  let idCounter = 0;
+  for (const filePath of cssFiles) {
+    const content = await fs.readFile(filePath, "utf-8");
+    const root = postcss.parse(content);
+    const rules = identifyRulesForDeletion(root, unusedSuffixes);
+    for (const rule of rules) {
+      candidates.push({
+        id: `rule-${idCounter++}`,
+        filePath,
+        relativeFilePath: path.relative(projectPath, filePath),
+        ruleText: rule.toString(),
+        selector: rule.selectors.join(", ")
+      });
+    }
+  }
+  return candidates;
+}
+async function applyFix(projectPath, rulesToDelete) {
+  const rulesByFile = /* @__PURE__ */ new Map();
+  for (const rule of rulesToDelete) {
+    const existing = rulesByFile.get(rule.filePath) || [];
+    existing.push(rule);
+    rulesByFile.set(rule.filePath, existing);
+  }
+  let totalDeleted = 0;
+  const deletedEntries = [];
+  for (const [filePath, rules] of rulesByFile.entries()) {
+    const content = await fs.readFile(filePath, "utf-8");
+    const root = postcss.parse(content);
+    const ruleTexts = new Set(rules.map((r) => r.ruleText));
+    root.walkRules((cssRule) => {
+      if (ruleTexts.has(cssRule.toString())) {
+        deletedEntries.push({ rule: cssRule.toString(), filePath });
+        cssRule.remove();
+        totalDeleted++;
+      }
+    });
+    const newContent = root.toString();
+    await fs.writeFile(filePath, newContent, "utf-8");
+  }
+  let reportPath = "";
+  try {
+    reportPath = await generateFixReport(projectPath, deletedEntries, []);
+  } catch (err) {
+    console.error("Error generando reporte de fix:", err);
+  }
+  return { deletedCount: totalDeleted, reportPath };
+}
+function createWindow() {
+  const mainWindow = new electron.BrowserWindow({
+    width: 1100,
+    height: 750,
+    minWidth: 900,
+    minHeight: 600,
+    show: false,
+    autoHideMenuBar: true,
+    title: "VTEX CSS Sanitizer",
+    webPreferences: {
+      preload: path.join(__dirname, "../preload/index.js"),
+      sandbox: false
+    }
+  });
+  mainWindow.on("ready-to-show", () => {
+    mainWindow.show();
+  });
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    electron.shell.openExternal(details.url);
+    return { action: "deny" };
+  });
+  if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+    mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
+  } else {
+    mainWindow.loadFile(path.join(__dirname, "../renderer/index.html"));
+  }
+}
+function registerIpcHandlers() {
+  electron.ipcMain.handle("dialog:selectFolder", async () => {
+    const result = await electron.dialog.showOpenDialog({
+      properties: ["openDirectory"],
+      title: "Seleccionar proyecto VTEX IO"
+    });
+    if (result.canceled || result.filePaths.length === 0) return null;
+    return result.filePaths[0];
+  });
+  electron.ipcMain.handle("analysis:run", async (_event, projectPath) => {
+    try {
+      return await analyzeProject(projectPath);
+    } catch (error) {
+      console.error("Error en análisis:", error);
+      throw error;
+    }
+  });
+  electron.ipcMain.handle("fix:getCandidates", async (_event, projectPath) => {
+    try {
+      return await getCandidateRules(projectPath);
+    } catch (error) {
+      console.error("Error obteniendo candidatos:", error);
+      throw error;
+    }
+  });
+  electron.ipcMain.handle(
+    "fix:apply",
+    async (_event, projectPath, rulesToDelete) => {
+      try {
+        return await applyFix(projectPath, rulesToDelete);
+      } catch (error) {
+        console.error("Error aplicando fix:", error);
+        throw error;
+      }
+    }
+  );
+  electron.ipcMain.handle("report:open", async (_event, reportPath) => {
+    electron.shell.showItemInFolder(reportPath);
+  });
+}
+electron.app.whenReady().then(() => {
+  electronApp.setAppUserModelId("com.elilab.vtex-css-sanitizer");
+  electron.app.on("browser-window-created", (_, window) => {
+    optimizer.watchWindowShortcuts(window);
+  });
+  registerIpcHandlers();
+  createWindow();
+  electron.app.on("activate", () => {
+    if (electron.BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+electron.app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    electron.app.quit();
+  }
+});

package/gui/out/preload/index.js

@@ -0,0 +1,98 @@
+"use strict";
+const electron = require("electron");
+const electronAPI = {
+  ipcRenderer: {
+    send(channel, ...args) {
+      electron.ipcRenderer.send(channel, ...args);
+    },
+    sendTo(webContentsId, channel, ...args) {
+      const electronVer = process.versions.electron;
+      const electronMajorVer = electronVer ? parseInt(electronVer.split(".")[0]) : 0;
+      if (electronMajorVer >= 28) {
+        throw new Error('"sendTo" method has been removed since Electron 28.');
+      } else {
+        electron.ipcRenderer.sendTo(webContentsId, channel, ...args);
+      }
+    },
+    sendSync(channel, ...args) {
+      return electron.ipcRenderer.sendSync(channel, ...args);
+    },
+    sendToHost(channel, ...args) {
+      electron.ipcRenderer.sendToHost(channel, ...args);
+    },
+    postMessage(channel, message, transfer) {
+      electron.ipcRenderer.postMessage(channel, message, transfer);
+    },
+    invoke(channel, ...args) {
+      return electron.ipcRenderer.invoke(channel, ...args);
+    },
+    on(channel, listener) {
+      electron.ipcRenderer.on(channel, listener);
+      return () => {
+        electron.ipcRenderer.removeListener(channel, listener);
+      };
+    },
+    once(channel, listener) {
+      electron.ipcRenderer.once(channel, listener);
+      return () => {
+        electron.ipcRenderer.removeListener(channel, listener);
+      };
+    },
+    removeListener(channel, listener) {
+      electron.ipcRenderer.removeListener(channel, listener);
+      return this;
+    },
+    removeAllListeners(channel) {
+      electron.ipcRenderer.removeAllListeners(channel);
+    }
+  },
+  webFrame: {
+    insertCSS(css) {
+      return electron.webFrame.insertCSS(css);
+    },
+    setZoomFactor(factor) {
+      if (typeof factor === "number" && factor > 0) {
+        electron.webFrame.setZoomFactor(factor);
+      }
+    },
+    setZoomLevel(level) {
+      if (typeof level === "number") {
+        electron.webFrame.setZoomLevel(level);
+      }
+    }
+  },
+  webUtils: {
+    getPathForFile(file) {
+      return electron.webUtils.getPathForFile(file);
+    }
+  },
+  process: {
+    get platform() {
+      return process.platform;
+    },
+    get versions() {
+      return process.versions;
+    },
+    get env() {
+      return { ...process.env };
+    }
+  }
+};
+const api = {
+  selectFolder: () => electron.ipcRenderer.invoke("dialog:selectFolder"),
+  runAnalysis: (projectPath) => electron.ipcRenderer.invoke("analysis:run", projectPath),
+  getCandidates: (projectPath) => electron.ipcRenderer.invoke("fix:getCandidates", projectPath),
+  applyFix: (projectPath, rulesToDelete) => electron.ipcRenderer.invoke("fix:apply", projectPath, rulesToDelete),
+  openReport: (reportPath) => electron.ipcRenderer.invoke("report:open", reportPath)
+};
+if (process.contextIsolated) {
+  try {
+    electron.contextBridge.exposeInMainWorld("electron", electronAPI);
+    electron.contextBridge.exposeInMainWorld("api", api);
+  } catch (error) {
+    console.error(error);
+  }
+} else {
+  window.electron = electronAPI;
+  window.api = api;
+}