Require CSS in the path

[DataTables]

Hi,

I'm wondering if it is possible to specify that a CSS file should be loaded using the paths require.config.paths object? The reason for doing this would be to have a single dependency name that can load both CSS and JS components of a library with a single statement.

For example - my DataTables library, when styled by Bootstrap needs:

1. DataTables core JS
2. DataTables Bootstrap integration JS
3. DataTables Bootstrap integration CSS

Something like the following would be awesome (note that datatables.net-bs's Javascript will require('datatables.net') to include the core library):

require( ['jquery', 'bootstrap', 'datatables.net-bs'], function ($, bs, dt) {
    $('#myTable').DataTable();
} );

The way I thought I might be able to set this up was something like:

require.config( {
    deps: [ 'require-css' ],
    paths: {
        'require-css': '//cdnjs.cloudflare.com/ajax/libs/require-css/0.1.8/css.min',
        'bootstrap': '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min',
        'jquery': '//code.jquery.com/jquery-2.1.4.min',
        'datatables.net': '//nightly.datatables.net/js/jquery.dataTables.min',
        'datatables.net-bs': [
            'require-css!//nightly.datatables.net/css/dataTables.bootstrap.min',
            '//nightly.datatables.net/js/dataTables.bootstrap.min',
        ]
    }
} );

But the require-css! will only work in the module names it would seem.

When I try the above, requirejs just requests a file from the url http://.../require-css!//nightly.datatables.net/css/dataTables.bootstrap.min.js - so there is no parsing being done there.

I should note that I know I could create a new module to that would itself add the two individual file dependencies - but that could end up being really verbose and confusing since the AMD loader in the DataTables files will do a require(...) of their dependencies such as datatables.net for DataTables core (and even more so when considering the plug-ins for DataTables).

[ffflabs]

I would start by trying with local copies, for example using bower to forget about manually updating the dependencies. Since there isn't a way to know for sure when a CSS stylesheet is done loading, you're asking too much.

Second, you might want to look at normalize.js to see how the plugin deals with protocol relative urls and fallback paths.

Third, the deps property shouldn't be parallel to paths. At least the way I config my apps, deps is a property of each module under the shims config.

[DataTables]

Thanks for the reply.

Since there isn't a way to know for sure when a CSS stylesheet is done loading

My understanding of what this plug-in for requirejs does is exactly that - from the readme: "Allows the construction of scripts that can require CSS"

Second, you might want to look at normalize.js to see how the plugin deals with protocol relative urls and fallback paths.

Thank you I will. I'm not sure how that will help with using require-css! in the paths, but it might point to how a plug-in can be used to operate on the path.

Third, the deps property shouldn't be parallel to paths

The requirejs docs state that the config.deps option can be used to require a module immediately, which is what I used it for above. It could equally be in the require line, but I just put it in the deps config for simplicity.

[ffflabs]

This one worked for me

requirejs.config({

    paths: {
        "require-css": "//cdnjs.cloudflare.com/ajax/libs/require-css/0.1.8/css.min",
        "jquery": "//code.jquery.com/jquery-2.1.4.min",
        "bootstrap": "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min",
        "datatables.net": "//nightly.datatables.net/js/jquery.dataTables.min",
        "datatables.net-bs-js": "//nightly.datatables.net/js/dataTables.bootstrap.min",
        "datatables.net-bs-style": "//nightly.datatables.net/css/dataTables.bootstrap.min"
    }
});

define([
    "jquery",
    "datatables.net",
    "datatables.net-bs-js",
    "require-css!bootstrap",
    "require-css!datatables.net-bs-style"

], function (jQuery) {

    jQuery(document).ready(function () {
        jQuery('#myTable').DataTable();
    });

});

[DataTables]

Absolutely that works - but my question is - can it be shortened and made less verbose? I want datatables.net-bs to include the DataTables Bootstrap integration for the CSS and the JS with a since call, since one without the other is more or less redundant.

As I noted in my original post, this is absolutely possible already, but I'm looking to see if @guybedford knows if there is a cleaner approach.