Rainbow Index for Visual Studio Code

Full editor support for the Rainbow Index CSS system: theme-aware IntelliSense, real color swatches, safe refactors, and a live view of your theme and elements — powered by the same engine your build uses, so what the editor says always matches what the build does.

Features

Diagnostics that understand your theme

Every class in your markup, clsx/cva/ri/safelist calls included, is validated against your project's theme:

• Unknown classes and variants get "did you mean" quick fixes — value typos included (bg-blu-500 → bg-blue-500).
• Classes that ri() conflict resolution would drop render faded, with a one-click Remove overridden class fix and a remove-all source action.
• The same conflict analysis runs inside merge calls (ri, twMerge, cn), per string literal — ri("px-2 px-4") is flagged, while ri("px-2", cond && "px-4"), a deliberate runtime override, stays quiet.
• Problems in your CSS entry's directives (@color, @font, …) are anchored to the exact offending at-rule, and VS Code's built-in CSS validator learns all Rainbow Index at-rules so it stops flagging them as unknown.
• Every warning carries its real RI-… code, and a quick fix writes the ri-disable comment that silences it — on that line, or for the whole file. The offer appears only where the comment would work: codes that report a broken build refuse to be silenced, and a scan warning, which names no position, is only offered the file-wide form.

Syntax highlighting

Rainbow Index syntax lights up in every stylesheet: directive at-rules (@color, @fluid compact, @utility card-*, …), @apply/@a class lists with variants, arbitrary values, (--var) shorthands and ! markers, functional utility blocks (name-* { … }) inside scale bodies, and ri-disable suppression pragmas with their RI-… codes inside comments. The grammars extend the built-in CSS highlighting by injection, so <style> blocks in HTML, Vue, and Svelte documents get the same treatment.

Completions and hovers

The finite completion universe for your theme — every item probe-verified against the real resolver: statics, theme-token expansions with palette swatches on color items, spacing and numeric templates as snippets, variant prefixes with what each one wraps, and the open-ended families (data-, group-, supports-, arbitrary […]) as snippets. Hover any class for its generated CSS, the meaning of each variant in the chain, and the resolved light/dark color. A numeric font weight (font-617) also reports whether any font you load actually carries it, and names the weights that are available — the same check the compiler warns on. Works in class attributes, helper calls, and multi-line @apply lists — variant groups included.

Colors you can see and pick

VS Code's native color box appears on every color-bearing class (bg-brand-500, border-[#f80]) and on @color definition values in your stylesheet — generative chroma hue pairs resolve through the same OKLCH math as your emitted CSS variables, and dark definitions show their dark value. Dragging the picker on a class offers the nearest theme classes instead of raw hex, so edits stay inside your palette, alpha modifiers preserved.

Theme view

Your resolved theme as a browsable tree: colors as real light/dark swatches (generative palettes show the chroma/hue that build them, with the 500 stop as the example swatch), the type scale, fonts, spacing, breakpoints, named radii, named fluid ranges, shadows, weights, and motion tokens. Click any token to copy its class name. The package ships almost no scales of its own, so a scale you have not defined yet says so and names the directive that fills it, rather than vanishing from the tree.

Elements view

Every element of the active document with its classes grouped by origin — inline tokens, programmatic helper calls, and the workspace CSS rules that target the element (with their @apply utilities resolved). The tree follows your cursor. Add classes from a theme-fed picker, remove them in place, or route a class through a stylesheet rule; rules and @apply tokens jump to their definitions.

Sort classes

Rainbow Index: Sort Classes orders every class attribute by the generated CSS's own cascade order. Unknown tokens keep their relative order at the front; variant groups sort as a unit and within their braces. Also available as the source.sortClasses.rainbowindex code action for editor.codeActionsOnSave.

Navigate and refactor

