Rebass: Rebass vs just using Styled System?

[KingScooty]

As of 3.0.0 (now that rebass is stripped right back), it seems to basically be just a thin layer over styled system that needs extending out by the end user.

So with all the extending required, _why_ would someone use Rebass, instead of just using styled system? What is the rationale/intentions/benefits?

And where does https://github.com/jxnblk/superbox fit in with everything, as all the Rebass primitives are extensions of <Box /> anyway?

[Kikobeats]

In fact, Box@rebass could be replace by superbox 🤔

[jxnblk]

• Yes, you can create your own Box, Flex, Text, etc. components, but Rebass gives you some smart defaults that you can npm install and go build with. It's also meant as a model of how I would suggest using styled-system and represents the most useful (IMO) UI components for general purpose styling.
• Superbox is more of an experimental thing and isn't likely to stick to the same API as Rebass.

[KingScooty]

Makes sense. After looking at the source, and seeing how light touch Rebass had become, it did beg the question. As it is mostly now just utilising styled system APIs without introducing any APIs of it's own?

As a side note, with the abstract constraints introduced (layout components and typography components), we're not that far off the concept of having platform agnostic primitives. How feasible do you reckon it is to have Rebass follow a similar path to what react-primitives and react-native-web are doing?

[kristojorg]

So would you suggest I use styled-system to create my own Input and Select primitives? What is your recommendation for these?

Thank you!

[jxnblk]

@kristojorg You can create other components by extending the base Box component or creating your own from scratch – it really depends on preferences

[cereallarceny]

@kristojorg I was actually surprised that Rebass didn't offer inputs as one of its default components. Although it shouldn't be too hard to do these on your own, I would imagine the reason they're not included in Rebass was a deliberate decision. Just curious, why is that @jxnblk?

[kristojorg]

@cereallarceny once I understood the intended DX it made a lot of sense:

<Box
    as="input"
    m={3}
    value={value}
/>

Something like that. The base box is really just a set of functions applied to a default tag. You can change the tag as you wish. Rebass doesn't provide default input styling, but that didn't matter much for me as I would have changed it anyway.

[jxnblk]

@cereallarceny from my experience, input element styles tend to vary quite a bit from application to application and involve a lot of pseudoclasses, which makes it more difficult to create a one-size-fits-all component. I also think that most developers know enough CSS to be able to style an input for their specific application, and input styles are unlikely to cause any CSS side-effects outside of the component

[cereallarceny]

Totally fair - I agree with that 100%. Just simply found it interesting... I'm so used to seeing UI frameworks with inputs! However, I also find that the vast majority of CSS overrides I write for any UI framework, are "undoing" CSS for inputs. A bit ironic.

Would that be worth mentioning as a deliberate decision in the documentation?