Allow referencing other CSS variables

[maxsalven]

My app uses javascript to dynamically set some CSS variables, like a --brand color (in HSL).

It would be great if we could reference these in tw-colors:

createThemes({
   'light': light({ 
      'button-primary-bg': 'var(--brand)',
   }),
   'dark': dark({ 
      'button-primary-bg': 'steelblue',
   }),
})

[maxsalven]

As a follow up, being able to set opacity alongside a variable reference would be great too. Am not sure what the syntax would look like.

createThemes({
   'light': light({ 
      'button-primary-bg': 'var(--brand)',
      'button-primary-bg-opacity': '0.5',
      // or perhaps
      'button-primary-bg': 'var(--brand) / 0.5',
   }),
})

Thanks!

[L-Blondy]

Since var(--brand) is a color and not just hsl values, the default opacity should be set on the --brand variable directly.

While it is technically doable, I've got to think carefully whether or not I want to add support for css variables: it might be a blocker for future features.