CSS module loads out of order

[solmsted]

I recently updated one of my applications in development to YUI 3.15.0 from 3.14.1 and suddenly my CSS is loading out of order.

I've created an example in JS bin: http://jsbin.com/hafibawa/1/edit?html,js,output

This example loads a custom module that requires datatable and a custom css module. Since datatable is first in the requires array, I would expect all of datatable's skin css to load before the custom css module.

After running the code, I can inspect the dom and see that the link element for the custom css module is before the link elements for the datatable skin css.

Here is an example of the same thing using YUI 3.14.1: http://jsbin.com/hafibawa/2/edit?html,js,output

Here the CSS is loaded in the correct order.

[ezequiel]

Thanks.

The problem here is: custom css modules should load after any YUI related css files. This is a feature that was done purposely, it seems. That's why I missed it in the modifications I've made.

[solmsted]

Interesting, I always thought the order of the modules listed in Y.use or a requires array was significant. I see you're right though. In my JS bin example, with YUI 3.14.1 if I reverse the order of the requires array, the custom CSS module still loads after the datatable skin. If I use another CSS module like app-transitions-css instead of the custom module, the order of the requires array is preserved.

[caridy]

@solmsted just for the record, the order of the use statement is not relevant, only the explicit dependencies are. In this case, if your CSS should load after the YUI CSS, you should explicitely call that out in the dependencies for your css modules.

We happen to have that sort of a hack to put the core css modules first if not explicit dependencies are in place.

[ezequiel]

@solmsted,

This has been "fixed" in #1743.

However, Loader is now a bit stricter with the order in which it'll load your CSS modules. As of 3.16.0, CSS modules will not load after all YUI related CSS by default. You must specify the order you really want.

So, your example would have to change to:

YUI({
    combine: false,
    groups: {
        'my-group': {
            modules: {
                'my-custom-css': {
                    fullpath: '/path/to/css',
                    type: 'css',
                    // we want this module to load after everything datatable
                    requires: [
                        'datatable'
                    ]
                },
                'my-custom-module': {
                    fullpath: '/path/to/module',
                    requires: [
                        'my-custom-css'
                    ]
                }
            }
        }
    }
}).use('my-custom-module', function () {});

[solmsted]

@ezequiel Thank you very much. It was a good choice to remove the logic that loads CSS modules first regardless of the order defined in the config.

I just tried my jsbin example with YUI 3.16.0-rc-1. It works as expected without having to make the changes you've suggested. It already specifies the order I really want in the requires array of my-custom-module. I hope that this isn't just a coincidence and that the ordering of requires arrays are still significant; I rely on the order of these arrays for many of my modules, not just CSS.

@caridy pointed out that the order of arguments passed to YUI's use method is not significant. Knowing that now I can work around it but I feel like it would be a nice enhancement for use to handle its arguments in order.

[caridy]

@solmsted that will be ambiguous, there are many other rules that are equivalent to use() (e.g.: aliases, requires, etc), where today we don't have explicit rules to distinguish them, which means the order will have to be part of the calculate routine. It is not going to happen, sorry.