Suggestion to replace Stitches in the Styling with CSS-in-JS guide

[kelvin27315]

Documentation

Relevant Radix Component(s)

Primitives > Styling > Styling with CSS-in-JS https://www.radix-ui.com/primitives/docs/guides/styling#styling-with-css-in-js

In the styling guide of radix-ui/primitives, Stitches is used to explain Styling with CSS-in-JS. However, it seems that Stitches is currently not being maintained. Specifically, the Stitches GitHub repository clearly states that its active maintenance has ended.

Update June 19, 2023: Stitches is no longer actively maintained due to changes in the React ecosystem and maintainer availability. You can https://github.com/stitchesjs/stitches/discussions/1149#discussioncomment-6223090.

https://github.com/stitchesjs/stitches/blob/canary/README.md?plain=1#L1 https://github.com/stitchesjs/stitches/discussions/1149#discussioncomment-6223090

From a long-term perspective, it may not be appropriate to use a library that is no longer actively maintained to illustrate Styling with CSS-in-JS. Therefore, would you consider changing the library used for illustration?

[benoitgrelard]

Hey @kelvin27315, I agree.

The biggest issue we will have with this is time. It will take work to migrate all of the demos to some other form of CSS-in-JS, yet it is a hard thing to prioritise above a ton of other more important things.

Is this something you would be willing to work on?

[abhushanaj]

Hey @kelvin27315, I agree.

The biggest issue we will have with this is time. It will take work to migrate all of the demos to some other form of CSS-in-JS, yet it is a hard thing to prioritise above a ton of other more important things.

Is this something you would be willing to work on?

I would like to help out here as well. I think it a really needed addition. Any libraries you are focussed on for this?

[kelvin27315]

I'm open to contributing to this effort. but I'm currently unsure which library would serve as the best replacement for Stitches.

[kelvin27315]

I use Emotion as my CSS-in-JS library in projects where I've integrated Radix-UI, influenced by the existing use of MUI in the same projects. I'm also aware that many CSS-in-JS libraries face challenges around SSR, and new libraries are being developed to address these issues. What libraries would be considered preferable for the documentation?

[kelvin27315]

When considering replacing Stitches in the radix-ui/website, we might also need to consult with developers of other Radix-UI repositories that use Stitches.

Here are some examples of Stitches usage in other repositories:

Using Stitches in radix-ui/primitives Using Stitches in radix-ui/design-system

[benoitgrelard]

Our other repos don't really matter (some are deprecated, and others we were using it only in our storybook or things like that). We've largely phased out our own usage already.

When it comes to which lib to replace Stitches with for the CSS in JS examples, I will ask the rest of the team and we'll decide on something.

[benoitgrelard]

Hi @kelvin27315,

After discussing with the team, here is the approach we want to take:

• We want to delete all of the stitches demo: We believe that the way it's going, static CSS is more and more relevant so vanilla CSS and Tailwind demos get us where we need to be in terms of fully fledged code example
• We want to update the general Styling guide page with more up-to-date relevant examples of CSS-in-JS (possibly a few from different libs?)

Let me know if this is something you'd be happy/able to help with!

[kelvin27315]

I'd be happy to take on this task! Before I begin, I'd like to confirm that my understanding of the specific tasks matches yours:

• We'll remove the Stitches demos from the component pages under primitives/docs/components/, where currently demos can be viewed in CSS, Stitches, or Tailwind CSS.
• In the Styling guide, we'll replace the Stitches examples in the 'Styling with CSS-in-JS' section with another library.

About the Styling guide, I have a couple of quick questions:

• Which library will we use to replace Stitches in the 'Styling with CSS-in-JS' section? Is this something the team will decide?
• I noticed there isn’t a section for 'Styling with Tailwind CSS'—are we okay with that, or should we add one?

Also, I came across the Aliasing – Radix Colors page that uses Stitches. Any thoughts on what we should do with this page?

[benoitgrelard]

Before I begin, I'd like to confirm that my understanding of the specific tasks matches yours:

We'll remove the Stitches demos from the component pages under primitives/docs/components/, where currently demos can be viewed in CSS, Stitches, or Tailwind CSS. In the Styling guide, we'll replace the Stitches examples in the 'Styling with CSS-in-JS' section with another library.

That is correct.

Which library will we use to replace Stitches in the 'Styling with CSS-in-JS' section? Is this something the team will decide?

The State of CSS survey seems to highlight that by usage, Styled Components is still largely higher than the rest, so let's go with that for now.

I noticed there isn’t a section for 'Styling with Tailwind CSS'—are we okay with that, or should we add one?

I think it would be great to add one there too 👍

Also, I came across the Aliasing – Radix Colors page that uses Stitches. Any thoughts on what we should do with this page?

Yes, I think we should remove those Stitches tabs on that aliasing page. Also, let's remove Stitches from here too: https://www.radix-ui.com/colors/docs/overview/usage

[jazimabbas]

Hi. I have seen the docs, there are 3 options in it: stitches, css, and tailwind css. But in many cases, people use styled-components like I do. I simply copy and paste the code from the docs, but the problem arises when I have to change the code every time in styled-components.

I don't want to manage separate docs for myself. Maybe others are also facing this issue when they copy and paste the code into their projects, where there is also an option for styled-components.

If you wish, I can help. Let me know your thoughts.