Remove runtime css-in-js from the project

[cseas]

CSS in JS is bad for perf. There are workarounds to improve its performance but instead of spending time fixing problems introduced by CSS in JS, it's better to remove the problem at the root level and switch to generating CSS at compile time instead of runtime.

• https://pustelto.com/blog/css-vs-css-in-js-perf/
• https://itnext.io/how-to-increase-css-in-js-performance-by-175x-f30ddeac6bce

Proposing to remove styled-components and replace it with a compiled CSS solution such as Vanilla Extract (Seek), Compiled (Atlassian), Stylex (Facebook), etc.

Vanilla Extract seems to be the best alternative right now since it works very similar to Sass and provides type safety for CSS. However, the challenge is that Vanilla Extract requires a bundler:
vanilla-extract-css/vanilla-extract#90 (comment)

Webpack doesn't currently have a way to ship an ESM library with the original tree but there are plans of implementing it: webpack/webpack#2933 (comment)

Rollup can ship ESM with preserveModules but I'd like to avoid diving into its ecosystem because it requires a lot of third-party plugins to work with TypeScript correctly. The app part in this project is already built with webpack so it'd be easier to just reuse that config instead of building with a completely separate bundler.

Need to revisit this when Webpack has a way to ship ESM lib with original tree.

[cseas]

This is done for Anchor component. Other components to be migrated same way.

[cseas]

Need to take Typography next. It's needed to move the home page of my blog to server components.