Font stacks break when combined

[kevinSuttle]

This could be the spec, but here's example.

:root {
  --BorderStyle: solid;
  --BorderWidth: 2px;

 --DefaultBorderProperties: {
     border: var(--BorderWidth) var(--BorderStyle);
     border-radius: var(--BorderRadius);
  }
}

Outputs exactly how you'd expect:

    border: 2px solid;

But:

:root
 --FallbackFontFamily: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",  sans-serif;
 --LightFontFamily: "Helvetica Neue Light", HelveticaNeue-Light;

.buttonLabel {
  font-family: var(--LightFontFamily) var(--FallbackFontFamily);
}

Output:

.buttonLabel {
    font-family: --FallbackFontFamily;  ❌ 
    font-family: "Helvetica Neue Light", HelveticaNeue-Light;

[MoOx]

The following code is totally working in the playground http://cssnext.io/playground/

:root {
 --FallbackFontFamily: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",  sans-serif;
 --LightFontFamily: "Helvetica Neue Light", HelveticaNeue-Light;
}
.buttonLabel {
  font-family: var(--LightFontFamily) var(--FallbackFontFamily);
}

And gives this

.buttonLabel {
  font-family: "Helvetica Neue Light", HelveticaNeue-Light "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",  sans-serif;
}

You probably have another problem before (I can notice your stacks definition are not in braces).