[✨] Towards atomic CSS in Qwik

Is your feature request related to a problem?

Tailwind and style9 are proving that there's something to atomic-ish CSS and CSS-in-JS.

Atomic CSS means (IMHO) that the CSS is broken down into individual rules. To do this, it's easier if you have a ton of mechanically prepared rules.

This means that there will be a lot of rules you don't use, and that it's easy to misspell a classname unless you're helped with types.

Describe the solution you'd like

We want the following properties:

define rules in libraries as well as in-file next to components
definitions compile to static classnames+css at build time
Qwik handles the css injection, whether in one large file or component-by-component
when a classname is not used, its css is not included

To achieve this, we need:

For (1):
- build-time conversion, either via
- custom plugin that converts at build time
  - style9 does this but fails combined with Qwik
  - vanilla-extract does this but for separate files only
- a way generic to mark a piece of code as build-time
  - e.g. const foo = eval$("SDFSD".toLowercase()) becomes const foo = "sdfsd"
- we end up with "classNames", which are imported and used as-is in class attributes
For (2): processing code, to be copied from style9 and/or vanilla-extract etc
For (3) + (4): ???
- perhaps each classname should be a special type of QRL, which includes the CSS
- when you use a classname in a component, it automatically adds the CSS to the component
- Qwik can then inject useStyle$([...allTheQrlCss]) or put everything in a single CSS file, depending on settings

Describe alternatives you've considered

vanilla-extract goes a long way but isn't optimized for atomic css and doesn't tree shake the css

Additional context

It may seem suspect that a special QRL type and special CSS handling is needed, but CSS is an integral part of the browser platform, so IMHO it's warranted to give it special treatment in a framework meant for the browser platform.

QwikDev / qwik