Suggestion to replace Stitches in the Styling with CSS-in-JS guide #817
Replies: 10 comments
-
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? |
Beta Was this translation helpful? Give feedback.
-
I would like to help out here as well. I think it a really needed addition. Any libraries you are focussed on for this? |
Beta Was this translation helpful? Give feedback.
-
I'm open to contributing to this effort. but I'm currently unsure which library would serve as the best replacement for Stitches. |
Beta Was this translation helpful? Give feedback.
-
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? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Hi @kelvin27315, After discussing with the team, here is the approach we want to take:
Let me know if this is something you'd be happy/able to help with! |
Beta Was this translation helpful? Give feedback.
-
I'd be happy to take on this task!
About the Styling guide, I have a couple of quick questions:
Also, I came across the Aliasing – Radix Colors page that uses Stitches. Any thoughts on what we should do with this page? |
Beta Was this translation helpful? Give feedback.
-
That is correct.
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 think it would be great to add one there too 👍
Yes, I think we should remove those Stitches tabs on that aliasing page. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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.
https://github.com/stitchesjs/stitches/blob/canary/README.md?plain=1#L1
stitchesjs/stitches#1149 (comment)
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?
Beta Was this translation helpful? Give feedback.
All reactions