Async loaded CSS stylesheets and embedded CSS about critical HOT 8 CLOSED

I'm doing the inlining myself, because I'm using a CMS system, so it actually was inlined... but I figured out my mistake.

loadCSS() was inserting itself before the last <script> element in the HTML header... which was before the inlined critical CSS. d'oh!

from critical.

Can you elaborate on your solution to this? It looks like your sentence was cut off.

I'm encountering the exact same issue. The inlined css of above-the-fold styles is impacting the classes that override those styles in the below-the-fold content.

Looking into it a bit more, it seems like the inline-critical package's loadCSS function inserts the <link> tag before the first script tag it finds.

from critical.

Take a Look here bezoerb/grunt-critical#5

from critical.

Hey @bezoerb , thanks for the link. My fix was the same.

from critical.

Yeah so basically, it was working as expected. But I was using loadCSS() to async load the full CSS later on. The problem is that by default loadCSS() puts the style sheet in front of the first script tag it encounters in the head

So because of where the first script tag was in my html head tags, it was loading the full CSS before the inline CSS from grunt-critical... so the full CSS would never override the inline critical CSS.

Moving the tags around fixed the loading order, and thus fixed the issue.

from critical.

I have the same issue, but cannot reorder script tags, i.e. having cloudflare or browser extensions that push them at the top. loadCSS() has a useful argument that allows to point an element and inserts all stylesheets before it. So the questions are:

1. Can I pass the argument?
   or
2. Can I inline css in HTML, but withous using 'yours' loadCSS() and instead use 'mine' with the argument, stylesheets passed

from critical.

@bezoerb anything?

from critical.

@biokillos sorry for the late response. I've just released a new inline-critical version which enables you to either pass in an selector for the before element or just skip loadCSS by ignoring all link tags. link tags inside of noscript will be ignored by default so in case you're using loadCSS already and there are no link tags left it should just be fine. The options won't be passed through critical yet so you'll have to generate the critical css first and inline it via inline-critical in the next step.
Hope this helps

from critical.