No insertRule cache?

[steadicat]

I’ve been using the virtual add-on mainly because it has the side effect of not inserting new rules on every render and infinitely growing the stylesheet. Since I noticed that virtual has issues with server rendering, I tried disabling it, and I was surprised to see that by default, Nano does not keep a cache rules previously injected in the stylesheet.

If you inline rule definitions in your React render methods, new rules get added on every render, even if they are identical.

Here's a screenshots from logging before insertRule. I've got 600 rules right after load, and identical rules are injected all the time:

With a quick custom solution I wrote that does caching, the number of rules on the same page plateaus somewhere around 80:

I think Emotion and most other CSS libraries optimize this part. It seems like a relatively simple optimization. Any reason not to do it?

[streamich]

virtual addon is supposed to cache all atoms internally, here is where it is supposed to take a class name from cache:

• https://github.com/streamich/nano-css/blob/master/addon/virtual.js#L55

But from your post I understand that there must be a bug.

[steadicat]

You're right that virtual addon caches correctly. I was talking about what happens without it, i.e. the default behavior.

[streamich]

OK, then what you basically mean is that rule addon is not caching. I did not think it would need caching, never thought much about it TBH, did not think there would such a big difference, at least in my code, I think.

There could be another addon that adds caching:

nano.put = momoized(nano.put);