how to show color preview for css custom properties/variables in VSCode/VSCodium

Question

I spend a lot of time writing css for custom WordPress themes in VSCodium. I've created scripts using wp-cli to automate a lot of the process, so I use lots of custom properties/variables, especially for colors: foregrounds, backgrounds, and gradients.

Is there a way to make VSCode/VSCodium display a color preview for code like below, the way it does for keywords like color: red; or color: #ff0000 ?

:root {
    --hue--1: 45;

    --color--saturation: 1%;
    --color--lightness: 1%;
    --color--opacity: 1;
    
    --color--dark: hsl(var(--hue--1)
    calc(22 * var(--color--saturation))
    calc(33 * var(--color--lightness))
    calc(1 * var(--color--opacity))
    );
    --c1: [color preview square here]var(--color--dark);
}

Hopping from one theme to another it's hard to keep 9 color variants and 3 gradients straight without the color preview I've grown accustomed to (is this the dark one, the light one, the bright saturated one, or the muted one?)

I've tried various extensions: CSS Variable Autocomplete, Colorize, TODO Hightlight, and others. None have the desired effect.