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 server registers its own document links after project initialization. Those links do not resolve Vite aliases and otherwise override this extension's links. Vite CSS Navigator disables editor.links by default only for the tailwindcss language mode, so Cmd/Ctrl + Click uses the alias-aware definition provider instead. An explicit user or workspace setting can override this default.

Limitations

• The target style file must include its extension and exist exactly at the resolved path.
• No extension completion, directory index lookup, or Sass partial inference.
• Dynamic import(), require(), Sass @use, and Sass @forward are not supported.
• Only local file workspaces are supported in version 0.1.0.

Development

pnpm install
pnpm check

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

Package and install

pnpm package
code --install-extension armantang.vite-css-navigator-0.1.0.vsix

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

License

MIT