From 698724208f18b9d11bcefc622fb5cf7623cf67d7 Mon Sep 17 00:00:00 2001
From: NinjaPug <36635276+programmingPug@users.noreply.github.com>
Date: Tue, 10 Jun 2025 16:51:45 -0400
Subject: [PATCH] Update LC and Readme

---
 LICENSE   |   4 +-
 README.md | 193 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 193 insertions(+), 4 deletions(-)

diff --git a/LICENSE b/LICENSE
index fa4f02e..d840308 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 NinjaPug
+Copyright (c) 2025 Christopher Koch (programmingPug)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index 220d524..0583a88 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,191 @@
-# angular-unused-styles-analyzer
-Analyzes Angular components for unused CSS/SCSS styles and highlights them in real-time
+# Angular Unused Styles Analyzer
+
+A Visual Studio Code extension that automatically detects and highlights unused CSS/SCSS styles in Angular components. Keep your stylesheets clean and optimized by identifying dead code in real-time.
+
+## Features
+
+✨ **Real-time Analysis** - Automatically analyzes styles as you type
+🔍 **Multi-file Detection** - Scans HTML templates, TypeScript components, and stylesheets
+🎯 **Angular-aware** - Understands Angular-specific patterns like `[class.myClass]`, `[ngClass]`, and `@HostBinding`
+⚡ **Performance Optimized** - Lightweight analysis that won't slow down your development
+🎨 **SCSS Support** - Works with both CSS and SCSS files
+🚫 **Smart Ignoring** - Configurable ignored selectors (`:host`, `::ng-deep`, etc.)
+
+## How It Works
+
+The extension analyzes your Angular component files in three steps:
+
+1. **Extracts CSS selectors** from your `.component.scss` or `.component.css` files
+2. **Scans for usage** in your `.component.html` templates and `.component.ts` files
+3. **Highlights unused styles** with warning diagnostics directly in your editor
+
+### Supported Usage Patterns
+
+**HTML Template Detection:**
+- `class="my-class another-class"`
+- `id="my-element"`
+- `[class.dynamic-class]="condition"`
+- `[ngClass]="classObject"`
+
+**TypeScript Component Detection:**
+- `renderer.addClass(element, 'my-class')`
+- `element.classList.add('my-class')`
+- `@HostBinding('class.my-class')`
+- String literals that look like CSS classes
+
+## Installation
+
+### From VS Code Marketplace
+1. Open VS Code
+2. Go to Extensions (`Ctrl+Shift+X`)
+3. Search for "Angular Unused Styles Analyzer"
+4. Click Install
+
+### From Command Line
+```bash
+code --install-extension programmingPug.angular-unused-styles-analyzer
+```
+
+## Usage
+
+### Automatic Analysis
+The extension automatically analyzes your Angular component styles when you:
+- Open a `.component.scss` or `.component.css` file
+- Make changes to component files
+- Save files (if enabled in settings)
+
+### Manual Analysis
+- **Single Component**: Right-click on a style file → "Angular: Analyze Unused Styles"
+- **Entire Workspace**: `Ctrl+Shift+P` → "Angular: Analyze Entire Workspace"
+
+### Visual Indicators
+Unused styles are marked with:
+- 🔸 Yellow warning squiggles under the selector
+- 💡 Hover tooltip explaining why the style appears unused
+
+## Configuration
+
+Configure the extension through VS Code settings (`Ctrl+,`):
+
+```json
+{
+  "angularUnusedStyles.enableRealTimeanalysis": true,
+  "angularUnusedStyles.analyzeOnSave": true,
+  "angularUnusedStyles.showInformationMessages": true,
+  "angularUnusedStyles.ignoredSelectors": [
+    "::ng-deep",
+    ":host",
+    ":host-context",
+    ":host(.*)"
+  ]
+}
+```
+
+### Settings Reference
+
+| Setting | Type | Default | Description |
+|---------|------|---------|-------------|
+| `enableRealTimeanalysis` | boolean | `true` | Enable real-time analysis as you type |
+| `analyzeOnSave` | boolean | `true` | Automatically analyze when files are saved |
+| `showInformationMessages` | boolean | `true` | Show completion messages after analysis |
+| `ignoredSelectors` | array | See above | CSS selectors to ignore (supports regex) |
+
+## Examples
+
+### Before (Unused Styles Highlighted)
+```scss
+.used-class {
+  color: blue;
+}
+
+.unused-class {  // ⚠️ Warning: appears to be unused
+  color: red;
+}
+
+:host {  // ✅ Ignored (in default config)
+  display: block;
+}
+```
+
+### Component Usage Detection
+```typescript
+// TypeScript - These classes will be detected as "used"
+@Component({...})
+export class MyComponent {
+  @HostBinding('class.dynamic-class') isDynamic = true;
+  
+  toggleClass() {
+    this.renderer.addClass(this.elementRef.nativeElement, 'added-class');
+  }
+}
+```
+
+```html
+<!-- HTML Template - These classes will be detected as "used" -->
+<div class="used-class" [class.dynamic-class]="condition">
+  <span [ngClass]="{'conditional-class': isActive}">Content</span>
+</div>
+```
+
+## Limitations
+
+- **Dynamic class names**: Classes built from variables or complex expressions may not be detected
+- **Third-party libraries**: Styles used by external components may appear unused
+- **Complex selectors**: Very complex CSS selectors might have edge cases
+- **Build-time classes**: Classes added by build tools or preprocessors may not be detected
+
+## Troubleshooting
+
+### False Positives
+If valid styles are marked as unused:
+
+1. **Check dynamic usage**: The style might be applied via TypeScript code
+2. **Review ignored selectors**: Add patterns to the `ignoredSelectors` setting
+3. **Verify file structure**: Ensure component files follow Angular naming conventions
+
+### Extension Not Working
+1. **Check file extensions**: Only works with `.component.scss` and `.component.css` files
+2. **Verify Angular project**: Extension is designed for Angular component architecture
+3. **Restart VS Code**: Sometimes needed after changing settings
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit issues and pull requests.
+
+### Development Setup
+```bash
+git clone https://github.com/programmingPug/angular-unused-styles-analyzer.git
+cd angular-unused-styles-analyzer
+npm install
+npm run compile
+```
+
+### Testing
+- Press `F5` in VS Code to launch the Extension Development Host
+- Open an Angular project in the new window to test the extension
+
+## Release Notes
+
+### 1.0.0
+- Initial release
+- Real-time unused style detection
+- Support for CSS and SCSS files
+- Angular-specific pattern recognition
+- Configurable ignored selectors
+- Context menu integration
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Support
+
+- 🐛 **Report bugs**: [GitHub Issues](https://github.com/programmingPug/angular-unused-styles-analyzer/issues)
+- 💡 **Feature requests**: [GitHub Issues](https://github.com/programmingPug/angular-unused-styles-analyzer/issues)
+- 📧 **Email**: ckoch@lazypug.net
+
+---
+
+**Happy coding!** 🐶💻
+
+Made with ❤️ by [Christopher Koch](https://github.com/programmingPug)
\ No newline at end of file