[Feat] Accept JSON file to inject unknown or runtime CSS variables that cannot be parsed using CSS source files

[phoenisx]

Something like the following should provide a good way to inject CSS variables into the extension cache, to populate variables that extension is unable to figure out statically (for e.g CSS variables that are generated dynamically during runtime).

// dyn-css-variables.json
{
  "--variable-name": "variable value"
}

Users can then pass this file into cssvar.files source files list:

{
  "cssvar.files": ["**/*.css", "dyn-css-variables.json"]
}

[Anoesj]

I would like to propose a few changes/ideas.

Firstly, I would like the option of using a JS/CJS/MJS file too, so you're able to do some scripting. This way, it's easier to dynamically create variable names and values. Let's say you have lots of color variables and you also want to create variables for their HSL values. It would be a tedious task to write them all down manually (even though this could be automated in user land, more on this below).

Secondly, I feel like it'd be nicer to not (only) define variables and their values, but also their original definition location, so when clicking through on a CSS variable, one would go to the original definition, instead of the JSON file. Sometimes, it would even be hard and extra work to get the actual value of the CSS variable. I suggest using something like this format instead, where path and value are nullable or omissable:

{
  "--color-red": {
    "path": "/path/to/file:66:3",
    "value": "#f00"
  } 
} 

Custom JSON regeneration logic

One might want to automate the creation of this config JSON file by watching files, reading, parsing or regexing them, and then recreating the JSON file dynamically. It'd be nice to document some ways to do this. I assume the config file will be watched and reloaded on change?

A benefit of dynamically creating the config file is that this creates a way to read your own CSS/SCSS/Sass/Less/etc files and scan for specific patterns to get the location and/or values of CSS variables. For example, I sometimes use a mixin to create multiple CSS variables at once: see #109.

[phoenisx]

Having manually managed configs can quickly become an overhead, especially when the source and script(or JSON data) are approx. duplicates.

Having a JS script is a good idea, but its maintenance can be tiring (unless it's auto-generated)(the same applies to a JSON file as well), but I can also not think of any other (less complex, easy to manage) solution for this issue.

Anyway, appreciate your inputs. I will look into this in the future, as I am occupied with a lot of other stuff these days 👍🏽 (Unless you have time to work on this 😉)