CSS Variables Assistant downloads statistics

The fastest way to work with CSS custom properties & design tokens in JetBrains IDEs

CSS Variables Assistant turns var(--my-token) into a first-class citizen in WebStorm, IntelliJ IDEA Ultimate, PhpStorm, PyCharm Professional, GoLand and RubyMine. Get instant autocomplete, rich inline documentation with colour swatches and pixel equivalents, and full resolution of design-token @import, @use, and @forward chains across your project and node_modules.

Built for modern CSS workflows: Tailwind layers, shadcn/ui tokens, Radix colours, Material tokens, CSS-in-JS bridge files, design-system packages, multi-theme setups (light / dark / high-contrast via media queries), SCSS & LESS & SASS.

Why developers install it

• Smart autocomplete inside var(--…) – your entire token catalog surfaces the moment you open a var() call. Works in CSS, SCSS, SASS and LESS files. • Direct SCSS/Sass/LESS variable completion – complete $brand-primary in SCSS/Sass and @brand-primary in LESS outside var(...), with the same resolved-value preview, colour icons and quick documentation used for CSS custom properties. • Instant in-place documentation – hover any --token for a rich popup showing the resolved value, colour swatch, HSB / hex, pixel equivalent for rem / em / % / vh / vw, WCAG AA / AAA contrast ratio, and the full @import resolution chain. • Follows stylesheet module chains automatically – resolves legacy @import plus modern Sass @use / @forward, including design-token packages inside node_modules, with configurable depth and scope controls. • Understands media-query context – tokens redefined under @media (prefers-color-scheme: dark), min-width breakpoints or any other context are shown side-by-side so you can compare values at a glance. • Three-option sort order (new in 1.8.0) – sort completions by value ascending, by value descending, or alphabetically. Applies consistently whether the popup opens at var(--|) or mid-prefix. • JSDoc-style comments – parse @name, @description, @example from block comments above your tokens and render them in the popup. • Derived-variable marker – alias / recursive completions get a ↗ badge so you know at a glance which values were resolved through references. • Debug import chain – a dedicated context-menu action prints the full import resolution tree for any CSS file. Answers "where does this token actually come from?" in one click. • Customizable documentation columns – show or hide Context, Color Swatch, Value, Type, Source, Pixel Equivalent, Hex, WCAG Contrast independently. • Fast in large projects – file-local indexing, document-aware snapshots, and one local declaration scan per request reduce repeated work in large token catalogs.

Keywords

CSS variables, CSS custom properties, design tokens, var(--token), var() autocomplete, Tailwind CSS, shadcn/ui, Radix UI, Radix Themes, Material Design tokens, MUI, Open Props, CSS cascade, :root, calc(), nested CSS variables, recursive variable resolution, dark mode tokens, theme variables, WebStorm CSS plugin, IntelliJ IDEA CSS autocomplete, JetBrains plugin design tokens, SCSS variables, Sass variables, LESS variables, @import resolution, Sass @use, Sass @forward, JSDoc CSS, WCAG contrast checker, px equivalent, rem to px converter, hex to HSL, colour swatch, CSS-in-JS bridge.

New in 1.9.6

• Fixes a completion crash when a token catalog mixes sizes, colors and numbers (#36). Thanks to @prikkprikkprikk for reporting it. • Preserves ascending/descending value sorting for size and number families, natural numeric suffixes, and exact-name priority. Full typed-prefix matches stay ahead of truncated matches. • Completion and insertion are verified across CSS, SCSS, Sass and LESS. No settings change or index rebuild is required when upgrading from 1.9.5.

Previously in 1.9.5

• Native color documentation remains available inside CSS custom-property declarations. • Custom-property completion is restricted to the first argument of var(). Fallback values no longer receive invalid bare variable names; nested var() calls and preprocessor fallback variables remain supported. • Canceling import debugging no longer reports an IDE error. • No settings change or index rebuild is required when upgrading from 1.9.4.

New in 1.9.4

• Imported values refresh after saved and unsaved edits and point to the actual declaration file. • Safer CSS/SCSS/Sass/LESS parsing preserves URLs, quoted values, Unicode names and theme contexts. • Alias cycles terminate safely; namespace, scope, declaration-order and import-fallback fixes improve token resolution. • Completion and documentation respect code-token boundaries, leaving comments, strings and at-rules to the IDE. • HSL alpha, hue normalization and signed CSS lengths are corrected. Completion avoids repeated local-file scans. • The variable index rebuilds once after upgrade; no settings change is needed.

✨ New in 1.9.3

Urgent bug-fix release for issue #35, originally reported by @markwoon in JetBrains YouTrack IJPL-252456. CSS Variables Assistant no longer interferes with Quick Documentation for Java or other non-stylesheet code.

• Java Quick Documentation restored: annotations such as @Nullable and @Deprecated, plus Javadoc tags such as @param and @return, are left to the IDE's own documentation providers instead of being misread as LESS variables. • Strict stylesheet boundary: the documentation extractor now runs only for PSI whose language implements the IntelliJ Platform's CSS-language contract. CSS, SCSS, Sass, LESS, PostCSS, and injected CSS remain supported without relying on hardcoded filename extensions. • Core features preserved: CSS custom-property documentation, direct Sass/SCSS/LESS variable documentation, completion, import resolution, indexing, theme rows, colour previews, and alias chains are unchanged. • Regression verified: real Java PSI tests cover both annotation placements and Javadoc-only tags; the complete 303-test suite and the reported IntelliJ IDEA 2026.2.1 build pass.…

Description from the JetBrains Marketplace listing.