Scout and navigate between CSS selectors and HTML elements with ease! Style Scout is a VS Code extension that provides bidirectional navigation between your CSS and HTML/JSX files.
Features
Bidirectional Navigation
From CSS to HTML: Click on any CSS selector to find all matching HTML elements across your project
From HTML to CSS: Click on any HTML element to find all CSS rules that apply to it
Smart Recognition
Supports CSS, SCSS, and LESS files
Works with HTML, JSX, and TSX files
Recognizes class selectors (.class), ID selectors (#id), and tag selectors
Handles pseudo-classes and pseudo-elements intelligently
Multiple Navigation Options
Go to Definition (F12): Navigate directly to CSS rules or HTML elements
Peek Definition: Quick preview without leaving your current file
Split Editor (Ctrl+Shift+F12): Open CSS files in a side-by-side view for simultaneous editing
Configurable Search
Search Scope: Choose between workspace, workspace folder, or current folder
Exclude Patterns: Customize which files and folders to ignore (node_modules, dist, build excluded by default)
Context Menu: Optional right-click menu integration
Commands
Command
Keybinding
Description
Style Scout: Go to Definition
F12
Navigate to CSS rules or HTML elements
Style Scout: Open CSS in Split Editor
Ctrl+Shift+F12
Open related CSS file in split view
Style Scout: Open Element in Split Editor
Ctrl+Alt+F12
Open HTML element in split view (from CSS)
Extension Settings
This extension contributes the following settings:
styleScout.enableContextMenu: Show Style Scout commands in the editor context menu (default: true)
styleScout.showNotifications: Show information messages when navigating between files (default: true)
styleScout.searchScope: Scope for searching CSS/HTML files
workspace: Search entire workspace (all folders)
workspaceFolder: Search current workspace folder only (default)
currentFolder: Search current file's folder and subfolders
styleScout.excludePatterns: Glob patterns to exclude from search (default: ["**/node_modules/**", "**/dist/**", "**/build/**", "**/.git/**"])
Requirements
VS Code 1.85.0 or higher
Usage Examples
Finding HTML elements from CSS: Open a CSS file, place your cursor on a selector like .navbar, press F12 to see all HTML elements with that class.
Finding CSS rules from HTML: Open an HTML/JSX file, click on an element like <div className="navbar">, press F12 to see all CSS rules targeting that element.
Multiple Selector Matching: For complex elements like <div id="header" class="navbar active">, Style Scout finds ALL applicable CSS rules:
Tag selector: div { ... }
ID selector: #header { ... }
Class selectors: .navbar { ... } and .active { ... }
Enhanced Split Editor Workflow:
From HTML (Ctrl+Shift+F12): Opens CSS file with matching rules. If multiple CSS files contain the selectors, shows a picker to choose which file to open.
From CSS (Ctrl+Alt+F12): Opens HTML file containing the selector. Shows file picker for multiple files, then element picker for multiple instances.
All matching selectors/elements are highlighted with temporary visual decorations.
Smart Picker Interface: When multiple files or elements match:
File Picker: Shows filename, match count, and relative path
Element Picker: Shows line number, code preview, and character position
Visual Feedback: 3-second highlighting of all matches
Known Issues
Multi-line CSS selectors may not always be recognized correctly
Complex CSS selectors with combinators (>, +, ~) have limited support
Release Notes
1.0.0
Initial release of Style Scout with comprehensive bidirectional navigation features, including multiple selector matching and visual highlighting.
