Order of CSS files. Load module's CSS before theme's CSS

Question

How can I change the order of CSS files to load module's CSS before theme's CSS? Here are some code examples:

Theme's CSS file (loaded on all pages) added in theme's local.xml:

<default>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
    </reference>
</default>

Extension's CSS file (loaded only on category pages) added in module's XML layout file:

<catalog_category_layered>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/extension.css</name>
        </action>
    </reference>
</catalog_category_layered>

This is the order of loaded CSS files which I get on the category page, extension's CSS is loaded after theme's CSS:

• /default/mytheme/css/styles.css
• /default/mytheme/css/theme.css
• /default/mytheme/css/extension.css

What I'm trying to achieve: extension's CSS is loaded before theme's CSS.
How can I force this order of CSS files:

• /default/mytheme/css/styles.css
• /default/mytheme/css/extension.css
• /default/mytheme/css/theme.css

I've noticed that if I have many extensions installed, CSS of some extensions loads before theme's CSS and CSS of some other extensions loads after theme's CSS. I assume that it has something to do with the order of modules in Magento, but I don't understand how I can affect the order of CSS (or JavaScript) files on the frontend.

Answer 1

There's two things here that I'll elaborate on first: 1) the order in which layout XML files are loaded and 2) the order which layout handles are processed.

1 - Layout xml files are loaded in the order which the extensions are loaded. Extensions are loaded alphabetically (as the server reads the files in app/etc/extensions), however when there is module dependencies, the module which is depended on by another module, will be loaded first. Magento actually loops through all these XML files twice in order to achieve this. First time to read all the extensions, and second time to load them by order of dependencies/then all the remaining get loaded in alphabetical order. local.xml however is a special case, and always is loaded last so that its instructions take priority over any extension's layout instructions.

Now I know what you're thinking at this point "if local.xml is loaded last, why is the extension's CSS file being loaded afterwards?" Well that's due to the following...

2 - The order in which layout handles are processed. This is what's getting you in this particular case. Despite the fact that local.xml is loaded after your extension's layout file, it is because the extension is targeting the 'catalog_category_layered' layout handle. This layout handle, gets processed after the layout handle 'default'. It is because of this, that you're getting stuck with extension's the CSS file being loaded after your theme's CSS file.

So what's the solution? Quite simple, although somewhat annoying. In your local.xml file, you just need to target this layout handle and first remove your theme's CSS file, then add it back in again.

This should do the trick for you:

<catalog_category_layered>
    <reference name="head">
        <action method="removeItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
    </reference>
</catalog_category_layered>

Your site will process these instructions after the extension's instructions, within this layout handle. Therefore, your CSS file will be loaded afterwards as well.