Go To Style (CSS Navigator - StyleSense)

Navigate your styles instantly. Jump directly from any class or id in your HTML, JS, JSX, Vue, PHP, or Laravel Blade files to its corresponding CSS definition with a simple Ctrl+Click.

ALL FEATURES NOW FREE! We've made StyleSense completely free for everyone. Enjoy advanced JavaScript navigation, CSS variable support, global search, and more — no premium tiers, no paywalls.

✨ All Features (100% Free!)

🎯 Core Navigation

• Instant Jump to Definition: Ctrl/Cmd + Click on any CSS class or ID to jump directly to its definition
• Context Menu: Right-click and select "Go to Style" option (Cmd+Shift+G on macOS)
• Real-time Progress: Status bar showing search progress
• Multiple File Navigation: Choose from multiple definitions when a class appears in several files
• Hover Style Previews: Hover over a class/ID (including in querySelector, getElementById, etc.) to see its full CSS rule in a popup
• Not Found Feedback: When no CSS definition is found, view detailed messages in the Output Channel (StyleSense (CSS Navigator))

🚀 Advanced Features (Previously Pro - Now Free!)

Advanced JavaScript Navigation

Ctrl+Click on JavaScript DOM selectors to choose between:

• CSS style definition - Jump to where the style is defined
• HTML element usage - See where the element is used in your markup

Supports:

• querySelector('.wrapper')
• querySelectorAll('.items')
• getElementById('header')
• getElementsByClassName('card')
• classList.add('active'), classList.remove(), classList.toggle(), classList.contains()

Works in <script> tags, .js, .jsx, .ts, and .tsx files.

Enhanced JavaScript Hover Previews

Hover over JavaScript selectors to see:

• CSS rules for styling information
• HTML element usage - Shows up to 3 occurrences with 3 lines of context each

Example: Hover over querySelector('.button') to see both the CSS definition and where <button class="button"> is used in your HTML/JSX files.

CSS Variable Navigation

Ctrl+Click on CSS variables to jump to their definitions:

• Click on var(--primary-color) to jump to --primary-color: #007bff;
• Hover to preview variable values
• Search across all CSS files in your workspace

Global CSS Search

Search for any class or ID across your entire workspace:

• Press Cmd+Shift+C (macOS) or Ctrl+Shift+C (Windows/Linux)
• Type .classname or #idname
• Auto-search as you type (after 700ms)
• Press Enter to search immediately at any time
• Shows all occurrences with file paths and line numbers
• Popup notification when no results found

Multi-file QuickPick

When a class/ID appears in multiple locations, choose from a list showing:

• File name and location indicator (CSS/HTML)
• Line number
• Full file path

Framework CSS Support

Search in Tailwind CSS and Bootstrap files:

• Enable goToStyle.searchInNodeModules in settings
• Automatically detects Tailwind output files
• Works with custom framework configurations

🛠 Framework Support

📂 Smart Detection

The extension automatically detects CSS in:

• Linked CSS files (<link href="...">)
• CSS imports (import './style.css')
• Inline <style> tags
• Build directories (dist/, build/)
• All CSS preprocessors (SCSS, SASS, LESS, Stylus)

⚡ Quick Start

1. Install from VS Code Marketplace
2. Navigate: Ctrl+Click any CSS class or ID to jump to its definition
3. Preview: Hover over classes/IDs (including in JS like querySelector('.wrapper')) to preview CSS rules and HTML usage
4. Search: Press Cmd+Shift+C or use Command Palette for StyleSense: Search CSS Class or ID
5. Enjoy: All features are now completely free!

⚙️ Configuration

Access settings via Cmd+, on macOS or Ctrl+, on Windows/Linux. Search for "Go To Style" to customize behavior.

Default Configuration

{
  "goToStyle.enabled": true,
  "goToStyle.debug": false,
  "goToStyle.searchInNodeModules": false,
  "goToStyle.additionalSearchPaths": [
    "**/dist/**/*.css",
    "**/build/**/*.css",
    "**/output.css",
    "**/styles.css"
  ],
  "goToStyle.maxSearchResults": 500,
  "goToStyle.showStatusBarInfo": true,
  "goToStyle.frameworkDetection": true
}

Configuration Options

🛠 Enabling Key Features

Global CSS Search

1. Press Cmd+Shift+C or open Command Palette → StyleSense: Search CSS Class or ID
2. Type .classname or #idname (minimum 2 characters)
3. Wait 700ms for auto-search OR press Enter to search immediately
4. Select from results to jump to definition
5. If nothing found, a popup notification will appear

Tips:

• Add Tailwind output files to goToStyle.additionalSearchPaths: **/output.css
• Enable goToStyle.debug to see searched files in Output Channel

JavaScript Navigation

1. Ctrl+Click on any JavaScript selector:
   • querySelector('.button')
   • getElementById('header')
   • classList.add('active')
2. Choose between:
   • CSS definition (where styles are defined)
   • HTML usage (where element is used in markup)
3. Works in .js, .jsx, .ts, .tsx, and <script> tags

CSS Variable Navigation

1. Ctrl+Click on var(--variable-name) in any CSS/SCSS file
2. Jumps to --variable-name: value; definition
3. Hover to preview variable value
4. Searches across all CSS files in workspace

Tailwind/Bootstrap Support

1. Set goToStyle.searchInNodeModules to true in settings
2. Extension automatically detects Tailwind/Bootstrap in package.json
3. Searches in framework CSS files from node_modules
4. Add output files to goToStyle.additionalSearchPaths for compiled CSS

JavaScript Hover Previews

Hover over querySelector('.class') or any JavaScript selector to see:

