Override inline styles about used-styles HOT 7 CLOSED

🤘, I hope it would be useful for you. Don't forget to tell friends :)

from used-styles.

No pitfalls. This is how it's working. That's why you have to moveStyles to hoist them on top, above any other CSS file, let those CSS files override critical styles:

import { moveStyles } from 'used-styles/moveStyles';
moveStyles();

from used-styles.

I can`t understand. Can u provide more complete example? I use simple renderToString

from used-styles.

Ok, so that's the problem - critical style extracting is working at the Server Side, but "fixture" is working on the client side.

You named two option:

• Prepare multiple style tags by getCriticalStyles split by source with data-used-styles
• Remove this style after load equal CSS file.

And there is 3rd option:

• hosts (aka move) critical styles above the "real one" - that would fix style declaration ordering and let "real styles" override critical.

So what to do

• on the client side, just after DOMReady/StyleDeclaration/WhenYouAreReady - moveStyles. That's all.

from used-styles.

But how to detect when real style loading has been finished? We can have many different files with different weight who has different load time. Do we need to wait for all? Or can we use moveStyles after each load?

from used-styles.

No, you are calling it once to move inlined styles above any "real" one.
You might remove all inlined styles when all real ones would load, but that's not required.

from used-styles.

Oh ok got it. I just misunderstood. Simple tags order resolve this issue. I thought inlined style (in style tag) always has more priority than link tag.
Anyway, sorry for bothering you.

И спасибо за вклад в эту тему. Не так много людей, кто пишет на тему ssr и в частности потокового рендеренга.

from used-styles.