JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
<div id="b">
<div id="c">
<p>
 test
</p>
</div>
</div>
</div>

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

CSS

#a {
  width: 500px;
  height: 500px;
  background: blue;
  --a: 100px;
  --b: 100px;
}
#b {
  background: green;
  --a: 190px;
  --b: 190px;
  width: calc(var(--a) + 5px);
  height: calc(var(--b) + 5px);
}
#c {
  background: purple;
  --a: revert;
  --b: inherit;
  width: var(--a);
  height: var(--b);
}

JavaScript

function test_prop(id, prop, expected) {
  const actual = window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim();
  const msg = "Expected " + prop + ": " + expected + " Actual: " + actual;
  
  let p = document.createElement("p");
  p.appendChild(
  	document.createTextNode(msg)
  );
  document.getElementById('results').appendChild(p);
}

test_prop('a', '--a', '100px');
test_prop('b', '--a', '190px');
test_prop('c', '--a', '190px');
test_prop('b', 'width', '195px');
test_prop('c', 'width', '190px');

test_prop('a', '--b', '100px');
test_prop('b', '--b', '190px');
test_prop('c', '--b', '190px');
test_prop('b', 'height', '195px');
test_prop('c', 'height', '190px');