Vite CSS Navigator

Navigate static CSS imports directly to their source files in VSCode, including paths resolved through Vite aliases.

Features

• Cmd/Ctrl + Click and F12 navigation.
• Vite resolve.alias support without executing the Vite config.
• Static imports in JavaScript, TypeScript, JSX, and TSX.
• Standard CSS @import statements in style files, including Tailwind CSS language mode.
• CSS Modules and Vite query strings such as ?inline, ?url, and ?raw.
• Nearest-config selection for monorepos and multi-root workspaces.

import '@/styles/index.css'
import styles from '#ui/button.module.scss?inline'

@import "@/styles/theme.css";

Supported Vite aliases

Object aliases and array aliases with string find values are supported:

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

The static evaluator understands common strings, template literals, __dirname, import.meta.url, path.resolve, path.join, path.dirname, and fileURLToPath. Dynamic config functions, plugin-generated aliases, and regular-expression aliases are ignored.

Tailwind CSS compatibility

The Tailwind CSS language service registers its own document links after project initialization. Those links do not understand Vite aliases and can override this extension's links. Vite CSS Navigator therefore disables editor.links by default only for the tailwindcss language mode, allowing Cmd/Ctrl + Click to use the alias-aware definition provider instead. Explicit user or workspace settings still take precedence over this default.

Development

pnpm install
pnpm check

Open the repository in VSCode and run the Run Extension launch configuration.

Package and install

# Package the current version without changing package.json or creating a commit
pnpm package

# vscode
code --install-extension armantang.vite-css-navigator-<version>.vsix
# cursor
cursor --install-extension armantang.vite-css-navigator-<version>.vsix

Use the release command to update the version, package the extension, and create a chore(release): v<version> commit. It increments the patch version by default and requires a clean Git working tree.

pnpm release
pnpm release 1.0.1
pnpm release major
pnpm release minor
pnpm release patch

Publish the VSIX through Visual Studio Marketplace to support VSCode discovery.

License

MIT