[✨] Towards atomic CSS in Qwik

[wmertens]

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:

1. define rules in libraries as well as in-file next to components
2. definitions compile to static classnames+css at build time
3. Qwik handles the css injection, whether in one large file or component-by-component
4. 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.

[manucorporat]

Let’s close this, as PandaCSS fullfills of this checks!