A lightweight, high-performance VS Code extension designed to streamline development by bridging the gap between your styles and templates.
Features
1. Smart Reference Navigation
Go To HTML Usage: Right-click a class name in your SCSS/CSS file to instantly see a list of HTML files where that exact class is referenced.
Go To Definition (F12): Press F12 on a style class to jump directly to its first usage in your HTML templates.
Find All References (Shift + F12): Instantly trace and list every single HTML reference of a style selector across your entire workspace.
2. Hardcoded Color Auditor
Workspace Scanner: Run the Detect Hardcoded Colors command to audit your stylesheets. It displays a clean list of raw colors alongside their exact file paths and line numbers so you can quickly replace them with design tokens.
Real-Time Highlighting: Automatically outlines raw color values (HEX, RGB, RGBA) inside your active editor with a warning box, complete with a hover message suggesting you use variables instead.
How to Use
Finding HTML Links: Open any .scss or .css file, put your cursor on a class name, and press F12 or right-click to find references.
Checking Raw Colors: Right-click anywhere inside your style file and choose Detect Hardcoded Colors.
Upcoming Features (Roadmap)
Multi-File Expansion: Bring hardcoded color detection into HTML templates and TypeScript files.
Smart Filtering: Add an exclusion filter for global files (like variables.scss or helper.scss) to ignore intentional color definitions.
Unused Style Detection: Find and clean up dead SCSS code that isn't being used in your HTML.
Angular ngClass Support: Deep scanning for dynamic class names used inside template expressions.
