qleaner 1.0.23 → 1.0.25

package/README.md

@@ -5,6 +5,7 @@ A powerful CLI tool to analyze and clean up your React codebase by finding unuse
 ## Features
 
 - 🔍 **Scan for unused files**: Identify files that are not imported anywhere in your project
+- 🖼️ **Scan for unused images**: Find image files that are not referenced in your codebase
 - 📋 **List all imports**: Get a complete list of all import statements in your codebase with file locations
 - 🎯 **File listing**: List all files in your project
 - 📊 **Table output**: Display results in formatted tables for better readability
@@ -13,6 +14,7 @@ A powerful CLI tool to analyze and clean up your React codebase by finding unuse
 - 💪 **TypeScript support**: Works with TypeScript, JavaScript, JSX, and TSX files
 - 🧪 **Dry run mode**: Preview what would be deleted without actually deleting files
 - 💾 **Smart caching**: Caches scan results for faster subsequent runs (automatically invalidates on file changes)
+- 🎨 **CSS and styled-components support**: Detects images used in CSS files and styled-components
 
 ## Installation
 
@@ -117,6 +119,63 @@ qleaner qlean-scan src --clear-cache
 qleaner qlean-scan src --clear-cache --dry-run
 ```
 
+### Scan for Unused Images
+
+Find image files that are not referenced anywhere in your codebase:
+
+```bash
+qleaner qlean-image <directory> <rootPath> [options]
+```
+
+**Arguments:**
+- `<directory>` - The path to the directory containing image files to scan
+- `<rootPath>` - The root path to the project code that utilizes the images
+
+**Options:**
+- `-e, --exclude-dir-assets <dir...>` - Exclude directories from the asset scan
+- `-f, --exclude-file-asset <file...>` - Exclude files from the asset scan
+- `-F, --exclude-file-print-asset <files...>` - Scan but don't print the excluded asset files
+- `-E, --exclude-dir-code <dir...>` - Exclude directories from the code scan
+- `-S, --exclude-file-code <file...>` - Exclude files from the code scan
+- `-P, --exclude-file-print-code <files...>` - Scan but don't print the excluded code files
+- `-t, --table` - Display results in a formatted table
+- `-d, --dry-run` - Show what would be deleted without actually deleting (skips prompt)
+- `-C, --clear-cache` - Clear the cache before scanning
+
+**Examples:**
+
+```bash
+# Scan for unused images in public/images directory
+qleaner qlean-image public/images src
+
+# Display unused images in a table format
+qleaner qlean-image public/images src --table
+
+# Scan with exclusions for assets
+qleaner qlean-image public/images src -e public/images/icons
+
+# Scan with exclusions for code files
+qleaner qlean-image public/images src -E __tests__ node_modules
+
+# Dry run - preview what would be deleted
+qleaner qlean-image public/images src --dry-run
+
+# Dry run with table output
+qleaner qlean-image public/images src --dry-run --table
+
+# Scan with multiple exclusions
+qleaner qlean-image public/images src -e public/images/icons -E __tests__ -S "**/*.test.*"
+```
+
+**What it detects:**
+- Images imported via `import` statements
+- Images required via `require()` calls
+- Images used in JSX `src` attributes
+- Images in CSS `url()` functions (CSS and SCSS files)
+- Images in styled-components and CSS-in-JS template literals
+- Images in inline styles (backgroundImage, etc.)
+- Images referenced in string literals and template literals
+
 ## Output Formats
 
 Qleaner provides two output formats:
@@ -131,9 +190,12 @@ Qleaner provides two output formats:
    - Import tables show: File, Line, Column, and Import path
    - File tables show: File path
    - Unused files table shows: Unused file paths (or "Would Delete" in dry run mode)
+   - Unused images table shows: Unused image paths (or "Would Delete" in dry run mode)
 
 ## How It Works
 
+### File Scanning (qlean-scan)
+
 1. **File Discovery**: Recursively finds all `.tsx`, `.ts`, `.js`, and `.jsx` files in the specified directory
 2. **Caching**: Checks cache for previously scanned files. Files that haven't changed are skipped for faster performance
 3. **Import Extraction**: Parses files using Babel AST and extracts all import statements (only for changed files or cache misses)
@@ -143,19 +205,49 @@ Qleaner provides two output formats:
 7. **Reporting**: Outputs the results in standard or table format based on your preferences
 8. **Safe Deletion**: In dry run mode, shows what would be deleted without making changes. In normal mode, prompts for confirmation before deletion
 
+### Image Scanning (qlean-image)
+
+1. **Image Discovery**: Recursively finds all image files (`.png`, `.jpg`, `.jpeg`, `.svg`, `.gif`, `.webp`) in the specified directory
+2. **Code Scanning**: Scans all code files (`.js`, `.jsx`, `.ts`, `.tsx`) for image references
+3. **Image Detection**: Detects images through multiple methods:
+   - Import statements (`import img from './image.png'`)
+   - Require calls (`require('./image.png')`)
+   - JSX src attributes (`<img src="./image.png" />`)
+   - CSS url() functions in CSS/SCSS files
+   - Styled-components and CSS-in-JS template literals
+   - Inline styles (backgroundImage, etc.)
+   - String and template literals containing image paths
+4. **Path Normalization**: Normalizes all detected image paths for consistent matching
+5. **Analysis**: Compares discovered image files with detected references to identify unused images
+6. **Reporting**: Outputs the results in standard or table format
+7. **Safe Deletion**: In dry run mode, shows what would be deleted without making changes. In normal mode, prompts for confirmation before deletion
+
 ## Supported File Types
 
+**Code files:**
 - `.js` - JavaScript files
 - `.jsx` - JavaScript React files
 - `.ts` - TypeScript files
 - `.tsx` - TypeScript React files
 
+**Image files (for qlean-image):**
+- `.png` - PNG images
+- `.jpg`, `.jpeg` - JPEG images
+- `.svg` - SVG images
+- `.gif` - GIF images
+- `.webp` - WebP images
+
+**CSS files (for image detection):**
+- `.css` - CSS files
+- `.scss` - SCSS files
+
 ## Use Cases
 
 - 🧹 **Code cleanup**: Remove dead code and unused files from your React projects
+- 🖼️ **Image cleanup**: Find and remove unused image assets to reduce project size
 - 📊 **Code analysis**: Understand import patterns and dependencies in your codebase
-- 🔍 **Project audit**: Identify orphaned files that may have been forgotten
-- 📦 **Bundle optimization**: Find files that can be removed to reduce bundle size
+- 🔍 **Project audit**: Identify orphaned files and assets that may have been forgotten
+- 📦 **Bundle optimization**: Find files and images that can be removed to reduce bundle size
 - 🎯 **Maintenance**: Keep your codebase clean and maintainable
 
 ## Configuration
@@ -216,4 +308,4 @@ MIT
 
 ## Version
 
-Current version: 1.0.13
+Current version: 1.0.25

package/command.js

@@ -4,7 +4,6 @@ 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,
@@ -15,14 +14,6 @@ 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) => {
@@ -38,12 +29,11 @@ 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...',
-  });
-
+  let index = 0;
   for (const file of files) {
+    index++;
+    console.clear();
+    console.log('Scanning file...', index, 'of', files.length);
     const code = fs.readFileSync(file, "utf8");
     const ast = parser.parse(code, {
       sourceType: "module",
@@ -71,10 +61,7 @@ async function getFiles(directory = "src", options, chalk) {
     //     }
     //   },
     // });
-    scanBar.increment();
   }
-  
-  bars.stop();
 
   if (options.table) {
     const tableImports = new Table({
@@ -125,14 +112,6 @@ 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}`];
@@ -151,15 +130,13 @@ 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;
-  let i = 0;
+  let index = 0;
   for (const file of files) {
+    index++;
+    console.clear();
+    console.log('Checking file...', index, 'of', files.length);
     const code = fs.readFileSync(file, "utf8");
     if (needsRebuild(file, code, cache)) {
       const ast = parser.parse(code, {
@@ -193,9 +170,6 @@ 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
@@ -203,14 +177,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;
+  index = 0;
   for (const file of files) {
+    index++;
+    console.clear();
+    console.log('Checking file...', index, 'of', files.length);
     const code = fs.readFileSync(file, "utf8");
     if (!cache[file].isImported || needsRebuild(file, code, cache)) {
       let i = 0;
@@ -240,12 +213,8 @@ 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

@@ -6,7 +6,6 @@ const traverse = require("@babel/traverse").default;
 const Table = require("cli-table3");
 const { getCssImages } = require("../utils/cssImages");
 const { askDeleteFiles } = require("../utils/utils");
-const cliProgress = require("cli-progress");
 
 // Regex for matching url("x.png") or url('x.png') or bg-[url('x.png')]
 const URL_EXTRACT_REGEX = /url\((['"]?)([^"')]+)\1\)/gi;
@@ -108,14 +107,6 @@ function extractFromJSXStyle(node, file, collected) {
  * 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 = [];
 
@@ -124,13 +115,11 @@ async function getUnusedImages(chalk, imageDirectory, codeDirectory, options) {
 
   // ---- Scan Code Files ----
   const codeFiles = await fg([`${codeDirectory}/**/*.{js,jsx,ts,tsx}`]);
-  const codeBar = bars.create(codeFiles.length, 0, {
-    name: 'Code Files',
-    status: 'Scanning...',
-  });
-
-
+  let index = 0;
   for (const file of codeFiles) {
+    index++;
+    console.clear();
+    console.log('Scanning code files...', index, 'of', codeFiles.length);
     const code = fs.readFileSync(file, "utf8");
 
     const ast = parser.parse(code, {
@@ -253,41 +242,37 @@ async function getUnusedImages(chalk, imageDirectory, codeDirectory, options) {
         extracted.forEach((v) => used.add(JSON.stringify({ path: v, file })));
       },
     });
-    codeBar.increment();
   }
 
   // Add CSS images
-  const cssImages = await getCssImages(codeDirectory, bars);
+  const cssImages = await getCssImages(codeDirectory);
   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();
+  index = 0;
   for (const entry of used) {
-    normalizeBar.increment();
+    index++;
+    console.clear();
+    console.log('Normalizing images...', index, 'of', used.size);
     const { path: p } = JSON.parse(entry);
     const normalized = normalize(p, imageDirectory);
     if (normalized) normalizedUsed.add(normalized);
   }
 
-  const unusedBar = bars.create(imageFiles.length, 0, {
-    name: 'Determining Unused Images',
-    status: 'Determining...',
-  });
   // ---- Determine unused ----
+  index = 0;
   for (const img of imageFiles) {
-    unusedBar.increment();
+    index++;
+    console.clear();
+    console.log('Determining unused images...', index, 'of', imageFiles.length);
     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({

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "qleaner",
   "packageManager": "yarn@4.6.0",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "main": "command.js",
   "bin": "./bin/cli.js",
   "scripts": {
     "start": "node ./bin/cli.js",
-    "resolve": "node ./utils/resolver.js"
+    "resolve": "node ./utils/resolver.js",
+    "scan": "node ./scanning.js"
   },
   "devDependencies": {
     "@types/node": "^20.10.5",

package/utils/cssImages.js

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