Astro CSS

Jump to CSS class and ID definitions within Astro files.

Features

• Press F12 on any CSS class or ID in your Astro file's HTML to jump to its definition
• Supports both classes and IDs
• Shows all matching definitions in a references panel when multiple exist
• Works with CSS in the same file's <style> tag
• Falls back to VS Code's default CSS language server for external stylesheets

Usage

1. Open an Astro file
2. Click on any class name or ID in the HTML
3. Press F12 to jump to the definition
4. Press Alt+F12 to peek at the definition

Examples

<div class="container" id="hero">
  <h1 class="title">Hello</h1>
</div>

<style>
  .container {
    padding: 20px;
  }

  #hero {
    background: blue;
  }

  .title {
    font-size: 24px;
  }
</style>

Press F12 on any class or ID in the HTML to jump to its CSS definition.

Requirements

• VS Code 1.74.0 or higher
• Astro language support

Known Issues

• When a class/ID exists in both the Astro file's <style> tag and external CSS files, only the internal definitions are shown

Release Notes

0.1.0

• Initial release
• Support for CSS classes and IDs
• Multiple definition support with references panel
• Fallback to default CSS language server

Enjoy!