This looks nice! I was always hesitant about using CSS-in-JS because it adds another abstraction with more or less subtle differences between different implementations, both in DX and in performance impacts.

So far, I'm happy with CSS modules which solve the most important problem of scope in a predictable way.

ecsstatic seems to be the CSS-in-JS solution that's pretty much the closest to CSS modules. You could even use it like that when keeping your styles in a separate file.

So the benefits of ecsstatic over CSS modules that I can think of are:

• ability to keep styles in the component file
• you can automatically catch unused classes

But I also see drawbacks:

• advanced CSS selectors may not be possible or at least harder to do
• jumping back and forth between CSS and JS syntax when styling might not feel right
• limited IDE/editor support

What do you think? Do you agree? Did I miss anything?