• Go to Definition on a custom utility, custom variant, or theme color jumps to its directive — including a utility block written inside a named scale (roof-minus-* { … } in @rounded), which has no @utility line of its own.
• Find References sweeps your workspace sources and @apply sites.
• Rename a custom utility and the directive, every usage, and every @apply site change together — with a completeness guard that aborts rather than half-renaming. A utility block declared in a named scale is rewritten in place too, and must keep its scale's class prefix, which the enclosing directive owns.
• Extract to class turns selected inline utilities into a named @utility in your CSS entry and swaps the selection for the new name.
• Collapse / expand variant groups rewrites hover:px-2 hover:py-1 ⇄ hover:{px-2 py-1}.

Theme audit

Rainbow Index: Audit Theme Usage sweeps the workspace and reports which declared tokens — colors and their stops, text sizes, weights, fonts, shadows, radii, motion, breakpoints — are never referenced.

Build integration

Tasks for rainbowindex build and watch, a Generate Types command producing rainbowindex-env.d.ts for ri() autocomplete (built from the same class universe the completions use), and Initialize Project for wiring Rainbow Index into a new workspace.

Getting started

1. Open a project that uses Rainbow Index — or run Rainbow Index: Initialize Project to set one up.
2. The extension finds your CSS entry (the stylesheet with your @color, @text, @utility, … directives) automatically. If it guesses wrong, run Rainbow Index: Pick CSS Entry.
3. The {} language status indicator always shows which Rainbow Index version is active and which entry drives it — with a warning and a picker when no entry is found.

A Get started with Rainbow Index walkthrough is available from the Welcome page.

If your workspace has its own rainbowindex installed, the extension prefers it over the bundled copy, so diagnostics always match the version your project actually builds with.

Split token files

Directives don't have to live in the entry. An entry that does

@import "rainbowindex";
@import "./tokens.css";

is read with tokens.css inlined, so a @color declared there completes, hovers, and swatches like any other — and an unsaved edit to it counts, so a colour you just typed is available before you save. Package presets work the same way: @import "acme/theme.css" resolves through node_modules exactly as the CLI resolves it.

This needs a rainbowindex with the import-inlining capability. The {} indicator says @import contents unread when the copy driving your workspace is older, rather than leaving an imported token file silently contributing nothing.

Multi-root workspaces

Every workspace folder is its own project: its own CSS entry, its own installed rainbowindex, its own theme. A component is validated, completed, and coloured against the theme of the folder it lives in, and the build tasks are offered per folder. The Theme Explorer and the {} indicator follow the editor you're in.

Commands

Command	What it does
Rainbow Index: Sort Classes	Reorder class attributes into cascade order.
Rainbow Index: Audit Theme Usage	Report unused theme tokens as a markdown document.
Rainbow Index: Generate Types	Produce rainbowindex-env.d.ts for ri() autocomplete.
Rainbow Index: Initialize Project	Run rainbowindex init in a terminal.
Rainbow Index: Open CSS Entry	Jump to the stylesheet driving the theme.
Rainbow Index: Pick CSS Entry	Choose the entry explicitly.
Rainbow Index: Refresh	Re-detect the entry and rebuild the views.
Rainbow Index: Add Class	Add a theme-picked class to the element at the cursor.

Settings

Setting	Default	Description
rainbowindex.cssEntry	auto-detect	Workspace-relative path to the CSS entry.
rainbowindex.diagnostics.enabled	true	Problems-panel diagnostics.
rainbowindex.diagnostics.overridden	true	Faded warnings for classes ri() would drop.
rainbowindex.scan.maxCssFiles	200	Stylesheet indexing cap for the Elements view.
rainbowindex.scan.maxSourceFiles	300	Source-file cap for references, rename, and the audit.

Settings react immediately — no reload needed.

Good to know

Element structure, stylesheet matching, and programmatic class detection are intentionally lightweight approximations tuned for responsiveness: the Elements view shows candidate rules and jumps you to them rather than replicating the full CSS cascade. Very large files (over 1 MB) are excluded from analysis, and the language status indicator will say so.