Doing some digging around and noticed this:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/var#Browser_compatibility
Seems these features aren't available in Chrome versions <v48. Seeing as MX5 up till now is based on Blink v47, that's more than likely the reason why it's broken.
But good news is that it works fine, at least with the JSfiddle code that I was testing with, on the latest internal beta. So once that's released you shouldn't have any issues with the ViolentMonkey extension.