TIL: CSS-in-JS modules for SolidJS

I spent a day learning about CSS-in-JS solutions for SolidJS. I looked for performant/compile-time solutions. Quick summary:

1. Inline styling is really painful to type in SolidJS, as it uses "margin-bottom" instead of marginBottom. You need to type the quotes and dashes, and there's no autocomplete. Meanwhile, your competitor wrote "mb-2" in Tailwind.

2. Tailwind has the highest performance, with absolutely no runtime, but I just prefer real CSS.

3. CSS modules doesn't allow me to write CSS next to my components. For tiny components/helper utilities, I don't want to write two files. Also, CSS modules is runtime only, meaning slower performance.

4. vanilla-extract is like CSS modules but compile-time and super fast. Still, it requires writing everything in separate files.

5. Then comes Panda CSS - I lost a day trying to make it work. It has perfect SolidJS support, but it's the single most overcomplicated CSS solution I've ever seen in my life. It's like Kubernetes for CSS. Moreover, simply adding it to a project totally overtakes its CSS into a "design system" and introduces 14 kB of minified CSS! It also adds a whopping 51 kB of runtime JS! For a library that's supposed to be a compile-time CSS solution, this is crazy.

I chose it because I like Ark UI and it has a matching Panda styled "Park UI", but I just ended up having really bad feelings about how Panda would work in a long-term project. What I wanted was a simple CSS-in-JS solution for setting styles on components; what I got was a super complicated system that tells me how to do everything in their "design system".

Case in point, removing the border around the Accordion component from Park UI was so complicated that I ended up asking about it on their Discord. The "copy your component to simply modify it" approach is totally broken here. Any other solution (Radix UI, shadcn, SolidUI, etc.) would have allowed me to tweak the rule in no time.

6. "macaron" is recommended on the SolidJS docs site, but it's done by a single person, Google knows nothing about it, and it doesn't even work.

7. Solid Styled Components and Solid Styled JSX have no commits in 2 years. Also, that Styled JSX syntax is really not pretty. Both of them are runtime only too.

8. Pigment CSS/linaria doesn't support SolidJS.

9. In the end, I went with styleX by Facebook. It's minimalistic, unlike Panda, allows using the same file for JSX and CSS, and is actually extremely fast! Its full runtime code is only 6 kB, and you can see from the quality of the repo that Facebook has been using this in production for 5+ years. Also, it works with SolidJS, which is a surprise from the creators of React.

10. So styleX it is - I'm very happy with the minimal approach it takes. I only wanted to type some styles in JS, and that's exactly what it allows. It doesn't want to introduce a "design system", doesn't want to change the way I write code; it just stays in the background and generates atomic CSS classes at compile time.