Many CSS-in-JS libraries also handle style modularization, often in ways arguably better than CSS preprocessors. There's a lot of variety here.
I'm not sure what you mean by "faster than CSS". CSS can be fast or slow, depending on how the CSS is written.
You should take a look at: https://github.com/MicheleBertoli/css-in-js
Render-time is waaaay too late. The ship has sailed at that point: so no, that doesn't take care of your first point.
> Many CSS-in-JS libraries also handle style modularization, often in ways arguably better than CSS preprocessors.
I've yet to see one that comes even close to SASS - not even the same game let alone the same league - so agree to disagree here.
> You should take a look at: https://github.com/MicheleBertoli/css-in-js
I have - all it shows is that css-in-js is not a realistic competition for sensible modular CSS via something like SASS (CSS Modules, etc, good patterns).
If your app is rendered via JS, having the CSS loaded at runtime should not matter: there's no markup to affect (repaint) and the CSS will be available before your React/etc components are rendered up.
only if it's pure browser-side only. Which is fine I guess - at that point you've given up on rendering performance anyhow generally (especially in initial paint).
Now you could extract the CSS with a build step... but at that point you've admitted the solution is poor (and/or you're not good at CSS) and are just mitigating it by producing real CSS by automation.
That's fine, but it's no replacement for general good practice or domain knowledge.