Pagani Design System

VS Code extension for the Pagani (EDS) design system. Provides autocomplete, hover info, real-time diagnostics, and inline color preview.

Features

• Autocomplete — var(--eds in CSS suggests all design tokens; eds- in className/clsx suggests utility classes
• Hover — Shows resolved value, reference chain, hierarchy level, and CSS declarations
• Diagnostics — Real-time validation against 7 lint rules (hardcoded values, unknown tokens, hierarchy violations)
• Color swatches — Inline color preview for var(--eds-color-*) tokens

Installation

Build and install the .vsix:

cd apps/pagani-vscode
pnpm build
pnpm package    # creates pagani-vscode-0.1.0.vsix

Then in VS Code: Extensions > "..." menu > "Install from VSIX..."

Configuration

How It Works

1. Activates when @smallcase/pagani is detected in node_modules
2. Parses all pagani CSS files and builds a token/class index
3. Registers completion, hover, diagnostic, and color providers
4. Watches pagani CSS files for changes and rebuilds the index automatically

Supported Languages

• CSS / CSS Modules
• TypeScript React (.tsx)
• TypeScript (.ts)
• JavaScript React (.jsx)
• JavaScript (.js)

Development

pnpm build       # Build with esbuild
pnpm watch       # Watch mode
pnpm typecheck   # Type-check
pnpm lint        # ESLint

To test: press F5 in VS Code to launch an Extension Development Host, then open a project that uses @smallcase/pagani.