☂️ Explore no / low runtime library for CSS

[saurabhdaware]

Blade will be a low-level library used in almost every Razorpay app. To make sure that blade stays performant, I think we should explore some other CSS solutions as well. Changing the CSS framework will become too difficult once we start building components.

Although in this issue I am proposing stitches (this is just my unresearched opinion), maybe an RFC on comparison of different CSS frameworks would be great since this will play a major role in the consumer apps.

We now have stitches which is a no/low-runtime CSS-in-JS solution. Time to Interactivity is one of the biggest unsolvable problems in React SSR/SSGs. We have hit several roadblocks on frontend-website because of chakra and framer-motion's runtime performance and bundle size. Having a low-runtime framework will help us improve a lot on that front.

It's bundle size is almost half of the styled-components and it is more performant on runtime. This will allow us to write base UI components without worrying too much about the performance.

I have used it in SSR and the setup with SSR is great! It is also one of their focus areas and they will keep on improving the SSR setup.

Their API is not too far from styled components so there won't be any major learning curve

[chaitanyadeorukhkar]

Stitches don't have any official react-native support yet. Styled Components has been battle-tested with both react & react-native. Any other css-in-js come to your mind? I'd love to explore some alternatives as well.

Ref: https://github.com/modulz/stitches/issues/596

[saurabhdaware]

Ohhh right totally missed the react-native! Not sure of any other css-in-js solution doing as well as styled-components in cross-platform react. Will have to check.

[divyanshu013]

Alternative is we go for different libraries on web and native. A near zero runtime library on web would be really awesome to have. We should do some PoC I feel.

[saurabhdaware]

We might also be able to use css-to-react-native (internally used by styled-components) to create some basic cross-platform styles.

[saurabhdaware]

@blenderskool mentioned https://github.com/callstack/linaria and that it also has some conversation going on about react-native support

P.S. Using this thread to add all possible solutions so that we can refer to these when we decide to explore.

[anuraghazra]

Seems like this stitches react native library has been in development for quite a while and supports most of the stuff.

https://github.com/Temzasse/stitches-native

Maybe worth a POC

[cseas]

Wouldn't recommend Stitches today.

• Many core contributors that started the Stitches project have left the team and the community regularly questions whether it is still maintained. Pull requests are slow to merge and new issues might get ignored.
• Stitches, while better than styled-components is still a runtime css-in-js library. Ideally we want something that extracts css styles at build time.
• All runtime css-in-js libraries come with their own set of problems. For example, Stitches requires it's own server-side rendering setup. A UI library that intends to ship static styles shouldn't require consumer projects to do any extra setup to generate styles. Static styles should be generated by the library before publishing the package.

More details: https://github.com/stitchesjs/stitches/issues/1026#issuecomment-1138900012

Would recommend build-time CSS generation instead. Most prominent examples are Linaria and Vanilla Extract, both offer rollup plugins.

Another consideration could be to remove css-in-js altogether and use static styles in the first place with css modules, sass, tailwind, etc.

Also see Twitter thread on performance of atomic CSS.

[cseas]

Tamagui has a core package that can be used for styling components that work on both web and react-native. It comes with a compiler that's supposed to output optimised atomic CSS.

It can be considered as a base library to build Blade upon since the use-case is almost exactly the same: shipping the same API that works across both web and react-native without the performance cost.

However, we can't bet on its reliability yet since it released v1 only about a month ago. Other options I mentioned in my previous comment like Vanilla Extract and Linaria all have considerable adoption by the community at this point. But let's keep Tamagui in mind, the concepts it uses solves similar problems to that of Blade and can be used as inspiration.

[cseas]

React 18 has started to become mainstream. Popular libs like Framer Motion have already dropped support for React 17 in latest versions. This issue will be important in paving the way forward to support React's Server Components in Razorpay apps.

Chakra UI is coming up with a new build-time CSS-in-JS solution. It's still beta but will likely power their next major release: https://github.com/chakra-ui/panda