CSS Sync Hunter 🎯

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

1. Split your View: Open your component (e.g., page.tsx) on the left and your stylesheet (e.g., globals.css) on the right.
2. Start Typing: Inside a className attribute, start typing a class that exists in your CSS.
3. 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:

1. Open VS Code.
2. Press Ctrl+Shift+X to open Extensions.
3. Click the ... (Views and More Actions) in the top right.
4. Select Install from VSIX... and choose the generated file.

---

Enjoy a faster styling workflow!