How do you handle the CSS in complex Next.js 13 apps?

[wispy dragon]

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 nowadays with server components?

P.D.: I'm not a fan of Tailwind, so please let's keep it out of this discussion

[cunning zealot]

Maybe kind off vanilla extract.js? Its not the same, its still css but hmm..

New mantine implemented that into their library

[silver umbra]

.module.scss works normally and is what i would go with today if i must not use tailwind

[wispy dragon]

But what kind of patterns do you use for dynamic styling. Having several classes for each? What I liked about Styled Components is that you didn't need to do that

[silver umbra]

CSS variables and style prop

[wispy dragon]

doesn't it get messy fast depending on the style prop? Could you do a screenshot of this pattern, please? I think I know what you mean, but just to get sure I'm on the same page

[silver umbra]

CSS variable is a very powerful css feature, if you know how to organise you can use it for dynamic styling well.

style={{ "—colour": theme.isDark ? "black" : "white" }}
className="your-class"

.your-class {
color: var(—color);
}