search

robinweser / fela

State-Driven Styling in JavaScript
http://fela.js.org
MIT License
2.27k stars 182 forks source link

Empty `style` tag when using fela-dom render method for runtime rendering with Sveltekit #920

Closed moaali closed 3 months ago

moaali commented 3 months ago

Type: Bug

Packages Version
fela 12.2.1
fela-dom 12.2.1
fela-preset-web 12.2.1

Description

I'm trying to integrate Fela with Sveltekit, only at runtime NO server rendering, and I managed to get it almost working as expected but currently there seems to be an issue with fela-dom, render method of fela-dom always injects empty style tag for rendering rules in the head and yet the classes are generated and attached properly to the DOM element and the styles are working as expected, please see the screenshot to know what I'm talking abou, i also believe that this issue https://github.com/robinweser/fela/issues/600 might be close to what I'm facing (not using fela-monolith though)

Issue

Steps to reproduce

Here is a minimal demo to reproduce the problem on Stackblitz https://stackblitz.com/edit/sveltejs-kit-template-default-dtyeuz?file=src%2Froutes%2F%2Blayout.svelte you can inspect the black box element to see the classes working and when you expand the <head> element you will find EMPTY style tag

Expected Behavior

I expect Fela style tag to have the rules as below:

<style data-fela-type="RULE">
  .a { color:red }
  .b { background: blue }
  /* etc */
</style>

Actual Behavior

Empty Fela style tag but the relevant styles are still applied to the element correctly.

<style data-fela-type="RULE"></style>

Also the performance when the Fela style tag is empty gets worse with high elements count (1000 elements for example block main thread for 2.6 seconds) on contrast to the fast rendering of these demos https://tuchk4.github.io/css-in-js-app/#/react-fela

Would you please tell what is wrong or how to debug this problem as Fela is the perfect fit for the project I'm working on and I don't want to give up on it,

Thanks in advance.

robinweser commented 3 months ago

This is most likely due to Fela using insertRule to attach styles which results in visually empty style tags although all styles are applied correctly. Regarding performance: I don't think the empty style tag has anything to do with the performance, but the fact that you're rendering client-side only. Generally speaking, client-side only rendering is slower compared to SSR since all the calculations are running on the client. Not really sure if you can do something here as long as your setup is fine (looking at your minimal repro, it looks good, but I've never used svelte before)