Up until now I was using CSS Modules as a styling solution. But then I discovered Styled Components and loved how easy it was to do composition with it and manage dynamic stying.

Problem is that, with the introduction of server components and server side rendering, Styled Components don't work anymore with Next.js.

So now going back to CSS Modules feels like a lesser version, most of the features I got used to aren't available. Should I merge CSS Modules with SCSS as a possible alternative? How do you style complex Next.js projects? I've heard about Vanilla Extract too, but haven't tried it yet.

Take the attached image with some Styled Components dynamic styling. How would you do the same in Next.js 13? Having to create new classes for each variation and conditionally inserting them isn't ideal, same with using the inline style attribute.

P.D.: Let's keep Tailwind out of this discussion, please.