Performance Issue: Consider shipping static styles instead of css-in-js

[cseas]

Problem

Blade exclusively uses css-in-js using styled-components for styling all its components. This adds a runtime cost to every project that uses Blade which could be avoided if Blade used an alternate styling strategy.

Chakra UI has a similar approach and explicitly mentions this trade-off in their comparison docs:
https://chakra-ui.com/getting-started/comparison#the-runtime-trade-off-%EF%B8%8F

Refer below articles for a thorough analysis of this issue:

• https://pustelto.com/blog/css-vs-css-in-js-perf/
• https://itnext.io/how-to-increase-css-in-js-performance-by-175x-f30ddeac6bce
• https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/

The most easily noticeable impact of this is the "Avoid long main-thread tasks" performance check in Lighthouse which often gets triggered by runtime css-in-js libraries in apps using client-side rendering.

Related: chakra-ui/chakra-ui#859

Solution

Consider zero-runtime alternatives for styling the components, e.g. css modules, vanilla-extract, stitches, linaria, sass, etc.

[divyanshu013]

Duplicate #432

Could you please post your comment on that issue? Good to have all discussion at one place.