CSS load order incorrect using default_head_blocks.xml

[chicgeek]

For my theme I am loading in two stylesheets: one from a CDN (cdn.css) and one from my theme (local.css). They should be loaded in this order in the DOM but it does not preserve the order indicated by the XML.

This is what I have in default_head_blocks.xml in the correct order:

<css src="https://example.com/cdn.css" src_type="url" />
<css src="css/local.css" />

But in the DOM it does not load in this order: local.css is loaded in first and cdn.css second.

I believe this to be a bug - am I missing additional configuration to set load order for these assets?

I did not find information specific to load order in the documentation. I know in M1 the order specified in the XML would be preserved in the DOM.

[slavvka]

Thank you. This issue has been reported as MAGETWO-42659 internal issue.

[maksek]

Hi @chicgeek, did you find answer or workaround on the issue you reported?

[chicgeek]

Hey @maksek,

Yes, definitely a 'workaround'.

If you add an attribute to the internal CSS, it will force it to parse this command after other CSS links. This attribute doesn't itself do anything. I named the attribute as follows, but it could be anything:

<css src="https://example.com/cdn.css" src_type="url" />
<css src="css/local.css" load_last="true" />

[jahvi]

Is this still an issue? I'm wondering how I can make sure some external fonts get loaded before the regular style-m.css and style-l.css files.

[chicgeek]

@jahvi Did you see the workaround I posted just above your comment? Have you tried this, or do all CSS instructions get loaded before your fonts?

Alternately, the font-display attribute for @font-face may be of interest to you:

• https://developers.google.com/web/updates/2016/02/font-display?hl=en
• https://tabatkins.github.io/specs/css-font-display/

[jahvi]

@chicgeek It does work for 'new' stylesheets but if they've been registered in the parent theme like style-m.css it doesn't seem to do anything. font-display is a good alternative but still being able to control the order would be ideal.

This extension seems to work but I haven't tested it throughly:
https://github.com/quickshiftin/mage2-ordered-assets

[jahvi]

It looks like Magento separates the assets into 'groups' before rendering them into the page like, css, scripts, link, etc. You can order the assets within each group using @chicgeek's technique or the extension mentioned above but it doesn't seem like it's possible to load one group before another so if you want to load some google fonts before everything else you'll need to rewrite this functionality.

In my case I ended up copying the @font-face declarations from the google fonts spreadsheet to load it locally instead of using google's CDN. Then copied the styles-m.less stylesheet into my theme and added a @import 'source/_google-fonts.less'; statement before everything else.

[tlygnersjo]

I've got the same problem, while trying to load Google Fonts (via CDN) before a custom CSS file which has the font-family. But Magento does the reverse so that the font won't work.

I'm using Magento 2.1.2. Is there an upcoming fix for this?

[JanisE]

Waiting for this to get sorted out.

[SerhiyDmytruk]

#distributed-cd

[magento-engcom-team]

@SergeyDmitruk thank you for joining. Please accept team invitation here and self-assign the issue.

[magento-engcom-team]

Hi @chicgeek. Thank you for your report.
The issue has been fixed in #14290 by @SergeyDmitruk in 2.2-develop branch
Related commit(s):

• 71a6cb8c560ad24522d6c5caa39320248cb0123f

The fix will be available with the upcoming 2.2.5 release.

[ishakhsuvarov]

Hi @chicgeek. Thank you for your report.
The issue has been fixed in #17829 by @nmalevanec in 2.3-develop branch
Related commit(s):

• d3e24edf30644a892861481dfc722b570f6e070d
• fe6c96f53a2d14b2671ccfd784598e534a995870

The fix will be available with the upcoming 2.3.0 release.

[BenSpace48]

@ishakhsuvarov - Can you confirm if this also affects other filetypes or only CSS?

[jahvi]

@BenSpace48 Looking at the committed changes it looks like all the nodes are ordered and then outputted so it should affect all types.

[rssawhney]

@magento-engcom-team it is not working for <script> tags in default.xml

[Eddcapone]

Does not work. How can I load bootstrap first?

[chicgeek]

@Eddcapone Did you try the workaround? (Note: I've not tried this recently.)

[Eddcapone]

@Eddcapone Did you try the workaround? (Note: I've not tried this recently.)

The workaround shows how to load a script last, but I need my bootstrap script loaded before style-m.css and style-l.css. Otherwise it will override some stuff, e.g. it changes the color of a tag to blue.

[hafiz-rusli]

@Eddcapone Did you try the workaround? (Note: I've not tried this recently.)

The workaround shows how to load a script last, but I need my bootstrap script loaded before style-m.css and style-l.css. Otherwise it will override some stuff, e.g. it changes the color of a tag to blue.

is not working as expected. please fix it

[zigojacko]

This is not fixed.

And I'm developing a site on Magento 2.3.4.

Hey @maksek,

Yes, definitely a 'workaround'.

If you add an attribute to the internal CSS, it will force it to parse this command after other CSS links. This attribute doesn't itself do anything. I named the attribute as follows, but it could be anything:

<css src="https://example.com/cdn.css" src_type="url" />
<css src="css/local.css" load_last="true" />

I can confirm that this workaround does fix the issue however, thanks @chicgeek 👍

[Eddcapone]

Still not fixed in magento 2.3.5 ? Please reopen the issue.