css is not order dependent.

document_order_is_not_respected.css

:root {
  var-grid-width: 20px;
}

div[class*="span-"] {
  float: left;
}

div.span-5 {
  /* This should be 50px because the var-grid-width below should override the value above. */
  width: calc(var(grid-width) * 5);
}

:root {
  var-grid-width: 10px;
}

document_order_is_not_respected_output.css

div[class*="span-"] {
  float: left;
}

div.span-5 {
  /* This should be 50px because the var-grid-width below should override the value above. */
  width: 100px;
}

fyi, this is has been fixed (but I think you already know that).