Best compromise I've found: CSS modules [1] (commonly implemented with Webpack) which have you write a separate CSS file but modularizes it by exporting hashed versions of the classnames for you to use in your components.
It's the best of both worlds: you don't have to give up CSS tooling like Sass or postcss, but you gain modularity (which is really the only problem CSS-in-JS solves).
CSS Modules have been revolutionary for us. I agree, it's a great compromise. I don't really see any reason to go to CSS-in-JS from here. It's scaled very well with our team and applications.
It's the best of both worlds: you don't have to give up CSS tooling like Sass or postcss, but you gain modularity (which is really the only problem CSS-in-JS solves).
[1] https://github.com/css-modules/css-modules