Allow useStyle$ to receive functions

[wmertens]

Is your feature request related to a problem?

I want css-in-js :-)

Describe the solution you'd like

https://emotion.sh as implemented for React is perfect.

I tried with @emotion/css (framework agnostic) and that allows me to do it on the client side, but not SSR.

I also tried to change the strings that go into useStyle$ but that isn't possible.

I think that the way it currently works with React is as follows:

• given a definition, generate a normalized CSS style string, resulting in a hashed class name
• if the style isn't present yet (look at the hash), inject it in the DOM
  • for streaming SSR, this means emitting a style tag before the tag it applies to
  • for client, this means adding it to a managed style sheet
• not sure what happens when a style is no longer used, but since the definitions are flat and hashed, keeping them in the browser only takes up some memory

This process is managed by a "styled" component, which is a wrapper around a given component that then receives a className prop.

Translating this to Qwik, I think useStyle$ would need to accept a changing style string, and then this same process could be implemented. A styled$ wrapper would take a (light or regular) component and do refcounting and emit/unemit styles as needed.

Describe alternatives you've considered

I looked at rolling my own useStyle$ but I don't understand the core code enough, and I don't even know if enough is exported to be able to do so.

Additional context

No response

[wmertens]

@manucorporat Is there anything I can do to get this into v1? Do you have a rough idea of the work involved?

[wmertens]

So after thinking this over, I don't think I want to encourage this behavior. A build-time css-in-ts solution like vanilla-extract is way more along the philosophy of Qwik.

I'm going to close this, but people do want to see this implemented, I made a symbolProvider for svg that could just as well be a dynamic style provider.

It would have to take QRLs, run them inside a useWatch track(), hash the output, and add as appropriate. If styles need to be removed as well, that requires a refcount.

All in all it's some extra work, not extremely so, but still rather pointless given that you can do it better with classes+css variables+inline styles.