Discussion on: 5 reasons to go with CSS in JS for your next application

We're moving towards a componentize architecture and traditional CSS structure doesn't work because of the problems I've mentioned above.

Probably the problem is with traditional CSS structure.

With that said, CSS modules I have heard of and I think it's great but it adds more dependencies to an application and more knowledge about Webpack configuration that an engineer needs to know.

It's one line. And even CRA supports it. So - there is no complexity.

Writing CSS in a JS file does solve the problems above

The problems are solved by a specialized library, not CSS-in-JS as technology itself

you honestly don't need a library to do so. You can inject it inline. Now you might say, INLINE CODE IS THE WORST!

I would say - INLINE CODE IS THE WORST!!! You got me :P

There is one, a single one reason not to use inline css - meta selectors.

Meta selectors give you the ability to:

• target :hover, :focused, :active states, which you still could emulate with a pure js, but better dont
• target different medias, which enables responsive and fluid designs. You still can use window.matchMedia, and produce the right styles for a current media, but it's not quite maintainable (and SSR/cache friendly)
• use pseudo selectors, like :before or :after, which could simplify your html and make code cleaner. It's still possible to just add mode nodes to the markup, and joggling everything with javascript. But there are situations, when you have to use all features listed above simultaneously, like add :after element for :hover state on some @media, and CSS code shall be preferred.

And every time, when you are writing MORE CSS code than JS code, and that could be a thing, if you really use all possibilities of CSS - you might prefer CSS-in-CSS, not in JS.

It seems to me - you are underusing CSS features. And, actually, shall not have any issues in this case - CSS problems are problems of a scale.