willofindie / vscode-cssvar

VSCode extension to support CSS Variables Intellisense
https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
MIT License
243 stars 4 forks source link

[Feat] Provide color values for deeply nested css variables #104

Closed phoenisx closed 1 year ago

phoenisx commented 1 year ago

Is your feature request related to a problem? Please describe. Example CSS file:


* {
  --brand-hue: 0;

  --brand-dark1: hsl(var(--brand-hue), 0, 20%);
  --brand-dark2: hsl(var(--brand-hue), 0, 10%);

  --brand-light1: hsl(var(--brand-hue), 0, 90%);
  --brand-light2: hsl(var(--brand-hue), 0, 80%);
}

[color-scheme="light"] {
  --brand: var(--brand-light1);
  --brand-dark: var(--brand-light2);
}

[color-scheme="dark"] {
  --brand: var(--brand-dark1);
  --brand-dark: var(--brand-dark2);
}

Describe the solution you'd like Color for --brand CSS property is not getting parsed.

Current Expected
image image
phoenisx commented 1 year ago

The solution that I am working for now only works when the css variables are defined in sequence, i.e. css variable with color value should be defined before it being used, like in the description above, it won't try to find the value of the property recursively, which could be computation heavy.