What's going to happen with this project?

[LucasAndrad]

Looks like this project is no longer being updated (only dependabot-preview is committing here), so what should we use to replace it? I really like this project but it's not even updated with the last changes from styled-components, I believe very soon the effort to use this package will be greater than the benefits.

[vashchukmaksim]

#1547

[South-Paw]

Not being maintained anymore: #1986 (comment)

I made a fork of styled-system a while back and added some improvements and fixes to it such as writing it in Typescript, adding pseudo props (_hover, _focus, etc) and adding the sx prop and helpers.

Even though the types aren't 100% there (I just haven't had the time to jump back into fixing them/working out whats wrong), the library functions mostly the same as this one (and the exceptions are noted in the readme) + I intend to keep it updated.

The reason I originally made the fork was because I wasn't confident that this project was being maintained and I wanted to know what the internals of styled-system were myself so I could keep it running where I used it.

[Peeja]

@South-Paw I came here to ask if it would be a good idea to do exactly that! We might try your fork; if we do, we'll toss some PRs your way if we find anything we can help with.

[South-Paw]

@Peeja that would be super, any help would be appreciated :)

[russeg]

Looks like the project is abandoned, so don't use it. The forks also seems be abandoned (last commits were months old).

[South-Paw]

Looks like the project is abandoned, so don't use it. The forks also seems be abandoned (last commits were months old).

Please don't deter people from alternative repos, just because a project hasn't been update in a while doesn't mean they don't work, cannot be contributed to or iterated on by others who do have time to spend on them.

The biggest issue with styled-system is that the maintainers have clearly abandoned it and the community as they won't look at PRs or issues anymore. However that does not mean that it has magically stopped working or doesn't do what the documentation says it does.

[asci]

@South-Paw it would not stop working but it might cause problems updating other dependencies, so investing in this project is not a good idea at this moment. I hope any fork will gain popularity or original authors give somebody permissions to maintain this repo\package

[D1no]

Back in 2018 I used styled-system to build some products and wanted to do now again (took a break from frontend dev). And as expected, most projects used like react-static, Gatsby etc have outdated documentations and break front and center as of today.

After testing a whole bunch incl. tailwindcss — anybody looking around, who uses react, is used to typescript and doesnt like to put in a bunch of strings into className should really take a look at xstyled and especially read this: https://xstyled.dev/docs/introduction/#story (<- the author of this library is part of the creation story)

• Emotion
• xstyled
• and than a component library

seems to be a pretty solid choice for anyone randomly coming back here like me.

[pjaws]

I've been using styled-system for 2 years now at work and hadn't really given too much thought to the lack of updates, since it mostly does what I want, but it is sad to see that it's no longer being maintained. I'm a huge, huge fan of this philosophy and all of @jxnblk 's work and have been a loud proponent at my company for other teams to switch to this way of writing components. I honestly can't imagine writing components another way after using this library.

That being said, I completely understand that maintaining a library like this is a thankless job, but I also think it's important for this package to exist and not die out - especially due to something like outdated dependencies. I'm not sure what the solution is if the original author is no longer interested, other than maybe corporate sponsorship or ownership via a fork? Maybe @priceline or another large user?

[mryechkin]

@pjaws well said, and I agree 100%.

We've actually been looking at having our component library start utilizing styled-system, as like you said the philosophy and API of this library is fantastic - but not hearing anything from the maintainers is a bit concerning. I wish there was an alternative that works as well with styled-components as this does (Theme-UI only works with Emotion, from what I understand), but sadly I haven't been able to find anything comparable.

It would be good to at least hear from @jxnblk or any other maintainers on what the future holds for this project.

[JaneJeon]

Yeah, we obviously can't fault the library creator for failing to maintain this until the end of time, but when it gets popular like this (almost to the point where it is a "standard", really), I think the only way forward is for @jxnblk to accept a few people into the core maintainers list so that the library can thrive and maintain its community momentum (notice how all of the forks above were all unmaintained themselves) even without his day-to-day involvement.

[The-Code-Monkey]

