>CSS-in-JS allows for easy JS-based code-splitting (if you've got that setup) and inlining critical CSS on the page.
All of this can be accomplished without keeping your source of truth in JS config files. SCSS or CSS files can easily be loaded with Webpack and imported into your code. Then you're not giving up the simple yet powerful expressiveness of CSS selectors for a nightmare of nested JS objects.
Generally CSS is loaded into your code where you require them but has to be extracted into a single bundle.
If you want to it truly be loaded into your code where you use it, then CSS-in-JS is the solution and does this for you.
It sounds like the main gripe you have is with syntax, and that's not really required with CSS-in-JS. The 'nightmare of nested js objetcts' can be hidden in the implementation. In fact, many libs (such as emotion) allow you to write CSS syntax using babel macros to preprocess this into javascript.