CSS Sync Hunter is a high-speed developer tool that bridges the gap between your structure (.tsx, .jsx, .html) and your styles (.css).
Stop manually searching for classes. As you type a class name in your markup, the extension instantly scrolls your split-pane CSS file to the correct definition.
✨ Features
Live Typing Sync: The CSS file scrolls character-by-character as you type.
Smart Attribute Detection: Only triggers when your cursor is inside className="..." or class="..." to avoid unnecessary jumping.
Hyphen & Underscore Support: Perfectly handles complex class names like .price-change-card__header.
Split-Pane Optimized: Designed specifically for side-by-side workflows. It detects your open CSS file in the adjacent partition automatically.
Visual Feedback: Briefly highlights the matched CSS class so you never lose your place.
🚀 How to Use
Split your View: Open your component (e.g., page.tsx) on the left and your stylesheet (e.g., globals.css) on the right.
Start Typing: Inside a className attribute, start typing a class that exists in your CSS.
Watch the Magic: The right pane will automatically follow your keystrokes and scroll to the definition.
🛠 Extension Settings
This extension works out of the box with no configuration required. It targets:
.css files
.tsx, .jsx, .html files
📦 Manual Installation
If you are installing via VSIX:
Open VS Code.
Press Ctrl+Shift+X to open Extensions.
Click the ... (Views and More Actions) in the top right.
Select Install from VSIX... and choose the generated file.
