If you find CSS Variables Assistant helpful, please consider rating it on JetBrains Marketplace ★★★★★ 🙏.
Version: 1.8.6
Compatible IDEs: JetBrains IDEs with bundled JavaScript + CSS support — IntelliJ IDEA Ultimate, WebStorm, GoLand, PhpStorm, PyCharm Professional, and RubyMine.
Author: Stian Larsen
Repo: github.com/Stianlars1/css-vars-assistant
Links:
Supercharge your CSS custom properties and preprocessor variables in JetBrains IDEs with advanced autocomplete, documentation, and debugging tools.
Bug-fix release closing issue #22 reported by @LordMaddhi.
| Category | Highlights |
|---|---|
| 🎨 8-digit hex colors with alpha now handled correctly | Modern CSS Color Level 4 #RRGGBBAA values like #7F80FF1A no longer render as a truncated #80FF1A in the hover popup's Hex column. Two compounding bugs were fixed: the parser was reading alpha as the first byte (Java #AARRGGBB order) instead of the last byte per the CSS spec, and the formatter was unconditionally dropping alpha. The canonical hex output now preserves alpha when present (#7F80FF1A round-trips identically), and 4-digit #RGBA shorthand is recognised. Color swatches use rgba() so semi-transparent colors preview accurately. Fully-opaque colors still produce 6-digit hex, so existing snapshots and the WebAIM contrast-checker URL are unaffected. |
Bug-fix release closing issue #21 reported by @kolkinn.
| Category | Highlights |
|---|---|
| 🧮 Calculated values with multi-valued nested vars | A Radix Themes token like --space-2: calc(8px * var(--scaling)) no longer renders as bare 0.9 in the hover popup. When the nested variable has multiple non-uniform values across themed selectors and no :root anchor, the var(--scaling) reference is now left intact so the popup displays calc(8px * var(--scaling)) verbatim. Deterministic single-default substitutions are unchanged. |
A copy-paste reproducer fixture and step-by-step verification notes live at samples/issue-21/ in the repo.
Bug-fix release closing issue #20 reported by @Blinks44.
| Category | Highlights |
|---|---|
| 🎯 Exact-match ranking fix | Typing the full variable name (var(--sidebar-accent-foreground)) now promotes the exact match to the top of the popup. In 1.8.0–1.8.3 the default-selected item was a shorter prefix sibling like --sidebar, and pressing Enter/Tab overwrote the full name you had already typed. |
Follow-up to issue #19 — polish pass for design systems with many theme variants. Inspired by @LordMaddhi's follow-up question about how the plugin scales when you have 6-8+ themes.
| Category | Highlights |
|---|---|
| 🏷 Readable theme labels (new, default on) | [data-theme="catppuccin"] → "Catppuccin", [data-theme="high-contrast"] → "High contrast", .dark → "Dark" in the Context column. Full raw selector lives on hover. Works for any theme name. Toggle under Documentation Popup Columns → "Prettify theme selector labels" — off keeps the verbatim selector rendering for paste-back-to-CSS fidelity. Compound selectors and pseudo-classes stay verbatim so CSS semantics never get misrepresented. |
| 🎯 Collapse duplicate-value rows (new, default on) | When several themes resolve a token to the same value, they merge into one row like Light mode, Catppuccin, Sepia rather than three near-identical rows. Settings toggle: Documentation Popup Columns → "Collapse rows with identical values". |
Small polish release for the hover popup. IntelliJ's documentation popup clamps its max width, so the 1.8.1 Source column (variables.css:220) wrapped into two lines on busy tables. 1.8.2 both nudges the popup wider and adds a compact-source preference.
| Category | Highlights |
|---|---|
| 🔎 Compact Source column (new, default on) | Source cell renders just :220; the full variables.css:220 is on hover. Toggle under Settings → Tools → CSS Variables Assistant → Documentation Popup Columns → "Compact source column" if you prefer the verbose 1.8.1 look. |
| ↔ Wider popup by default | The value table hints at ~700 px minimum width so multi-column rows (Context, Value, Type, Source, Hex, WCAG) don't wrap. Platform still caps around 950 px; users can resize manually and IntelliJ remembers the new size. |
Small follow-up release targeted at theming workflows — closes issue #19 reported by @LordMaddhi and ships a related cascade-visibility improvement.
| Category | Highlights |
|---|---|
| 🎨 Attribute & class themes become their own contexts | [data-theme="dark"] { --bg: black }, .dark { --bg: black }, .theme-high-contrast, :hover, [dir="rtl"] and other non-root selectors are now indexed as distinct contexts and show up as their own rows in the hover popup. Before 1.8.1 they collapsed into default and were silently overwritten by the last declaration. Nested @media (prefers-color-scheme: dark) { .hc { … } } combines labels as (prefers-color-scheme: dark) .hc. |
| 📍 Source file:line per declaration | The Source column in the hover popup now shows tokens.css:42 for every row, so when --bg is redefined across shadcn/Radix/Tailwind/Material theme files you can see exactly where each value lives. Legacy index records fall back to the prior "first resolution step" label automatically. |
| ℹ️ Cascade-ambiguity disclaimer | A small note under the value table reminds you that rows are shown in index order and the runtime-applied value still depends on stylesheet load order and specificity — we don't simulate the full CSS cascade engine. |
Upgrading from 1.8.0? The CSS variable index rebuilds once on first launch after install — the packed index record gained a 4th field (source line), and the rebuild surfaces the new theming contexts and line info for existing files.
Thanks to @LordMaddhi for reporting issue #19 and testing the fix.
Biggest quality release to date — closes issue #18 plus ~15 related completion-popup regressions that only surfaced during real IDE use. All fixes are locked in with regression tests.
| Category | Highlights |
|---|---|
| 🐛 Completion popup is reliable again | No more sticky lookup after typing a few chars. --error no longer hides behind --error-foreground. var(--) doesn't shove SIZE variables above everything. hsl(var(--err)) surfaces the actual --error variable. var(- autopopup returns the full token list instead of filtering out every variable without an internal dash. |
| 🔢 Three-option completion sort order | Completion sort order now offers By value ascending (default), By value descending, and Alphabetical by name. The preference applies consistently in both the `var(-- |
| 🐛 Value column shows the real value, not a comment | Also issue #18. When a CSS property had a JSDoc/block comment above it, the popup could scrape a commented-out --name: sample; from elsewhere in the file and display it as the value. Comments are now stripped before the local-value scan runs. |
🎯 Completion doesn't fire outside var() |
Parenthesis-depth tracking from each var( to the caret — typing after a closed var(--x) or between two sibling var() calls no longer surfaces every indexed variable. myvar( and other word-boundary false matches are out too. |
| 🧹 Parser tidies up inline comments | --x: /* legacy */ 1px; and --x: 1px /* px */; are parsed as 1px. A leading /* comment */ --y: 2; on one line still indexes --y. Minified CSS that begins with a copyright comment is now fully indexed (thanks to @pierreoa via PR #17). |
| ⚙️ Two new completion-popup settings | Toggle the description next to each completion item on/off, or clamp it to a custom length (0 hides, up to 120 chars). Under Settings → Tools → CSS Variables Assistant → Display Options. |
| 📦 Broader verifier coverage | Plugin verification now also runs against PyCharm Professional and RubyMine, in addition to IntelliJ IDEA Ultimate, WebStorm, GoLand, and PhpStorm. |
Upgrading from an earlier 1.7.x? The CSS variable index will rebuild once on first launch after install — the parser's value capture changed, and a rebuild ensures no stale values survive.
Thanks to @pierreoa for PR #17 surfacing the minified-CSS indexing bug, and to @Blinks44 for the detailed bug report in issue #18 that drove the completion-popup hardening.
| Category | Highlights |
|---|---|
| 📚 IntelliJ 2024.1+ docs | Full support for the new documentation API with rich popups and fallback for older IDEs. |
| 📊 Dynamic docs table | Docs auto-add px Eq., Hex and WCAG columns whenever the value type warrants it. |
| ↗ Derived var indicator | Recursive/derived variable completions now show a special indicator (↗). |
| 🔎 Debug import resolution | Improved DebugImportResolution helper for easier tracing of variable origins and import chains. |
| 🧠 Context/cascade logic | Completions and docs now always use the last value per context (CSS cascade honored). |
| 🎯 CSS cascade compliance | Fixed critical bug where local declarations now correctly override imported values, following proper CSS cascade rules. |
| 🏆 Winner-first docs | The actual winning value is now shown first in documentation tables for immediate clarity. |
| 📖 Derived variable legend | Documentation now includes an explanation of the ↗ symbol when variables are resolved through imports or references. |
| ⚡ Robustness & accuracy | Smarter context labels, improved media query parsing, color parsing, and documentation rendering. |
| 🚀 Performance & refactors | Faster, more maintainable codebase with centralized index versioning and better caching. |
- Instant variable lookup: Blazing-fast completions and documentation for
CSS,SCSS,SASSandLESSvariables. - Smart autocomplete: Context-aware suggestions for
var(--…),@less, and$scsswith value/context-based sorting. - Rich documentation popups:
- Customizable Columns: Choose what you see (Context, Value, Source, etc.).
- Resolution Chain: A tooltip shows the full resolution path of a variable.
- Value tables (with px equivalents for rem/em/%/vh/vw/pt)
- Context labels (Default, Dark, min-width, etc.)
- Color swatches and contrast info
- Dynamic columns: px Eq., Hex, WCAG appear only when relevant
- CSS cascade compliance: Shows the actual winning value first, following proper CSS cascade rules
- Legend for derived variables: Explains the ↗ symbol for variables resolved through imports
- JSDoc-style comments: Auto-parsing and display of
@name,@description, and@example. - Advanced import resolution: Follows and indexes imports across
CSS,SCSS,SASS&LESS. - Debugging tools: Trace variable origins and import chains visually.
- Configurable sorting: Completion list sorted by value (ascending/descending).
- Works everywhere:
CSS,SCSS,SASS,LESS.
Open Settings → Tools → CSS Variables Assistant
| Option | Effect |
|---|---|
| Show context values | Display dark/light & media-query variants |
| Allow IDE built-in completions | Fall back to IntelliJ suggestions for misses |
| Indexing scope | Project only • Project + imports (default) • Full global |
| Max @import depth | 1 – 20 (default 20) |
| Completion sort order | By value ascending (default) • By value descending • Alphabetical by name |
| Show description in completion popup | Toggle the description next to each completion item |
| Description max length in completion popup | 0 – 120 chars (0 hides) |
| 🔄 Re-index Now | Flush caches and rebuild the variable index immediately |
Need to verify exactly which files your @imports resolve to?
- Right-click any .css / .scss / .sass / .less file in the Project view
or inside the editor. - Select "Debug CSS Import Resolution".
- A dialog shows:
- full import tree (
@importdepth-limited) - circular-reference warnings
- variable counts per file
A copy is also written to the IDE Log for later inspection.
- full import tree (
💡 Tip You can keep the dialog open while you edit – rerun the action to refresh.
| Symptom | Resolution |
|---|---|
Variable shows @lessVar instead of real colour |
Click Re-index Now, wait for Updating indexes… to finish. |
| Completions missing after changing scope | Re-index or restart IDE (button normally suffices). |
| Slow indexing | Use Project + imports, lower max-depth, exclude large folders. |
| Need to see where a variable came from | Right-click file → Debug CSS Import Resolution. |
If you also write CSS with rem, em, or viewport units, try PxPeek — inline pixel-equivalent hints for every relative CSS unit, right in the editor.
git clone https://github.com/stianlars1/css-vars-assistant.git
cd css-vars-assistant
./gradlew clean buildPlugin # produces ZIP under build/distributions
./gradlew runIde # start sandbox IDE