Async loaded CSS stylesheets and embedded CSS

[Andrew Welch]

So I'm using criticalcss to generate critical path CSS for my website, which I embed into web pages as embedded stylesheets. Then I load the full CSS later on via loadCSS(); All is great so far.

However, I'm using Bootstrap; so let's say there is a Bootstrap declaration such as:

.alert { border-radius: 5px; }

...which gets embedded into my webpage because it's used in the above the fold content.

Further down the page, in below the fold content, I have HTML that looks like this:

 <div class="alert my_alert"></div>

...which the CSS style my_alert being:

 .my_alert { border-radius: 15px; }

So the problem here is that the embedded CSS for "alert" is overriding the "my_alert" style that's applied via my async loaded CSS, so border-radius ends up staying set to 5px;

Is there a way to handle this reasonably?

[Andrew Welch]

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!

[Scott Jehl]

In the head of your page, your inline style block should precede the inline script block that contains loadCSS. Can you verify that order in your page?

[Jeff Lembeck]

Closing this issue as it was solved