make it so that inline variables that reference other inline variables are resolved without generating CSS variables.

[nasheomirro]

@theme inline is great for avoiding too much CSS variables and the whole problem with CSS variable resolution. But currently it only works when using utility classes, if referenced normally it will still generate the inline CSS variable, and does not substitute:

@theme inline {
  --color-primary-contrast-dark: var(--color-primary-950);
  --color-primary-contrast-50: var(--color-primary-contrast-dark);
}

/* what it should be */
.text-primary-contrast-50 {
  color: var(--color-primary-950);
}

/* what was generated */
.text-primary-contrast-50 {
  color: var(--color-primary-contrast-dark);
}

it's also a problem when I create custom utilities but I want to be specific on which color the utility works on and how that would be named:

@theme inline {
  --tonal-primary: var(--color-primary-50);
  --tonal-primary--contrast: var(--color-primary-contrast-50);  
}

@utility preset-tonal-* {
  color: --value(--tonal-*);
  background-color: --value(--tonal-*--contrast);
}

if we generate the preset-tonal-primary class defined above, a lot more unnecessary CSS variables are created. A way to solve it is for tailwind to resolve it itself, maybe something like:

@theme inline {
  --color-primary-contrast-dark: var(--color-primary-950);
  --color-primary-contrast-50: --inline(--color-primary-contrast-dark);
  
  --tonal-primary: var(--color-primary-50);
  --tonal-primary--contrast: inline(--color-primary-contrast-50);
}

with the above, no inline variable is generated at all, another solution would be to make any inline variable that references another inline variable resolve automatically too.