explanation requested

[ORESoftware]

In order to help me understand this module - sometimes it helps to compare it with something existing that I understand -

Burke, the author of RequireJS, has a text plugin here:

https://github.com/requirejs/text

so why is using the library better than using the text plugin. The way I use the text plugin and the r.js optimizer is as follows:

create a file like this using a gulp task:

define('#allCSS',
    [

                "text!cssx/alert-bangtidy.css",
        "text!cssx/alert-blackgloss.css",
        "text!cssx/bootstrap/bootstrap-notify.css",
        "text!cssx/bootstrap/bootstrap-theme.css",
        "text!cssx/bootstrap/bootstrap-theme.css.map",
        "text!cssx/bootstrap/bootstrap-theme.min.css",
        "text!cssx/bootstrap/bootstrap.css",
        "text!cssx/bootstrap/bootstrap.css.map",
        "text!cssx/bootstrap/bootstrap.min.css",
        "text!cssx/main.css",
        "text!cssx/pictureList/pictureList.css",
        "text!cssx/portal/simple-sidebar.css",
        "text!cssx/style.css",
        "text!cssx/userProfileView/user-profile.css"
    ],
    function(){

        return {

                        "text!cssx/alert-bangtidy.css": arguments[0],
            "text!cssx/alert-blackgloss.css": arguments[1],
            "text!cssx/bootstrap/bootstrap-notify.css": arguments[2],
            "text!cssx/bootstrap/bootstrap-theme.css": arguments[3],
            "text!cssx/bootstrap/bootstrap-theme.css.map": arguments[4],
            "text!cssx/bootstrap/bootstrap-theme.min.css": arguments[5],
            "text!cssx/bootstrap/bootstrap.css": arguments[6],
            "text!cssx/bootstrap/bootstrap.css.map": arguments[7],
            "text!cssx/bootstrap/bootstrap.min.css": arguments[8],
            "text!cssx/main.css": arguments[9],
            "text!cssx/pictureList/pictureList.css": arguments[10],
            "text!cssx/portal/simple-sidebar.css": arguments[11],
            "text!cssx/style.css": arguments[12],
            "text!cssx/userProfileView/user-profile.css": arguments[13]
        }
});

and running the r.js optimizer as normal, making sure I require the above file so that the r.js can trace it as a dependency and include it in the optimized build.

It appears that this library is doing some really complex stuff, avoiding 'link' somehow, and getting .css files all in one script tag or something? I am so confused.

The way I figured how to do my methodology was that I devised something that I think is really useful for template files (.ejs, .hbs, etc). And then I realized that Burke's text module could also be used with .css files.

In case you didn't catch it the first time, let me explain how I include CSS in the optimized build, in terms of steps

(1) recurse through a directory that has .css files and then create the .js file above that has all the dependencies (I do this using gulp task that I wrote).
(2) require that .js file in the main requirejs config file or wherever, just as long as the r.js optimizer can trace dependencies and include the .js file in the build
(3) requirejs will then concatenate the .css files with the .js files in one big optimized file, along with templates too.
(4) in my production build I just have the one optimized file and in my program in order to add CSS dynamically, I do this:

allCSS["text!cssx/alert-bangtidy.css"] and that gives me the text for the .css file

I then put the css into the document like so:

  function add(text) {

            var sheet = document.createElement('style');
            sheet.innerHTML = text;
            document.body.appendChild(sheet);
        }

furthermore, only having one output file makes it easier to gzip everything