JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>
<pre id="results"></pre>

CSS

#test {
  --prop1:value1;
  --prop2: value2;
  --prop3:value3 ;
  --prop4:"value4";
  --prop5:'value5';
}

JavaScript

'use strict';

var style = getComputedStyle(document.getElementById('test'));
var resultsDiv = document.getElementById('results');

function t(actual, expected) {
	return actual === expected ?
  	'<span style="background-color: green; color: white;">PASS</span>' :
    '<span style="background-color: red;   color: white;">FAIL</span> (expected: «' + expected + '», got: «' + actual + '»)';
}

resultsDiv.innerHTML =
	'no spaces:      ' + t(style.getPropertyValue('--prop1'), 'value1') + '<br>' +
	'leading space:  ' + t(style.getPropertyValue('--prop2'), ' value2') + '<br>' +
	'trailing space: ' + t(style.getPropertyValue('--prop3'), 'value3 ') + '<br>' +
	'double quotes:  ' + t(style.getPropertyValue('--prop4'), '"value4"') + '<br>' +
	'single quotes:  ' + t(style.getPropertyValue('--prop5'), '\'value5\'');