• CSS rules for the selector
• HTML element usage (up to 3 examples with 3 lines of context each)
• Perfect for understanding where and how elements are used

🎹 Keybindings

Tip: Customize keybindings in Preferences: Open Keyboard Shortcuts (JSON).

🎯 Usage Examples

React/JSX

// Click on "button" to jump to CSS
<button className="button primary">Click me</button>

// Hover over "button" to see preview with HTML usage
const el = document.querySelector('.button');

// Choose between CSS and HTML usage
classList.add('active');

Vue

<!-- Click on "card" to jump to CSS -->
<div :class="'card shadow'">Content</div>

<script>
// JavaScript navigation works here too
document.querySelector('.card')
</script>

CSS Variables

:root {
  --primary: #007bff; /* Define here */
  --spacing: 1rem;
}

.button {
  color: var(--primary); /* Click to jump to definition */
  padding: var(--spacing);
}

Global Search

1. Press Cmd+Shift+C
2. Type .btn or #header
3. Press Enter or wait 700ms
4. See all occurrences across workspace

🐞 Troubleshooting

Class/ID Not Found?

1. Check Output Channel: Open StyleSense (CSS Navigator) in Output panel for detailed messages
2. Verify Format: Ensure correct syntax:
   • HTML: class="wrapper"
   • React: className="wrapper"
   • JS: querySelector('.wrapper')
3. Add Search Paths: Include your CSS files in goToStyle.additionalSearchPaths:

   "goToStyle.additionalSearchPaths": [
     "**/dist/**/*.css",
     "**/output.css",
     "**/src/**/*.css"
   ]
   

4. Enable Debug Mode: Set goToStyle.debug to true to see:
   • Which files are being searched
   • Context detection results
   • Found/not found messages

React Project Not Working?

1. Check File Limit: Extension searches up to 500 CSS files by default
2. Verify Imports: CSS files must be:
   • Imported in JS/JSX: import './styles.css'
   • Linked in HTML: <link href="styles.css">
   • In workspace (not excluded by .gitignore)
3. Check className: Use className= not class= in JSX
4. Restart Extension: Reload VS Code window (Cmd+R / Ctrl+R)

Tailwind Classes Not Found?

1. Generate Output CSS: Run npx tailwindcss -i ./src/input.css -o ./src/output.css
2. Add to Search Paths:

   "goToStyle.additionalSearchPaths": [
     "**/output.css",
     "**/dist/**/*.css"
   ]
   

3. Enable node_modules Search:

   "goToStyle.searchInNodeModules": true
   

4. Check package.json: Ensure tailwindcss is listed in dependencies

JS Navigation Not Working?

1. Check Pattern: Ensure correct syntax:
   • ✅ querySelector('.wrapper')
   • ✅ getElementById('header')
   • ✅ classList.add('active')
   • ❌ querySelector(".wrapper ") (extra space)
2. Context Detection: Enable debug mode to see if JS context is detected
3. File Type: Works in .js, .jsx, .ts, .tsx, and <script> tags

CSS Variables Not Working?

1. Check Format:
   • Definition: --variable: value;
   • Usage: var(--variable)
2. Click Position: Click directly on the variable name (not var or parentheses)
3. CSS File Search: Variables must be in discovered CSS files

Hover Preview Not Showing HTML Usage?

1. Check JS Context: Feature works in JavaScript selector context:
   • querySelector('.class')
   • getElementById('id')
   • classList methods
2. HTML Files Exist: Extension searches for actual HTML/JSX usage
3. File Limit: Searches up to 500 HTML files (adjust if needed)

Search Shows No Results?

1. Minimum Characters: Type at least 2 characters after . or #
2. Press Enter: Force immediate search by pressing Enter
3. Check Format: Must start with . (class) or # (ID)
4. Verify CSS Exists: Check if the class/ID actually exists in any CSS file
5. Debug Mode: Enable to see which files are searched

Blade/PHP Support Not Working?

1. File Extension: Ensure file ends with .blade.php or .php
2. Standard Syntax: Use standard HTML attributes: class="wrapper"
3. Language Detection: Check if VS Code recognizes file as Blade/PHP
4. Linked CSS: Add CSS file paths to goToStyle.additionalSearchPaths

Disable Unwanted Features

{
  "goToStyle.enabled": false,              // Disable entire extension
  "goToStyle.showStatusBarInfo": false,    // Hide status bar updates
  "goToStyle.frameworkDetection": false    // Disable framework auto-detection
}

🎉 What's New - Now 100% Free!

We've removed all premium tiers! All features that were previously "Pro" are now available to everyone:

• ✅ Global CSS Search - Search any class/ID across your workspace
• ✅ Advanced JavaScript Navigation - Jump to CSS or HTML from JS selectors
• ✅ Enhanced Hover Previews - See both CSS rules and HTML usage
• ✅ CSS Variable Navigation - Jump to variable definitions
• ✅ Tailwind/Bootstrap Support - Search in framework files
• ✅ Multi-file QuickPick - Choose from multiple definitions
• ✅ And much more!

Why free? We believe developer tools should be accessible to everyone. Enjoy StyleSense without any limitations!

📝 License

MIT License - See LICENSE file for details

💬 Support & Contact

• Email: augustinedevv@gmail.com
• Issues: GitHub Issues
• Repository: github.com/raredevv/css-class-navigator

🙏 Acknowledgments

Built with ❤️ for developers who value productivity and seamless workflow.

Special thanks to all users who helped us realize that making this tool free would benefit the entire developer community!

StyleSense - Navigate your styles with confidence
100% Free. 100% Awesome.
Made with ❤️ by Augustinedevv Team