i also host a cloned version at https://github.com/The-Code-Monkey/TechStack/tree/dev/packages/styled-system not got a readme as of yet as the mono repo is still being built up but to install its @aw-web-design/styled-system let me know if the issue persists in there and if you want feel free to make a pr to the dev branch.

Which is currently being maintained and will continue to be for the foreseeable future as I use it myself for my freelance work.

[mikirejf]

I've also been eyeing the lib since it provides the sweet spot between the readability of the code and productivity. It would be really great if someone could take over as the core maintainer.

Summoning jutsu!!! @jxnblk

[The-Code-Monkey]

@mikirejf feel free to try out my version for now, currently it's a typescript clone but will be getting some updates down the line.

[mikirejf]

@mikirejf feel free to try out my version for now, currently it's a typescript clone but will be getting some updates down the line.

Will take a closer look tomorrow 👍

[bertho-zero]

By the same creator, "The next evolution of Styled System":

https://github.com/system-ui/theme-ui

[mryechkin]

By the same creator, "The next evolution of Styled System":

https://github.com/system-ui/theme-ui

Doesn't support styled-components, unfortunately

[bertho-zero]

Ah, I've always used emotion 🤷‍♂️

Styled-system is dead and its creator seems to be focused on theme-ui, that's all.

[mryechkin]

Styled-system is dead and its creator seems to be focused on theme-ui, that's all.

Not even, last commit by @jxnblk to Theme-UI was back in 2020 - it's being maintained by a different person now. That's part of the frustration for many of us is that he seems to have just disappeared from these projects without any notice.

[bertho-zero]

I see, maybe you can call him somewhere else to add maintainers, on twitter, by email, at Gatsby or whatever.

It's sad to let a project like this die.

[The-Code-Monkey]

I have a version as part of my TechStack repo, feel free to add issues and features there. I will add people as maintainers if they are wanting to

[South-Paw]

I see, maybe you can call him somewhere else to add maintainers, on twitter, by email, at Gatsby or whatever.

It's sad to let a project like this die.

Have already tried to contact him a few times - no response. Very frustrating

[South-Paw]

I have a version as part of my TechStack repo, feel free to add issues and features there. I will add people as maintainers if they are wanting to

@The-Code-Monkey Your version appears to be a customised one for your own use - at a glance, there is changes you've made for your own reasons that are not beneficial to other projects or necessary for them - that isn't helped by the fact there are no docs for the project or notes on what (if any) changes there are

There's nothing inherently wrong with this because it works for you and you did it for yourself, but I (and i assume others) are not willing to bet client work on your project after being bitten by this one already.

I suspect these reasons are also why every time it's been mentioned it here, it hasn't been picked up by anyone looking for an alternative.

[South-Paw]

On a personal note; I've stopped working on @spicy-ui/styled-system because I don't have the time to maintain it and despite it picking up some stars, no one has reached out to help support it in the last year - so I'm migrating projects away from styled-system/spicy-ui for good.

styled-system unfortunately is a dead project and this should have been called out a long time ago by @jxnblk so that people didn't continue getting trapped by picking it in the last year and a bit.

[The-Code-Monkey]

I am aware I've made some changes but 99% of it is the same, my aim is to have documentation written for all the packages in that repo by the end of the month. Or at least the ones that aren't custom for my needs.

I'd be happy to revert any changes that I have made to styled system if people want to use it. And I can add the things in that I needed into a new function instead.

[ivan-kleshnin]

Too bad that the project was abandoned. Theme-UI is very opinionated in comparison to Styled-System... with all that JSX overloading and bloated theme props. I immediately don't like it.

[bertho-zero]

The best replacement for styled-system is in my opinion chakra-ui.

https://chakra-ui.com/docs/styled-system/style-props

The styled-system examples work with chakra-ui in the same way, there is a Box component that allows you to do everything, the theme system and responsive are similar, it's super flexible and very intuitive.
Chakra uses emotion under the hood.

