[feature request] Create more comprehensive examples of how to use the bundlers in different scenarios

[iampava]

First of all thanks for building this. It's been very helpful to me 🙏

---

I'm writing this issue to propose we build a set of more advanced examples that follow the industries best practices, while also covering the most popular scenarios. For example, let's say we're looking at:

1. Building a JS library for shared functionality, similar to lodash
2. Building a UI components library (maybe in React)

Then, let's build a very simple app that use those libraries and incorporates some best practices:

1. Monorepo
2. TypeScript
3. Tree-shaking
4. Lazy-loading
5. Handling asset imports for the ui library (eg: import logo from 'ui-components/assets/logo.svg)
6. Handling CSS, both Styled Components and CSS Modules.
7. Configuring the UI Components Library to work in a SSR scenario (eg: NextJS, Gatsby)
8. etc...

I think having examples that go in depth and promote good practices would help a lot. Ideally each bundler would have it's own set of examples, but since that's not really the case, maybe we can use this tool to create that.

[mihkeleidast]

Just to leave a note here - I recently investigated what tooling can be used to create a component library with support for tree-shaking CSS.

Eventually arrived at two solutions:

1. CSS Modules and Rollup. Note that this is a fork of an existing repo, I just did some updates - so all credit to the original author. This relies on an forked postcss-plugin that does some magic with the exports, but it works well. https://github.com/mihkeleidast/css-modules-component-library-example
2. Vanilla-extract and Rollup. This is to see if the setup could be simplified by using a CSS-in-JS solution. Inspired by the first solution: https://github.com/mihkeleidast/vanilla-extract-component-library-example