Variables that reference other variables are undefined

[robdimarzo]

Variables are undefined in legacy browsers when I declare variables that reference other variables. This might be a duplicate of #82 but there was no resolution there.

To create dark/light theming based on css variables, I am declaring scoped variables that reference root variables from a master set of design tokens. Here's an example of this concept to change background color by theme.

Design token variables:

:root {
     --color-blue-800:   0, 3, 51;
     --color-grey-100:   240, 240, 246;
}

Scoped theme variables:

.theme--dark {
     --color-background: rgb(var(--color-blue-800));
}
.theme--light {
     --color-background: rgb(var(--color-grey-100));
}

Stylesheet:

body {
     background-color: var(--color-background);
}

I've also created a more elaborate demo on CodePen: https://codepen.io/robdimarzo/pen/oNjKGXp

In Chrome:

In IE11:

[jhildenbiddle]

Hey @robdimarzo --

Per the limitations listed on the README and the docs:

Limitations

• Custom property declaration support is limited to :root and :host rulesets

Scoped custom property declarations are (unfortunately) not supported. This has been covered in other issues, but the two that may be of interest are #26 (which explains why the polyfill doesn't support scoped custom properties) and #74 (specifically this comment which offers a solution for swapping themes).

Hope this helps. Happy to answer any questions you may have.