Added requirejs css and less module loader examples that work with livestyle

Author: Munter

README.md

@@ -110,6 +110,27 @@ Currently there are some troubles with updating stylesheets using
 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
 
 
+Module loaders
+==============
+Livestyle supports asynchronous loading and injection of stylesheets.
+If you are using requirejs you might want to take a look at css.js and
+less.js, wich can be used as module loaders for both less and css
+files using requirejs like so:
+
+``` javascript
+define([
+    'less!bootstrap/theme.less',
+    'css!styles/myLoginBox.css'
+], function () {
+    // My module depending on certain styles
+})
+```
+
+These two loaders are both usable without livestyle.
+The less.js loader will change behavior depending on wether you have
+set the `--compiless` flag for livestyle to make live updates possible.
+
+
 CSS preprocessors
 =================
 Since livestyle watches the css files that are actually served to the

css.js

@@ -0,0 +1,32 @@
+define({
+    load: function (name, req, load, config, map) {
+        var url = name,
+            path = url.split('/'),
+            linkElement = document.createElement('link'),
+            headElement = document.getElementsByTagName('head')[0],
+            parentModuleName = map && map.parentMap && map.parentMap.name,
+            parentScriptElement,
+            i,
+            childNode;
+
+        linkElement.setAttribute('href', url);
+        linkElement.setAttribute('rel', 'stylesheet');
+
+        if (parentModuleName) {
+            for (i = 0 ; i < headElement.childNodes.length ; i += 1) {
+                childNode = headElement.childNodes[i];
+                if (childNode.nodeType === 1 && childNode.nodeName.toLowerCase() === 'script' && childNode.getAttribute('data-requiremodule') === parentModuleName) {
+                    parentScriptElement = childNode;
+                    break;
+                }
+            }
+        }
+
+        if (parentScriptElement) {
+            headElement.insertBefore(linkElement, parentScriptElement);
+        } else {
+            headElement.appendChild(linkElement);
+        }
+        load();
+    }
+});

less.js

@@ -0,0 +1,63 @@
+/*global less, console*/
+define([
+    'css'
+], function (css) {
+    var lessLoader = {
+            load: function (name, req, load, config) {
+                var url = name + (name.indexOf('.less') === -1 ? '.less' : ''),
+                    path = url.split('/');
+
+                path.pop();
+                if (path.length !== 0) {
+                    path = '/' + path.join('/') + '/';
+                }
+
+                $.ajax({
+                    url: url,
+                    success: function (data) {
+                        var parser = new less.Parser({
+                                paths: [path]
+                            });
+
+                        parser.parse(data, function (e, tree) {
+                            var style = null,
+                                css = null,
+                                lessLink;
+
+                            if (e) {
+                                console.error(e);
+                            } else {
+                                style = document.createElement('style');
+                                style.type = "text/css";
+                                style.id = 'less:' + url.replace(/\//g, '-').replace('.less', '');
+
+                                css = tree.toCSS();
+
+                                if (style.styleSheet) {
+                                    style.styleSheet.cssText = css;
+                                } else {
+                                    style.innerHTML = css;
+                                }
+                                document.getElementsByTagName('head')[0].appendChild(style);
+
+                                lessLink = document.createElement('link');
+                                lessLink.rel = 'stylesheet/less';
+                                lessLink.type = 'text/css';
+                                lessLink.href = url;
+                                document.getElementsByTagName('head')[0].appendChild(lessLink);
+                                less.sheets.push(lessLink);
+
+                                load(css);
+                            }
+                        });
+                    }
+                });
+            }
+        };
+
+    if (window.liveStyle && window.liveStyle.compiless) {
+        lessLoader = css;
+    }
+
+    return lessLoader;
+});

livestyle-client.js

@@ -3,6 +3,7 @@
     'use strict';
 
     var liveStyleOptions = {}; // The options will be injected by the server
+    window.liveStyle = liveStyleOptions; // Make it detectable on the client that livestyle is in use
 
     function log(msg) {
         if (liveStyleOptions.debug && window.console) {