Using Stitches instead of styled-jsx

[iMohammadReza]

Hey guys,
Lets discuss about using Stitches instead of styled-jsx.
NextUI also uses Stitches and provides a nice DX for modifications.
I start with some pros and cons, you continue to make a decision:

• [➕] Development: Easier to use design variables. see more
• [➕] Development: Easier to write component variants. see this and also this
• [➕] Development: Easier to write media queries with custom breakpoints: see more
• [➕ ] Development: Implement scalable components with utils.
• [➕] Usage: Provides easy customizable components (composing - css prop with media query - theming)
• [➕] Full SSR support.
• [➕] Fully types system.
• [➖] Its a major refactor.

[unix]

Thanks for the advice @iMohammadReza ❤️ , I have followed modulez before and it is indeed a good choice.

Now that Geist has several critical path designs constrained by styled-jsx, changing the style solution is inevitable, but it's a very big change that I'm still watching and testing. (include the workload of refactoring, compatibility with previous implementations, etc. there are a lot of test cases that need to be rewritten here.)

• Refactoring style solutions: YES
• Whether to use stitches: IN RESEARCH
• How long: A few months

And, anyone is welcome to leave a style solution here that you think is good, and I will research and test them.

[moatorres]

I'd consider other options as well, since Stitches is no longer being maintained. I guess that with the advent of RSC and atomic-styling approaches like Tailwind, the future-proof solutions are similar to vanila-extract or Tamagui, which come with static extraction and Stitches-style APIs.

I've actually forked Stitches, made a few updates and ported some of Geist components to understand how the APIs (styled-jsx vs. stitches) would behave. Some were much simple and more customisable with Stitches, like the Badge, Avatar and Note components.

I'm happy to copy paste them here if that's helpful and I'd love to help with transitioning under @unix guidance. Big fan of both Geist and Stitches. Have be playing around with both code bases as a learning reference. ❤️

[iMohammadReza]

panda-css is a good option too.