Javascript always suffer from FOUC problem though (Unless it's server side). Although the if() css function seems to just be syntax suger of standard @media query. So it doesn't really add anything to solve existing problems.
Edited: It seems it can also be toggled from css variable? So it might actually fix some existing problems.
Would it be enough to have <body> hidden using an inline style in the initial html response and when everything is loaded, one would remove the style using javascript?
Many sites do something like that in practice. The problem is the extra 500ms of parse+eval time for your JS bundle influences user behavior a lot on the margin, so it’s better to not force the user to wait.
Edited: It seems it can also be toggled from css variable? So it might actually fix some existing problems.