Unused Styles Remover

A powerful CLI tool that analyzes React Native files and removes unused styles from StyleSheet.create declarations. Works on single files or entire codebases.

Features

• ✅ Single File Mode: Clean individual files
• ✅ Codebase Mode: Scan and clean entire project
• ✅ Dry Run: Preview changes without modifying files
• ✅ Smart Detection: Handles complex usage patterns (conditionals, arrays, spread operators)
• ✅ Optional Backups: Creates .backup files when requested (default: false)
• ✅ Backup Cleanup: Remove all backup files when no longer needed
• ✅ Comprehensive Reporting: Detailed summary of all changes made
• ✅ File Type Support: Works with .tsx, .ts, .jsx, .js files

Usage

Installation

# Use with npx (recommended - always uses latest version)
npx unused-styles-remover --help

# Or install globally
npm install -g unused-styles-remover

Command Line Options

# Show help
npx unused-styles-remover --help

# Clean a single file
npx unused-styles-remover path/to/file.tsx

# Clean entire codebase
npx unused-styles-remover --codebase

# Preview changes without modifying files (dry run)
npx unused-styles-remover --codebase --dry-run

# Clean codebase with backup files
npx unused-styles-remover --codebase --backup

# Remove all backup files
npx unused-styles-remover --clean-backups

# Interactive mode (prompts for file path)
npx unused-styles-remover

Options

• -c, --codebase - Scan and clean the entire codebase
• -d, --dry-run - Show what would be removed without making changes
• -b, --backup - Create backup files before making changes (default: false)
• --cb, --clean-backups - Remove all .backup files from the codebase
• -h, --help - Show help message

Make Executable (Unix/Mac)

chmod +x remove-unused-styles.js
./remove-unused-styles.js --codebase

How It Works

Single File Mode

1. Analyzes the specified file for StyleSheet.create declarations
2. Extracts all style names from each StyleSheet object
3. Searches for usage of each style throughout the file
4. Removes unused styles and creates a backup
5. Reports what was changed

Codebase Mode

1. Scans the entire project directory for React Native files
2. Filters files that contain StyleSheet.create declarations
3. Processes each file individually
4. Excludes common build/dependency directories:
   • node_modules
   • .git
   • build, dist
   • .expo
   • android/build, ios/build, ios/Pods
   • And more...
5. Provides comprehensive summary of all changes

Detection Patterns

The script detects various style usage patterns:

• Direct usage: styles.myStyle or styleSheetName.myStyle
• Array usage: [styles.myStyle, otherStyle]
• Conditional usage: condition ? styles.myStyle : null
• Spread usage: {...styles.myStyle}
• Ternary operators: condition ? styles.styleA : styles.styleB

Backup Cleanup

When you've used the --backup option and confirmed your changes are working correctly, you can clean up all backup files:

$ npx unused-styles-remover --clean-backups
🧹 Scanning for backup files...

📁 Found 8 backup files:
   apps/client-app/ui/components/Button.tsx.backup
   apps/client-app/ui/components/Card.tsx.backup
   apps/partner-app/ui/components/Header.tsx.backup
   apps/partner-app/ui/components/Footer.tsx.backup
   ...

⚠️  Are you sure you want to remove 8 backup files? (y/N): y
🗑️  Removed: apps/client-app/ui/components/Button.tsx.backup
🗑️  Removed: apps/client-app/ui/components/Card.tsx.backup
🗑️  Removed: apps/partner-app/ui/components/Header.tsx.backup
...

📊 Cleanup Summary:
   Backup files found: 8
   Files removed: 8
✅ Cleanup complete!

Example Output

Single File

$ npx unused-styles-remover components/Button.tsx
🗑️  Removed unused styles from styles: [ 'unusedStyle1', 'unusedStyle2' ]
✅ Backup created: components/Button.tsx.backup
✅ Updated file: components/Button.tsx

📊 Summary:
   Original lines: 45
   Updated lines: 32
   Lines removed: 13

Codebase Mode

$ npx unused-styles-remover --codebase
🔍 Scanning codebase in: /path/to/project
📁 Found 23 files with StyleSheet.create declarations

✅ apps/client-app/ui/components/Button.tsx
   Removed: unusedStyle1, unusedStyle2
✅ apps/client-app/ui/components/Card.tsx
   Removed: oldStyle, deprecatedStyle
✅ apps/partner-app/ui/components/Header.tsx
   Removed: temporaryStyle

📊 Codebase Summary:
   Total files scanned: 23
   Files processed: 23
   Files with changes: 8
   Total styles removed: 15

💡 Tip: No backup files were created. Use version control to track changes.

Dry Run Mode

$ npx unused-styles-remover --codebase --dry-run
🔍 Scanning codebase in: /path/to/project
📁 Found 23 files with StyleSheet.create declarations

🔍 DRY RUN MODE - No files will be modified

🔍 apps/client-app/ui/components/Button.tsx
   Would remove: unusedStyle1, unusedStyle2
🔍 apps/client-app/ui/components/Card.tsx
   Would remove: oldStyle, deprecatedStyle

📊 Codebase Summary:
   Total files scanned: 23
   Files processed: 23
   Files with changes: 8
   Total styles that would be removed: 15

Safety Features

• Optional Backups: Creates .backup files when requested (relies on version control by default)
• Non-destructive: Only removes styles that are definitely unused
• Comprehensive Detection: Handles complex usage patterns to avoid false positives
• Dry Run Mode: Preview changes before applying them
• Error Handling: Gracefully handles file access errors and continues processing

Excluded Directories

The codebase scan automatically excludes:

• node_modules
• .git
• .next
• build
• dist
• coverage
• .expo
• android/build
• ios/build
• ios/Pods
• .backup

Requirements

• Node.js (any recent version)
• Files must use StyleSheet.create syntax
• Read/write permissions for the target files

Notes

• The script only removes styles that are completely unused within the same file
• It does not check for styles used in other files (to avoid breaking imports)
• Backup files are optional (disabled by default) - use version control for safety
• Always review the changes before committing to version control
• Supports React Native projects with TypeScript and JavaScript

Best Practices

1. Run with dry-run first: Always preview changes with --dry-run
2. Use version control: Commit your changes before running the script
3. Review changes: Check a few modified files to ensure correctness
4. Test your app: Run your app after cleaning to ensure nothing broke
5. Create backups if needed: Use --backup for extra safety on important files
6. Clean up backups: Use --clean-backups to remove backup files after confirming changes