How could I make a CSS variable autocomplete work?

[FourwingsY]

I am using CSS Variable Autocomplete which is VSCode extensions,
but it only detects variable from .css files.

But I cannot make it auto completed using colors in extendTheme()

Is that possible to build color variables before build?

[FourwingsY]

with Next15, colors could be extracted as an .ts file,
So I just made a "predev" scripts to make theme as static css file.

"scripts": {
    "predev": "tsx ./scripts/predev.mts",
    "dev": "next dev"
}

import fs from 'fs';

import { Colors } from '../app/lib/style/colors';

// write colors as css
const colors = Object.entries(Colors)
  .map(([name, value]) => `--colors-${name}: ${value};`)
  .join('\n');
const css = `:root {\n${colors}\n}`;

// write css to file. make sure './build' is added on `.gitignore`
fs.mkdirSync('./build/style', { recursive: true });
fs.writeFileSync('./build/style/colors.css', css);