Chat about the future for stitches #1149
Replies: 70 comments 87 replies
-
|
I'm a passionate stitches user/believer/supporter, and would love to help however I can. That said, I'm more of a designer than a OSS maintainer so I'm not sure how I could. I work as a manager so maybe have skills to contribute around planning etc. Are there any peeps with OSS maintenance experience? |
Beta Was this translation helpful? Give feedback.
-
|
I know https://github.com/Mokshit06 has been working on a project called macaron which is very similar to this stitches static extraction endeavor. I wonder if there's any desire to combine efforts here? I can also say that I'm happy to take PRs on where I can. |
Beta Was this translation helpful? Give feedback.
-
Macaron is built off of vanilla-extract so they would need to be included in that conversation since it’s their static extraction engine. |
Beta Was this translation helpful? Give feedback.
-
|
This is really good news 🎉 While I don't have the capacity right now to maintain Stitches again, I'd love to help out with the DX-related work, including the Stitches API. Being one of its creator, I can also contribute to providing historic context where necessary. If there's a future for Stitches, I'd also love to once again advocate for it. |
Beta Was this translation helpful? Give feedback.
-
|
I gave a try to macaron but it lacks many Stitches features yet, the api is the same which is nice but the types and access to the tokens is still missing, same for responsive variants. I think it's a great start point since Stitches runtime will have to be replaced. I'm wondering if it worth relying on an external tool or better to build it internally. We use it internally in Miro's design system, and I could absolutely step in to push Stitches forward! |
Beta Was this translation helpful? Give feedback.
-
|
I've recently been writing a POC for a stitches like api with static extraction. Bit of a frankenstein, but it's alive!!! Works more or less like this: I wrote something like cva, then using linaria to create the classes and handle css extraction. Now, linaria has an option that let's you define a preprocessor, using stylis we can add a plugin that adds all the nice stitches stuff like utils, custom theme map, etc, and since this is a build step, stylis is never included in the browser bundle. And by the way, let me take a moment just to mention how great stylis is, like really. The real challenge was actually to get responsive variants to work. The best solution i could come up with was to create a new option named dynamic variants, the goal is to use them to set css variables. The problem with css variables is that it bleeds to child elements, so using React's Just throwing some ideas out there, feel free to use and adapt if needs be. A sample of how it looks like at the moment: import { css } from "@linaria/core"
const Stack = styled("div", {
base: css`
display: flex;
flex-direction: var(--stack-direction, column);
& > :not(style) ~ :not(style) {
margin-top: var(--stack-spacing-column, 0);
margin-inline: var(--stack-spacing-row, 0) 0;
margin-bottom: 0;
}
`,
dynamicVariants: {
spacing: (v: number) => ({ "--stack-spacing": `calc(${v} * 1px)` }),
direction: (v: "row" | "column") => ({
"--stack-spacing-row": v === "row" ? "var(--stack-spacing)" : "initial",
"--stack-spacing-column": v === "column" ? "var(--stack-spacing)" : "initial",
"--stack-direction": v,
}),
},
defaultVariants: {
spacing: 16,
direction: "column",
},
})I've never wrote a babel or SWC plugin, so my experience with it is not up to par to the needs of stitches. But I'll definitely contribute with a pull request here and there. @gajus and his company @contra have voiced interest in this here, and I would support them. I've used another package by him (them?) and was really please with it. |
Beta Was this translation helpful? Give feedback.
-
I had a conversation about it with @StephenHaney, and unfortunately it is no longer an option for me or Contra to become active maintainers of Stitches. We also intentionally do not use SSR (or intend to), so the static extraction is not particularly relevant to our setup. |
Beta Was this translation helpful? Give feedback.
-
A shame, but totally understandable nonetheless. 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Hey :) I used I would happily share my insights on the usage and help in achieving the static extraction engine! Thank you so much for Stitches by the way, it is an amazing project and I hope it continues to make styling so pleasing for everyone! |
Beta Was this translation helpful? Give feedback.
-
|
I've not a great experience in this type of library, but I do have experience in large OSS projects - primarily react-spring but also react-three-fiber / drei & strapi (who I work for). I've always loved stitches from when I first used it, I use it for my own site and the react-spring docs site and at my previous work used it on several microsites. I'd be happy to help out with daily triaging and working on smaller features and fixes till I'm up to speed on the landscape of styling solution - I'd understand if I don't quite fit the bill though 💪🏼 |
Beta Was this translation helpful? Give feedback.
-
|
I don't think I have the capacity to be a lead maintainer, but I'd love to contribute and work with an ad hoc group in the interim. If it feels like there is sufficient energy, maybe it would b worth figuring out a little meetup to get some historical context via @peduarte and start roadmapping? |
Beta Was this translation helpful? Give feedback.
-
|
On the one hand, I am sad to hear that the original team cannot maintain the project anymore, but on the other hand, I am excited to see that the project might have a strong future since also at our team, we decided against adopting using Stitches for our latest product despite this being our favorite styling library. I am a big fan of Stitches API design and strongly believe this could become the go-to alternative to styled-components for every project that wants to adopt react 18+. I would be excited to start maintaining the library together with the team at Commonbase, but I would need to have a quick discussion with the team first to see whether we have the bandwidth in the near future to rewrite the style extraction logic. |
Beta Was this translation helpful? Give feedback.
-
|
Same boat as a lot of people here, love stitches, been using it for quite some time now (since the @christianalfoni experimentation days) and I do have some thoughts on how to keep pushing forward the APIs. But As lot of people, don't have the bandwidth to take on a maintainer role (and it wouldn't help the library to be sometimes available). |
Beta Was this translation helpful? Give feedback.
-
|
Not to spam but I'd be happy to help Tamagui cover any gaps people see in using it, as currently it's probably the closest to Stitches in terms of API that has a production-ready static extractor (and optimizer!). I just put out |
Beta Was this translation helpful? Give feedback.
-
|
@StephenHaney I am the co-author of styled-jsx, if anybody is willing to fund these efforts I could help |
Beta Was this translation helpful? Give feedback.
-
|
I can definitely contribute with manpower to make Stitches thrive. Let me know! |
Beta Was this translation helpful? Give feedback.
-
|
@thiagoarantes @hennessyevan @wbobeirne @StephenHaney |
Beta Was this translation helpful? Give feedback.
-
|
I don't see you in the Radix / Stitches discord, but that would probably be a good place to spark up the discussion as I assume the maintainers keep an eye in there as well. |
Beta Was this translation helpful? Give feedback.
-
|
Please make stitches alive again to save me from tailwind 😬 |
Beta Was this translation helpful? Give feedback.
-
|
Panda is a step backwards for my use case. I'm building an internal design system package used by multiple teams which all have major variations in build tools. The major selling point of stitches for me is that it's self-contained. No consumer of our package needs to install stitches, add a theme provider, or otherwise switch their styling solution to get going. Stitches is an implementation detail that's nearly invisible in our setup. Panda is build-time, which means every consumer of our package would need to install panda and configure it for their app to be able to use our package. That is a good amount of friction that's currently a deal breaker. No other solution I've used in the past or looked into recently can provide what I'm getting from stitches. |
Beta Was this translation helpful? Give feedback.
-
Panda extracts your style usage from your source files and generates a static CSS file using atomic classes, that's it, you can use it anywhere and that also means you can distribute it to anyone (even non-Panda users) we do have presets if you want to share some utilities/recipes/etc to your Panda users, but that's completely optional |
Beta Was this translation helpful? Give feedback.
-
|
@shadymoses Tamagui has a super close API to stitches, fully type safe, and works compile time and runtime so it fits your use case. |
Beta Was this translation helpful? Give feedback.
-
|
@shadymoses I totally feel you and have the same exact problem. People still try to not understand that stitches has the most fixable API with its pure vision. Oh yeah, finally someone mentions annoying Well, I extracted stitches from the source and integrated our own internal structure already. It had seemed like the only solution at that time, so it seems now as well. In 2024 there are still no frameworks what stitches brought us. No matter how many different packages appeared. Sad, good luck people. |
Beta Was this translation helpful? Give feedback.
-
I totally agree. Stitches is just so "plug and play" which is exactly what we need for our design system too. I'm sure the problem is not a simple solution, but honestly, I still don't really understand what it is about stitches technically that prevents it from overcoming this server side rendering issue. I mean, is there just something under the hood in some kind of "engine" that needs to be altered? Can't we just maintain everything else that is very very stitches oriented and change only the bits that need changing? I've been following this thread for ages, and seen so many people put up their hands to try to nail this problem, but every time there seems to be a bit of momentum, and it's time to get hands-on, it just falls by the wayside. I'm more of a designer who codes so feel I cannot help much but maybe there's a way to try use some problem solving methods to fix the issue? As always, big love for the Modulz crew and all of the stitches community |
Beta Was this translation helpful? Give feedback.
-
|
@StephenHaney would it be possible for you to open up this repo for commit access by people here who've expressed interest in moving it forward, and just let them work on it? I see some interesting and concrete developments by @brijeshb42 for example, but I doubt initiatives like that will gain any reasonable traction as a fork. Even if Stitches has a runtime and despite the whims of the React team, there are plenty of people who'd probably benefit from further development, regardless of direction. If you're not going to be stewards then consider just handing it over to anyone saying they're willing to work on it. What's the worst that could happen? This is version controlled software, after all. |
Beta Was this translation helpful? Give feedback.
-
|
I have been in the ThemeUI ecosystem this whole time, specifically Dripsy because I can cross compile to React Native which is massive win for me. Wondering if this same issue applies to ThemeUI wrt static extraction. I have no issues about rewinding shorthand's from I suppose I could just never use RSC's if ThemeUI isn't static. There will be way more CSS written for sure. |
Beta Was this translation helpful? Give feedback.
-
|
@jeffscottward check out Tamagui, which does this including an optimizing compiler. The creator of Drispy is migrating to Tamagui actually with their startups app and has high praise for it over a year since their migration. |
Beta Was this translation helpful? Give feedback.
-
Very cool! Yea he mentioned it in my tweet to him, just hadn't looked yet. Looks like PandaCSS https://x.com/fernandotherojo/status/1710689378991821048?s=46&t=zsjvsRFuxqFkYW8y9jxV1A |
Beta Was this translation helpful? Give feedback.
-
|
Yep, PandaCSS came after Tamagui ;) but many of these libraries are similar. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, sorry if this came out to be a huge misunderstanding as English is my 2nd language, and I'm not technically a dev so I'm not really familiar with the lingo and where to put a comment :-) While there seems to be no way to do static extraction, I've been using this component as a way to include the CSS to the static website built. import React from "react";
import { styled } from "@/lib/styles/stiches.config";
import { HtmlConst } from "@/lib/consts";
import type { CSS } from "@stitches/react";
import type { PropsWithChildren, ForwardedRef } from "react";
import type { NextNode } from "@/types/next.d";
// * TODO: This is where if somehow, in the future,
// * if stitches.dev work more on Static Extraction,
// * then we might consider changing this.
type StyleProps = PropsWithChildren<{
// Default style
style?: CSS,
// CSS overwrite!
css?: CSS,
// Inline style to children
as?: NextNode,
// Customize element name
elementName?: typeof HtmlConst[keyof (typeof HtmlConst)],
// Other props
[x: string]: any,
}>;
const StyleWithRef = ({
style={},
children,
elementName=HtmlConst.DIV,
...otherProps
}: StyleProps,
ref: ForwardedRef<HTMLElement>
) => {
// Somehow, wrap an element like this will cause
// serverside rendering to include all CSS styles
// of the generated class during page load in <head/>.
let CSSWrapper = styled(elementName, style);
return (
<CSSWrapper ref={ref} {...otherProps}>
{children}
</CSSWrapper>
)
}
const Style = React.forwardRef<HTMLElement, StyleProps>(StyleWithRef);
export default Style;Usage: // ...
const Footer = ({children, ...otherProps}: FooterProps) => {
return (
<Style style={FooterStyles} {...otherProps}>
{AppConfig.DESCRIPTIONS.FOOTER}
</Style>
)
}
// ...I hope this provide as a workaround to someone who wants to build a static website using Stitches. If you're curious more about this, you can check for more code at: https://github.com/Cryptsu/Cryptsu.github.io, where I generate my static website using this way. If I understand the situation wrong, please just leave me here :-) Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
Interesting think to implement to use jsx with next 13+: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app |
Beta Was this translation helpful? Give feedback.
-
|
Interesting. I don't know the first thing about this but I'd be down to jump into the styled components implementation for example and see what would be required of stitches here. This is certainly a promising path forward but we still need a maintainer. |
Beta Was this translation helpful? Give feedback.
-
|
We have a working example in our project here if anyone wants to take a look https://github.com/washingtonpost/wpds-ui-kit/blob/v2/apps/nextjs14-approuter/src/app/registry.js. |
Beta Was this translation helpful? Give feedback.
-
|
nvm... we're using remix 🙈 |
Beta Was this translation helpful? Give feedback.
-
|
I write a css static extract library with stitches like syntax. please take a look. https://github.com/colliejs/colliejs |
Beta Was this translation helpful? Give feedback.
-
|
Arriving a bit late to the party, I've been utilizing Stitches for production apps for a few years now. For me, this has been the best API and the most dev-friendly experience among CSS-in-JS packages (I was using styled-components before). Despite many inquiries, I couldn't find a clear answer: should we continue using this package or not? I'm on the verge of creating a relatively large UI kit in Stitches as always, but this unresolved discussion led me to explore other alternatives like yamagui, unocss, stylex, and panda CSS. My entire day was spent testing, and the result is that "Stitches" still stands out as the best one. At some point, I attempted to create a basic version on my own, only to realize that I ended up using many Stitches features – essentially, there was too much to replicate. Please, let anyone willing maintain it, so we can continue enjoying this amazing invention :) |
Beta Was this translation helpful? Give feedback.
-
The only person who can decide that is you. There's no inherent reason to stop using a package just because it's not updated or maintained, it's only a problem if it has a bug, library incompatiibility, or a missing feature that inhibits you from what you're trying to do. Just keep in mind that with the current statements from the maintainers, you shouldn't expect any security vulnerabilities, breaking React changes, new CSS features, or bugs you run into to be addressed in future versions. It's unclear if an API-compatible alternative will come from the community, or if the maintainers will decide to pass it on to a volunteer, so you should make your decision of what to use with that risk in mind. |
Beta Was this translation helpful? Give feedback.
-
|
IMO as long as you don't need server components and keep your app client side there is no real need to change. If you want to keep up with the react ecosystem changes it would be a good decision to search for an alternative. |
Beta Was this translation helpful? Give feedback.
-
|
Hi! I'm just a product engineer, but I still believe stitches has the best in class styling API. Where do I start to learn how to write static extraction? |
Beta Was this translation helpful? Give feedback.
-
|
or even, how does one even write a styling library? I really want stitches to serve the future but I'm not sure where exactly to begin |
Beta Was this translation helpful? Give feedback.
-
|
I'm currently building a stitches-style API for static extraction, it's too early to share code but looking promising.
|
Beta Was this translation helpful? Give feedback.
-
|
@PookMook what would you think is missing from tamagui as a stitches replacement? It does the third option already and has a very close API. |
Beta Was this translation helpful? Give feedback.
-
|
tamagui is utility class based if I read it correctly. |
Beta Was this translation helpful? Give feedback.
-
|
@PookMook thank you so much! i think i have an idea of where to start. i hope all the work we do can lead to the best in class styling solution for react. cheers! |
Beta Was this translation helpful? Give feedback.
-
|
I developed https://github.com/jujitsustudio/sutairu in a short amount of time, which includes the stitches API (with some updates) and static extraction. There is working proof of concept, although some plugins can be buggy. Feel free to take inspiration or even fork it for yourself! |
Beta Was this translation helpful? Give feedback.
-
|
After searching for other libraries to replace stitches, I found that there is still nothing that can replace it. |
Beta Was this translation helpful? Give feedback.
-
|
I have been using https://www.tailwind-variants.org/ and it has served me well. I have no major complaints |
Beta Was this translation helpful? Give feedback.
-
|
No promises but I have a working prototype of static extraction + something
close to stitches (a bit more TS strict oriented). Writing documentation at
the moment before pushing.
…On Sat, Apr 20, 2024, 9:25 AM Nghi Nguyen ***@***.***> wrote:
After searching for other libraries to replace stitches, I found that
there is still nothing that can replace it.
—
Reply to this email directly, view it on GitHub
<#1149 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADMQUH42XJOPXGRIT5RWCGDY6JUGLAVCNFSM6AAAAAAWFXK27GVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCNZUGMZTM>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
@PookMook How can I help? 🤩 |
Beta Was this translation helpful? Give feedback.
-
|
What's missing in panda css ? It does all of it without any tradeoffs known to me |
Beta Was this translation helpful? Give feedback.
-
|
The limitations on conditional variants is the thing that currently prevents me from migrating to panda-css. Specifically, not being able to use compound variants along with conditional variants. |
Beta Was this translation helpful? Give feedback.
-
|
Coming here in 2025. It's been a few years since we all mourned the loss of stitches being maintained. This thread outline much of the blockers it had to being able to continue with New react versions. Surely in 2025, with all the we can do it with AI, can we get stitches up and running again to Support react 19? Not intending to be asking the stitches team to own this, but I remember many talented, passionate individuals keen to do this so just thought I'd keep the flame alive 🔥 |
Beta Was this translation helpful? Give feedback.
-
|
Most have moved on to various alternatives. We moved to PandaCSS and have no regrets. Tamagui is another one that gets a lot of love. Between the two, I don't see a lot of space/need for Stitches. |
Beta Was this translation helpful? Give feedback.
-
|
Oh yes, I guess it makes sense. I've had a bit of a look at panda CSS from time to time but often got stuck because we were using stitches for a design system and because it was still essentially CSS in JS, any of our products using the system didn't need extra configuration to get the styles. I think when we looked at tamagui or panda CSS, it was gonna require a change in the products too. |
Beta Was this translation helpful? Give feedback.
-
|
Tbf, my flame has been gone out since nobody took the responsibility to maintain it. IMHO, stitches is still the unique one which fills a very big gap for many people who are silent but sad. There is only a static extraction feature which can be hard to deal, otherwise surely people would keep contributing the rest of the bugs and some other recent features. |
Beta Was this translation helpful? Give feedback.
-
|
Personally I wouldn't call PandaCSS a replacement for Stitches. It just seems too much to me. Way too much abstraction for such a simple topic as styles are. In my humble opinion Panda tries to do too much overcomplicating anything possible. The tool I'm talking about is Tailwind Variants which is framework agnostic abstraction layer over Tailwind highly inspired by Stitches. The only significant drawback I encountered was the drop of responsive variants feature that got broken with the release of Tailwind V4 so you can stay with V3 or just swallow the pill - ain't a blocker at the end of the day. |
Beta Was this translation helpful? Give feedback.
-
|
This blog post by Josh Comeau talks about potential alternatives and the reasoning: |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Update
We're going to update the Stitches site to say it's no longer maintained so that new folks are aware of the current status. You can read more here.
Original post:
Hey y'all, I wanted to chat with everyone on the best route for the future of Stitches.
Obviously, things have been very slow lately. Here's the situation: most of the team that created Stitches is no longer available to work on it. And with React 18, the ecosystem has changed and made the future for runtime injection pretty murky.
If you're currently using stitches for SPAs, the React 18 changes don't really matter to you and you can continue using stitches without making any changes. But looking forward, the best route for the library – as far as I can tell – is to use static extraction. For stitches, that means a major rewrite of the styling engine.
So, given all of that, I think the right thing to do is to open it up to the community to have a chance to drive it forward. I'm chatting with a few very qualified people who have volunteered to take over the reins on Stitches. I'd love to see a great maintainer emerge who can help with the small features and daily triage and also drive toward the next major version for React 18+.
I'd LOVE to see the Stitches API with a static extraction engine. I think there's a huge opportunity here to be the perfect styling lib in the React ecosystem.
Let me know what you think of this path and if you'd like to nominate or volunteer as a lead maintainer. 🖤
Beta Was this translation helpful? Give feedback.
All reactions