How to read a CSS variable set in an @import'ed stylesheet in React?

Question

Given the following file structure

app.css

@import https://foo.css

html {
  --green: #ff0;
}

https://foo.css/

html {
  --red: #f00;
}

How do I read --red?

Already tried

app.tsx

...
useLayoutEffect(() => {

  // works
  const green = getComputedStyle(document.documentElement)
    .getPropertyValue('--green');

  // doesn't work
  const red = getComputedStyle(document.documentElement)
    .getPropertyValue('--red');
})

I've already tried waiting for frames with setTimeout and requestAnimationFrame to no avail. If I setTimeout(() => {...}, 10000) the variable is there so I know it's only a synchronisation issue, but I have no idea on how to get the update.