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

Given the following file structure

app.css

@import https://bla.css    html {    --green: #ff0;  }  

https://bla.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 = getComputeStyle(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.

https://stackoverflow.com/questions/66811335/how-to-read-a-css-variable-set-in-an-imported-stylesheet-in-react March 26, 2021 at 01:06PM