Search code examples
cssrequirejsjavascriptjs-amd

RequireJS: Loading modules including templates and CSS

After playing around with AMD/RequireJS I was wondering if it is a good idea to load UI modules including templates and CSS so they are completely independent from the web page.

It sounds like good, but I haven't seen this implemented in the wild so there may be pitfalls.

Think of some UI module with the following structure:

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

All stuff in one folder. Looks very nice.

The module in main.js would look something like this:

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

    // Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

Questions are now:

  1. Am I missing something?
  2. Are there any plugins/concepts how to achieve this in a "standard" way?
  3. Is the RequireJS optimizer able to handle the CSS part here, say concat/minify the stylesheets like it does with the JS parts?
  4. Any opinions on that? Good or bad?
Solution

  • You can specify the template as a dependency using the text! module like you have shown. I do this with Mustache Templates.

    However Require.js does not explicitly support css files.

    Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css

    Edit: Feb 2012.

    Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html

    Edit: August 2015

    If you're after this sort of modularization you should look into webpack and specifically css-loader. I'm using it to pair .css files with .jsx files as a unified "module" and extract the relevant CSS into a single stylesheet at build time.