(don't hit me)

[ivan-kleshnin]

Yes 👍 I don't have a lot of practice with Chakra myself but so far it feels the most customizable.
And its API looks the cleanest of alternatives. Don't discard it because it has few components. Low-level components are much more important and used more often. And Chakra wins there, hands down.

[South-Paw]

Chakra UI has also been my replacement - glad to see others also went that way too! 😄 They have a great community on Discord, super helpful and you can get pretty far with the Chakra UI primitives and components.

[mikirejf]

I also went with chakra. It's nice because you can install only the packages you want to use. That way you can also avoid bloating the bundle with their default theme.

Also found this: https://system-props.com/

[isenricho-dd]

This is really disappointing. Part of what I like most about styled-system is that it's a bit lower-level and gives us the ability to impose a constraint-based design system through a theme spec and some utility functions. I'm not looking for just another themeable component library like Chakra, Material-UI, etc. There are a million of those and, while many are great, I sometimes work on very bespoke projects that don't benefit from cookie-cutter components. styled-system was right in the sweet spot and didn't come bloated with a hundred pre-built components.

[ivan-kleshnin]

@isenricho-dd you repeat my own line of thinking and my mistake. Chakra-UI is what you need. Just use Box, Flex, Grid, Container and its theme engine and ignore everything else. It would be a similar experience to using Styled-System, just nicer (as Chakra APIs are better). From what I heard, many dev. teams follow this practice 👈

Nothing forces you to use Chakra-UI as a component library. It works perfectly as a low level toolkit to implement your own styleguides. MUI is slightly less flexible but also can be used in the same way. Unused components wont add to the bundle, only slightly increase installation time which is negligible.

We switched to Chakra-UI and never regretted. There are obviously some minor issues but, in comparison to MUI, Semantic-UI, Mantine (and other tools we tried), it's a gift 🎁

[phaux]

I switched my pet project to Tailwind and I'm liking it so far. It uses all the same ideas as styled-system, although with slightly different syntax. Rewriting was very easy, to the point that I believe it could be automated with a codemod.

Compare:

<Box
  paddingY={2}

  display="flex"
  flexDirection={{xs: "column", lg: "row"}}
  alignItems="stretch"

  borderStyle="solid"
  borderWidth={1}
  borderColor="accent-light"
  borderRadius="sm"
>

<div 
  className={
    "py-2 " +
    "flex flex-col lg:flex-row items-stretch " +
    "border border-1 border-accent-light rounded-sm"
  }
>

Some differences:

• all the props use shortened names which can be confusing
• default theme contains some custom props not based on CSS like ring (why not just use outline?)
• space values (paddings, margins) don't increase exponentially, although you can override it with custom theme

If you're not a big fan of custom build plugins like me then there's also twind which is just a library and it has similar bundle size to styled-system.

[ivan-kleshnin]

^ first version:
👍 Uses native CSS names/constants
👍 Type-safe (with TS), working autocomplete, documentation tooltips (without IDE plugins, just TS)
👍 Eaisier to read and to write

I will never understand why people like Tailwind (or its clones) 🤷

[isenricho-dd]

@ivan-kleshnin hmm okay.. maybe I haven't given Chakra enough of a chance. I'll take a look at it, thanks for the recommendation.

On the same page about Tailwind. know it's hugely popular, but I can't help but feel like it's a step backward. Moving back to using magic classNames in my components after having used css-in-js is hard to swallow for me. Am I missing something?

[phaux]

@isenricho-dd Twind is CSS-in-JS.

In theory you can simply not use the default theme in twind and define your own which uses actual not-shortened css property names and you should end up with something pretty close to styled-system:

<div 
  className={tw`
    padding-x-2 
    display-flex flex-gap-2 
    border-radius-small
    background-color-secondary
  `}
>

It's almost the same as original emotion.

[switz]

I still really like the styled system paradigms over tailwind, but it's clear css-in-js is on the way out. It's just not nearly as compatible with edge, server, and streaming runtimes. 90% of my layout styles are static so why am I compiling/rendering them at runtime, even if the styled system API/surface area is more pleasant to work with?

What's everyone doing? Should I start to move off of styled system and into tailwind? Does anyone have a codemod to do so?

My goal is to get my app running more and more on the server with everything streaming from the edge to lower TTFB and speed up rendering. With the new nextjs release today this is going to be the paradigm moving forward – I knew this day would come, just wondering if now is the time to pull the trigger to move off of styled system.

[The-Code-Monkey]

@switz I currently have a version in development, which I am using personally it's mostly the same as styled system after I converted to typescript.

Feel free to take a look and test it out. Would love your feedback too.

https://github.com/The-Code-Monkey/TechStack/tree/dev/packages/styled-system

Or on npm it's https://www.npmjs.com/package/@techstack/styled-system

Docs coming soon but currently it's the same API as it is here.

[isenricho-dd]

It's not necessarily clear to me that css-in-js is already on the way out. I think it still provides too much value in the way of scoped styles and Dx experience that the current css-in-js libraries may just adapt and move in the direction of supporting cacheable css stylesheets (a la Linaria). Idk what exactly what that will look like and I'm sure that presents problems of its own, but you can never have it all.

[switz]

I currently have a version in development, which I am using personally it's mostly the same as styled system after I converted to typescript.

That's really nice. Does it support any styling libraries that have zero-runtime css? Because that's what I'm after, mostly.

It's not necessarily clear to me that css-in-js is already on the way out.

Fair enough. My issue is not entirely with css-in-js alone, but with a mass of runtime styles and excess client-side js parsing. 90% (or more) of my styles can and should be generated ahead of time, and while nextjs can somewhat handle that today with SSR, it's a messy solution and not 100% effective.

I've ridden styled system quite far as it's a beautiful API and far more pleasant (to me) than concatenating class names (e.g. tailwind). But it's not actively maintained and it's built on top of a paradigm (runtime styles) that I personally don't think will be able to stand up long-term to faster and slimmer solutions like tailwind (or even linaria).

I'd love to keep using styled system so if anyone has a solution, I'm all ears.

Next has now several times released new versions without native support for styled components and I've noticed the chatter to add them has been pretty tame. They're not in a rush.

via the next.js docs:

We’re working with the React team on upstream APIs to handle CSS and JavaScript assets with support for React Server Components and streaming architecture.
https://beta.nextjs.org/docs/styling/css-in-js

It sounds like next.js will try to support styled components in RSC, but it will require work from the React team and by their tone, it doesn't sound like it's around the corner. I suppose we'll just have to wait and see.

[The-Code-Monkey]

@switz currently my version supports the same as this which is emotion and styled components. But I am open to prs to make it support other CSS in js libs.

[ivan-kleshnin]

@switz: I still really like the styled system paradigms over tailwind, but it's clear css-in-js is on the way out. It's just not nearly as compatible with edge, server, and streaming runtimes. 90% of my layout styles are static so why am I compiling/rendering them at runtime, even if the styled system API/surface area is more pleasant to work with?

You're right my dude. Chakra-UI is very good – in terms of ergonomics and dev. experience. But the bundle size...

SOME PAGE IN SOME PROJECT

250Kb (React + NextJS + Chakra-UI + Emotion) 

-[rewrite]-> 

90Kb (React + NextJS + TailwindCSS)

What's everyone doing? Should I start to move off of styled system and into tailwind? Does anyone have a codemod to do so? My goal is to get my app running more and more on the server with everything streaming from the edge to lower TTFB and speed up rendering. With the new nextjs release today this is going to be the paradigm moving forward – I knew this day would come, just wondering if now is the time to pull the trigger to move off of styled system.

I've come to the same conclusions, so I'm personally jumping on the TW bandwagon. CSS-in-JS was nice and everything, but I think it's over. TW provides an amazing ergonomics and development speed, comparable to CSS-in-JS. And you don't trade all it for the app performance.

CSS-in-JS locks you into the framework ecosystem: be it React or Vue. With TailwindCSS it'll be much easier to switch to Qwik or SolidJS in the future (in case one of such projects will mature enough to compete with React).

There're tons of UI and component libraries for TW, the docs are perfect – the best in class. TW is growing like crazy: https://npmtrends.com/@chakra-ui/utils-vs-@material-ui/core-vs-@mui/base-vs-bootstrap-vs-tailwindcss (check 5-years scale) What else to wish for?

[poteboy]

Hello everyone,

I have been a huge fan of Styled System and its approach to utility-based styling. The library has had a significant impact on my work, and I am truly grateful for the time and effort put into it by its contributors. However, since Styled System is no longer maintained, I felt compelled to create an alternative library called Kuma UI, which is heavily inspired by and builds upon the principles of Styled System.

Similar to Styled System, Kuma UI allows for styling components using utility props. Here's a quick comparison of how components can be created with both libraries:

Styled System:

import styled from '@emotion/styled'
import { typography, space, color } from 'styled-system'
const Box = styled('div')(
  typography,
  space,
  color
)
const Component = () => ({
  <Box p={4} bg="orange">
    Hello, World!
  </Box>
})

Kuma UI:

import { k } from "@kuma-ui/core";
const color = 'orange'
function App() {
  return (
      <k.div fontSize="40px" color={color}>
        hello world
      </k.div>
  );
}

One of the main advantages of Kuma UI is that it doesn't rely on runtime overhead. Instead, it extracts CSS during the build process. This offers a performance improvement compared to Styled System, which is often used in combination with styled-components and shares its runtime injection performance concerns.

I hope that Kuma UI can serve as a viable alternative for the community and continue the legacy of Styled System. Please feel free to check it out and share your thoughts. I appreciate any feedback, and I'm grateful for the inspiration that Styled System has provided me! 🙏

Here's the GitHub repository: https://github.com/poteboy/kuma-ui

[The-Code-Monkey]

Hey there, nice work with this. Just wanted to let you know that I have unofficially took over the project and it is currently sat at https://github.com/The-Code-Monkey/TechStack/tree/dev/packages/styled-system if you want to keep developing yours in parallel go ahead but if you want to contribute to mine I would welcome the help. @poteboy

[Nagibaba]

The problem is with the version of styled components went from 4 to 5. If you downgrade to it, styled system will work. It's not a great solution, but works

[The-Code-Monkey]

@Nagibaba my version works with the current version of styled components, I am trying to get hold of the creator but not having much luck. To install my version it's yarn add @techstack/styled-system

[bertho-zero]

@ivan-kleshnin: Chakra-UI is very good – in terms of ergonomics and dev. experience. But the bundle size...

SOME PAGE IN SOME PROJECT

250Kb (React + NextJS + Chakra-UI + Emotion) 

-[rewrite]-> 

90Kb (React + NextJS + TailwindCSS)

I've come to the same conclusions, so I'm personally jumping on the TW bandwagon. CSS-in-JS was nice and everything, but I think it's over. TW provides an amazing ergonomics and development speed, comparable to CSS-in-JS. And you don't trade all it for the app performance.

CSS-in-JS locks you into the framework ecosystem: be it React or Vue. With TailwindCSS it'll be much easier to switch to Qwik or SolidJS in the future (in case one of such projects will mature enough to compete with React).

There're tons of UI and component libraries for TW, the docs are perfect – the best in class. TW is growing like crazy: https://npmtrends.com/@chakra-ui/utils-vs-@material-ui/core-vs-@mui/base-vs-bootstrap-vs-tailwindcss (check 5-years scale) What else to wish for?

Pandacss and Ark solve all these problems.

Pandacss is a "styled-system" with chakra developer experience, performance and tailwind-style static extraction, the best of both worlds.

Ark is a library of fully customizable, accessible, unstyled and multi-framework UI components.

The v3 of chakra should integrate its 2 libraries to settle all that can be reproached to it today.

[dfiedlerx]

Use another library, such as xstyled, KumaUi or Chakra, unfortunately this library was abandoned without any explanation or manifestation from its maintainer a long time ago.

[The-Code-Monkey]

Use another library, such as xstyled, KumaUi or Chakra, unfortunately this library was abandoned without any explanation or manifestation from its maintainer a long time ago.

I have been updating this project over on my fork. If you want to continue using it, feel free to check mine out..