qleaner 1.0.21 → 1.0.23

package/command.js

@@ -4,6 +4,7 @@ const Table = require("cli-table3");
 const parser = require("@babel/parser");
 const traverse = require("@babel/traverse").default;
 const path = require("path");
+const cliProgress = require("cli-progress");
 const { createResolver } = require("./utils/resolver");
 const {
   loadCache,
@@ -14,6 +15,14 @@ const {
 const { isExcludedFile, compareFiles } = require("./utils/utils");
 
 async function getFiles(directory = "src", options, chalk) {
+  const bars = new cliProgress.MultiBar({
+    clearOnComplete: false,
+    hideCursor: true,
+    format: chalk.cyan('{name}') +
+    ' |' + '{bar}' + '| ' +
+    '{value}/{total} files || {status}'
+  }, cliProgress.Presets.shades_grey);
+
   const contentPaths = [`${directory}/**/*.{tsx,ts,js,jsx}`];
   if (options.excludeDir && options.excludeDir.length > 0) {
     options.excludeDir.forEach((dir) => {
@@ -28,6 +37,12 @@ async function getFiles(directory = "src", options, chalk) {
 
   const files = await fg(contentPaths);
   const imports = [];
+  
+  const scanBar = bars.create(files.length, 0, {
+    name: 'Scanning Files',
+    status: 'Scanning...',
+  });
+
   for (const file of files) {
     const code = fs.readFileSync(file, "utf8");
     const ast = parser.parse(code, {
@@ -56,7 +71,10 @@ async function getFiles(directory = "src", options, chalk) {
     //     }
     //   },
     // });
+    scanBar.increment();
   }
+  
+  bars.stop();
 
   if (options.table) {
     const tableImports = new Table({
@@ -107,6 +125,14 @@ async function getFiles(directory = "src", options, chalk) {
 }
 
 async function unUsedFiles(chalk, directory = "src", options) {
+  const bars = new cliProgress.MultiBar({
+    clearOnComplete: false,
+    hideCursor: true,
+    format: chalk.cyan('{name}') +
+    ' |' + '{bar}' + '| ' +
+    '{value}/{total} files || {status}'
+  }, cliProgress.Presets.shades_grey);
+
   const resolver = createResolver(directory);
   const cache = loadCache(process.cwd());
   const contentPaths = [`${directory}/**/*.{tsx,ts,js,jsx}`];
@@ -125,9 +151,14 @@ async function unUsedFiles(chalk, directory = "src", options) {
   let imports = [];
   const unusedFiles = [];
 
+  const scanBar = bars.create(files.length, 0, {
+    name: 'Scanning Files',
+    status: 'Scanning...',
+  });
+
   // debug log
   // let debugCount = 0;
-  // console.log('total files---', files.length);
+  let i = 0;
   for (const file of files) {
     const code = fs.readFileSync(file, "utf8");
     if (needsRebuild(file, code, cache)) {
@@ -162,6 +193,9 @@ async function unUsedFiles(chalk, directory = "src", options) {
       // debugCount++;
       // console.log('cache hit', debugCount);
     }
+    scanBar.update(++i, {
+      status: 'Scanning...',
+    });
   }
 
   // imports beings empty shows all the files were cached
@@ -169,7 +203,13 @@ async function unUsedFiles(chalk, directory = "src", options) {
     imports = cache[directory]? cache[directory].imports: [];
   }
 
+  const checkBar = bars.create(files.length, 0, {
+    name: 'Checking Usage',
+    status: 'Checking...',
+  });
+
   // debugCount = 0;
+  i = 0;
   for (const file of files) {
     const code = fs.readFileSync(file, "utf8");
     if (!cache[file].isImported || needsRebuild(file, code, cache)) {
@@ -200,7 +240,12 @@ async function unUsedFiles(chalk, directory = "src", options) {
       // debugCount++;
       // console.log("debug hit", debugCount);
     }
+    checkBar.update(++i, {
+      status: 'Checking...',
+    });
   }
+  
+  bars.stop();
   cache[directory] =  {
     imports: imports,
   }

package/controllers/image.js

@@ -1,189 +1,316 @@
 const fg = require("fast-glob");
 const fs = require("fs");
+const path = require("path");
 const parser = require("@babel/parser");
 const traverse = require("@babel/traverse").default;
+const Table = require("cli-table3");
 const { getCssImages } = require("../utils/cssImages");
-const path = require("path");
-const { createResolver } = require("../utils/resolver");
-const { compareFiles, isExcludedFile, askDeleteFiles } = require("../utils/utils");
-const Table = require('cli-table3');
+const { askDeleteFiles } = require("../utils/utils");
+const cliProgress = require("cli-progress");
 
-async function getUnusedImages(chalk, imageDirectory, codeDirectory, options) {
-  const usedImages = [];
-  const unusedImages = [];
-  const imageRegex = /\.(png|jpg|jpeg|svg|gif|webp)$/i;
-  const contentPaths = [`${imageDirectory}/**/*.{png,jpg,jpeg,svg,gif,webp}`];
-  if (options.excludeDirAssets && options.excludeDirAssets.length > 0) {
-    options.excludeDirAssets.forEach((dir) => {
-      contentPaths.push(`!${dir}/**`);
-    });
-  }
-  if (options.excludeFileAsset && options.excludeFileAsset.length > 0) {
-    options.excludeFileAsset.forEach((file) => {
-      contentPaths.push(`!${imageDirectory}/**/${file}`);
-    });
-  }
+// Regex for matching url("x.png") or url('x.png') or bg-[url('x.png')]
+const URL_EXTRACT_REGEX = /url\((['"]?)([^"')]+)\1\)/gi;
 
-  const rootPaths = [`${codeDirectory}/**/*.{js,jsx,ts,tsx}`];
-  if (options.excludeDirCode && options.excludeDirCode.length > 0) {
-    options.excludeDirCode.forEach((dir) => {
-      rootPaths.push(`!${dir}/**`);
-    });
+// Normal image file regex
+const IMAGE_REGEX = /\.(png|jpe?g|svg|gif|webp)$/i;
+
+/**
+ * Normalize image paths for consistent matching.
+ */
+function normalize(value, imageDirectory) {
+  if (!value) return null;
+
+  // Extract url() paths
+  const match = [...value.matchAll(URL_EXTRACT_REGEX)];
+  if (match.length > 0) {
+    value = match[0][2];
   }
-  if (options.excludeFileCode && options.excludeFileCode.length > 0) {
-    options.excludeFileCode.forEach((file) => {
-      rootPaths.push(`!${codeDirectory}/**/${file}`);
-    });
+
+  // Remove query params
+  value = value.split("?")[0];
+
+  // Convert leading "/" to relative project path
+  if (value.startsWith("/")) {
+    return path.resolve(path.join(imageDirectory, value.slice(1)));
   }
 
-  const files = await fg(contentPaths);
-  const codeFiles = await fg(rootPaths);
+  // Resolve relative paths
+  return path.resolve(path.join(imageDirectory, value));
+}
 
-  for (const file of codeFiles) {
+/**
+ * Extracts all strings in a tagged template literal (styled-components, css``)
+ */
+function extractFromTemplateLiteral(quasis) {
+  const results = [];
+  quasis.forEach((q) => {
+    const matches = [...q.value.raw.matchAll(URL_EXTRACT_REGEX)];
+    for (const m of matches) {
+      results.push(m[2]);
+    }
+    if (IMAGE_REGEX.test(q.value.raw)) {
+      results.push(q.value.raw);
+    }
+  });
+  return results;
+}
+
+/**
+ * Extract images from JSX style object: style={{ backgroundImage: "url('/img/a.png')" }}
+ */
+function extractFromJSXStyle(node, file, collected) {
+  if (!node || node.type !== "JSXExpressionContainer") return;
+
+  const expr = node.expression;
+  if (!expr || expr.type !== "ObjectExpression") return;
+
+  expr.properties.forEach((prop) => {
+    if (
+      prop.type !== "ObjectProperty" ||
+      !prop.key ||
+      !prop.value
+    ) return;
+
+    const keyName = prop.key.name || prop.key.value;
+
+    if (!keyName) return;
+
+    const isImageField =
+      keyName.toLowerCase().includes("background") ||
+      keyName.toLowerCase().includes("image") ||
+      keyName.toLowerCase().includes("mask");
+
+    if (!isImageField) return;
+
+    // String literal
+    if (prop.value.type === "StringLiteral") {
+      const raw = prop.value.value;
+      const matches = [...raw.matchAll(URL_EXTRACT_REGEX)];
+      if (matches.length > 0) {
+        matches.forEach((m) =>
+          collected.add(JSON.stringify({ path: m[2], file }))
+        );
+      } else if (IMAGE_REGEX.test(raw)) {
+        collected.add(JSON.stringify({ path: raw, file }));
+      }
+    }
+
+    // Template literal
+    if (prop.value.type === "TemplateLiteral") {
+      extractFromTemplateLiteral(prop.value.quasis).forEach((v) => {
+        collected.add(JSON.stringify({ path: v, file }));
+      });
+    }
+  });
+}
+
+/**
+ * MAIN FUNCTION
+ */
+async function getUnusedImages(chalk, imageDirectory, codeDirectory, options) {
+    const bars = new cliProgress.MultiBar({
+        clearOnComplete: false,
+        hideCursor: true,
+        format: chalk.cyan('{name}') +
+        ' |' + '{bar}' + '| ' +
+        '{value}/{total} files || {status}'
+    }, cliProgress.Presets.shades_grey)
+
+  const used = new Set();
+  const unusedImages = [];
+
+  // ---- Collect image files in asset directory ----
+  const imageFiles = await fg([`${imageDirectory}/**/*.{png,jpg,jpeg,svg,gif,webp}`]);
 
+  // ---- Scan Code Files ----
+  const codeFiles = await fg([`${codeDirectory}/**/*.{js,jsx,ts,tsx}`]);
+  const codeBar = bars.create(codeFiles.length, 0, {
+    name: 'Code Files',
+    status: 'Scanning...',
+  });
+
+
+  for (const file of codeFiles) {
     const code = fs.readFileSync(file, "utf8");
+
     const ast = parser.parse(code, {
       sourceType: "module",
       plugins: ["jsx", "typescript"],
     });
 
     traverse(ast, {
-      // <img src="...">
-      JSXAttribute(path) {
-        if (path.node.name.name !== "src") return;
-
-        const value = path.node.value;
-
-        // String literals: `img/a.png`
-        if (value.type === "StringLiteral") {
-          if (imageRegex.test(value.value)) {
-            usedImages.push({
-              value: value.value,
-              file,
-            });
+      /**
+       * import logo from './img/a.png'
+       */
+      ImportDeclaration(pathNode) {
+        const val = pathNode.node.source.value;
+        if (IMAGE_REGEX.test(val)) {
+          used.add(JSON.stringify({ path: val, file }));
+        }
+      },
+
+      /**
+       * require('./img/a.png')
+       */
+      CallExpression(pathNode) {
+        const callee = pathNode.node.callee;
+        const args = pathNode.node.arguments;
+
+        if (
+          callee.type === "Identifier" &&
+          callee.name === "require" &&
+          args.length &&
+          args[0].type === "StringLiteral"
+        ) {
+          const val = args[0].value;
+          if (IMAGE_REGEX.test(val)) {
+            used.add(JSON.stringify({ path: val, file }));
+          }
+        }
+
+        // dynamic import("./a.png")
+        if (
+          callee.type === "Import" &&
+          args.length &&
+          args[0].type === "StringLiteral"
+        ) {
+          const val = args[0].value;
+          if (IMAGE_REGEX.test(val)) {
+            used.add(JSON.stringify({ path: val, file }));
           }
         }
+      },
 
-        if (value.type === "JSXExpressionContainer") {
-          const expr = value.expression;
-          // String literals: `img/a.png`
-          if (expr.type === "StringLiteral" && imageRegex.test(expr.value)) {
-            usedImages.push({
-              value: expr.value,
-              file,
-            });
+      /**
+       * <img src="...">
+       */
+      JSXAttribute(attr) {
+        if (attr.node.name.name === "src") {
+          const v = attr.node.value;
+          if (!v) return;
+
+          if (v.type === "StringLiteral") {
+            if (IMAGE_REGEX.test(v.value)) {
+              used.add(JSON.stringify({ path: v.value, file }));
+            }
           }
 
-          // Template literals: `/images/${name}.png`
-          if (expr.type === "TemplateLiteral") {
-            expr.quasis.forEach((q) => {
-              if (imageRegex.test(q.value.raw)) {
-                usedImages.push({
-                  value: q.value.raw,
-                  file,
-                });
+          if (v.type === "JSXExpressionContainer") {
+            const expr = v.expression;
+
+            if (expr.type === "StringLiteral") {
+              if (IMAGE_REGEX.test(expr.value)) {
+                used.add(JSON.stringify({ path: expr.value, file }));
               }
-            });
+            }
+
+            if (expr.type === "TemplateLiteral") {
+              extractFromTemplateLiteral(expr.quasis).forEach((v) => {
+                used.add(JSON.stringify({ path: v, file }));
+              });
+            }
           }
         }
-      },
 
-      // String literals anywhere in code
-      StringLiteral(path) {
-        if (imageRegex.test(path.node.value)) {
-          usedImages.push({
-            value: path.node.value,
-            file,
-          });
+        // Handle style={{ backgroundImage: "url(...)" }}
+        if (attr.node.name.name === "style") {
+          extractFromJSXStyle(attr.node.value, file, used);
         }
       },
 
-      // Template literals: `/images/${name}.png`
-      TemplateLiteral(path) {
-        path.node.quasis.forEach((quasi) => {
-          if (imageRegex.test(quasi.value.raw)) {
-            usedImages.push({
-              value: quasi.value.raw,
-              file,
-            });
-          }
-        });
+      /**
+       * String Literals anywhere
+       */
+      StringLiteral(p) {
+        const val = p.node.value;
+
+        if (IMAGE_REGEX.test(val)) {
+          used.add(JSON.stringify({ path: val, file }));
+        }
+
+        // detect url("...") inside strings (e.g., Tailwind)
+        const matches = [...val.matchAll(URL_EXTRACT_REGEX)];
+        matches.forEach((m) =>
+          used.add(JSON.stringify({ path: m[2], file }))
+        );
       },
 
-      // Arrays: ["img/a.png", "img/b.png"]
-      ArrayExpression(path) {
-        path.node.elements.forEach((el) => {
-          if (el?.type === "StringLiteral" && imageRegex.test(el.value)) {
-            usedImages.push({
-              value: el.value,
-              file,
-            });
-          }
+      /**
+       * Template Literals anywhere
+       */
+      TemplateLiteral(p) {
+        extractFromTemplateLiteral(p.node.quasis).forEach((v) => {
+          used.add(JSON.stringify({ path: v, file }));
         });
       },
 
-      // Objects: { image: "img/a.png" }
-      ObjectProperty(path) {
-        const val = path.node.value;
-        if (val.type === "StringLiteral" && imageRegex.test(val.value)) {
-          usedImages.push({
-            value: val.value,
-            file,
-          });
-        }
+      /**
+       * styled-components & css`` blocks
+       */
+      TaggedTemplateExpression(p) {
+        const quasi = p.node.quasi;
+        const extracted = extractFromTemplateLiteral(quasi.quasis);
+        extracted.forEach((v) => used.add(JSON.stringify({ path: v, file })));
       },
     });
+    codeBar.increment();
   }
 
-  const cssImages = await getCssImages(codeDirectory);
-  const combinedImages = [...usedImages, ...cssImages];
-
-
-  const resolver = createResolver(imageDirectory);
-
-  for (const file of files) {
-    let i = 0
-    let isFound = false;
-    while(!isFound && i < combinedImages.length) {
-        const imageFilePath = await resolver(imageDirectory, combinedImages[i].value);
-        const filePath = path.resolve(file);
-        if(compareFiles(filePath, imageFilePath)) {
-            isFound = true;
-            break;
-        }else if(i === combinedImages.length - 1) {
-            if(options.excludeFilePrint && options.excludeFilePrint.length > 0) {
-                if(!isExcludedFile(filePath, options.excludeFilePrint)) {
-                    unusedImages.push(filePath);
-                }
-            }else{
-                unusedImages.push(filePath);
-            }
-        }
-        i++;
-    }
+  // Add CSS images
+  const cssImages = await getCssImages(codeDirectory, bars);
+  cssImages.forEach((img) =>
+    used.add(JSON.stringify({ path: img.value, file: img.file }))
+  );
+  const normalizeBar = bars.create(used.size, 0, {
+    name: 'Normalizing Images',
+    status: 'Normalizing...',
+  });
+
+  // Normalize all used images
+  const normalizedUsed = new Set();
+  for (const entry of used) {
+    normalizeBar.increment();
+    const { path: p } = JSON.parse(entry);
+    const normalized = normalize(p, imageDirectory);
+    if (normalized) normalizedUsed.add(normalized);
   }
 
-  if(options.table) {
+  const unusedBar = bars.create(imageFiles.length, 0, {
+    name: 'Determining Unused Images',
+    status: 'Determining...',
+  });
+  // ---- Determine unused ----
+  for (const img of imageFiles) {
+    unusedBar.increment();
+    const full = path.resolve(img);
+    if (!normalizedUsed.has(full)) {
+      unusedImages.push(full);
+    }
+  }
+  bars.stop();
+  // ---- Output table or list ----
+  if (options.table) {
     const table = new Table({
-      head: options.dryRun ? ['Unused Images (Would Delete)'] : ['Unused Images'],
-      colWidths: [50]
-    });
-    unusedImages.forEach(image => {
-      table.push([image]);
+      head: options.dryRun ? ["Unused Images (Would Delete)"] : ["Unused Images"],
+      colWidths: [100],
     });
+    unusedImages.forEach((img) => table.push([img]));
     console.log(table.toString());
-  }else{
-    unusedImages.forEach(image => {
-      console.log(chalk.red(image));
-    });
+  } else {
+    unusedImages.forEach((img) => console.log(chalk.red(img)));
   }
 
-  if(options.dryRun && unusedImages.length > 0) {
-    console.log(chalk.cyan(`\n[DRY RUN] Would delete ${unusedImages.length} file(s)`));
-    console.log(chalk.cyan('Run without --dry-run to actually delete files\n'));
-  } else if (!options.dryRun && unusedImages.length > 0) {
+  // ---- deletion logic ----
+  if (options.dryRun) {
+    console.log(
+      chalk.cyan(
+        `\n[DRY RUN] Would delete ${unusedImages.length} file(s)`
+      )
+    );
+  } else if (unusedImages.length > 0) {
     askDeleteFiles(unusedImages);
   }
+
   return unusedImages;
 }
 

package/controllers/list.js

@@ -1,6 +1,6 @@
 const { getFiles, unUsedFiles } = require("../command");
 const Table = require('cli-table3');
-const askDeleteFiles = require("../utils/utils");
+const { askDeleteFiles } = require("../utils/utils");
 
 
 async function list(chalk, path, options) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qleaner",
   "packageManager": "yarn@4.6.0",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "main": "command.js",
   "bin": "./bin/cli.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "@babel/parser": "^7.28.5",
     "@babel/traverse": "^7.28.5",
     "chalk": "^5.6.2",
+    "cli-progress": "^3.12.0",
     "cli-table3": "^0.6.5",
     "commander": "^14.0.2",
     "enhanced-resolve": "^5.18.3",

package/utils/cssImages.js

@@ -20,12 +20,17 @@ function extractCssImages(cssContent, images, file) {
   return images
 }
 
-async function getCssImages(directory = "src") {
+async function getCssImages(directory = "src", bars) {
   const cssFiles = await fg([
     `${directory}/**/*.{css,scss}`,
   ]);
   let images = [];
+  const cssBar = bars.create(cssFiles.length, 0, {
+    name: 'CSS Files',
+    status: 'Scanning...',
+  });
   for (const file of cssFiles) {
+    cssBar.increment();
     const css = fs.readFileSync(file, "utf-8");
     images = extractCssImages(css, images, file);
   }

package/utils/resolver.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const fs = require('fs');
 const {create} = require('enhanced-resolve');
 
 
@@ -27,6 +28,9 @@ const resolver = create({
   }
 }
 
+
+
+
 module.exports = {
-  createResolver
+  createResolver,
 };