Option to render CSS into component

cless-builder.js

@@ -0,0 +1,20 @@
+define(function(require) {
+  var less = require('less-builder');
+  var lessAPI = {};
+
+  for (var key in less) {
+    if (!less.hasOwnProperty(key)) return;
+    lessAPI[key] = less[key];
+  }
+
+  lessAPI.load = function(lessId, req, load, config) {
+    if (!config) config = {};
+    if (!config.less) config.less = {};
+    var savedState = config.less.component;
+    if (!savedState) config.less.component = true;
+    less.load.call(this, lessId, req, load, config);
+    if (config.less.component !== savedState) config.less.component = savedState;
+  };
+
+  return lessAPI;
+});

cless.js

@@ -0,0 +1,23 @@
+define(function(require) {
+  var less = require('less');
+
+  var lessAPI = {
+    pluginBuilder: './cless-builder'
+  };
+
+  if (typeof window === 'undefined') {
+    lessAPI.load = function(n, r, load) { load(); };
+    return lessAPI;
+  }
+
+  lessAPI.load = function(lessId, req, load, config) {
+    if (!config) config = {};
+    if (!config.less) config.less = {};
+    var savedState = config.less.component;
+    if (!savedState) config.less.component = true;
+    less.load.call(this, lessId, req, load, config);
+    if (config.less.component !== savedState) config.less.component = savedState;
+  };
+
+  return lessAPI;
+});

less-builder.js

@@ -71,6 +71,7 @@ define(['require', './normalize'], function(req, normalize) {
   }
 
   var config;
+  var isComponent;
   var siteRoot;
 
   var less = require.nodeRequire('less');
@@ -90,6 +91,7 @@ define(['require', './normalize'], function(req, normalize) {
   lessAPI.load = function(name, req, load, _config) {
     //store config
     config = config || _config;
+    isComponent = config.less.component;
 
     if (!siteRoot) {
       siteRoot = path.resolve(
@@ -153,7 +155,8 @@ define(['require', './normalize'], function(req, normalize) {
     if (moduleName.match(absUrlRegEx))
       return;
 
-    layerBuffer.push(lessBuffer[moduleName]);
+    var css = lessBuffer[moduleName];
+    layerBuffer.push(css);
 
     //use global variable to combine plugin results with results of require-css plugin
     if (!global._requirejsCssData) {
@@ -165,10 +168,12 @@ define(['require', './normalize'], function(req, normalize) {
       global._requirejsCssData.usedBy.less = true;
     }
 
-    write.asModule(pluginName + '!' + moduleName, 'define(function(){})');
+    var moduleContent = isComponent ? "return '" + escape(compress(css)) + "'" : '';
+    write.asModule(pluginName + '!' + moduleName, 'define(function(){' + moduleContent + '});');
   };
 
   lessAPI.onLayerEnd = function(write, data) {
+    if (isComponent === true) return;
 
     //calculate layer css
     var css = layerBuffer.join('');

less.js

@@ -1,65 +1,72 @@
-define(['require'], function(require) {
-
-  var lessAPI = {};
-
-  lessAPI.pluginBuilder = './less-builder';
-
+define(function(require) {
+  var lessAPI = {
+    pluginBuilder: './less-builder'
+  };
+
   if (typeof window == 'undefined') {
     lessAPI.load = function(n, r, load) { load(); };
     return lessAPI;
   }
-  
+
   lessAPI.normalize = function(name, normalize) {
-    if (name.substr(name.length - 5, 5) == '.less')
+    if (name.substr(name.length - 5, 5) === '.less') {
       name = name.substr(0, name.length - 5);
+    }
 
-    name = normalize(name);
-
-    return name;
+    return normalize(name);
   };
-
-  var head = document.getElementsByTagName('head')[0];
 
+  var head = document.getElementsByTagName('head')[0];
   var base = document.getElementsByTagName('base');
+
   base = base && base[0] && base[0] && base[0].href;
+
   var pagePath = (base || window.location.href.split('#')[0].split('?')[0]).split('/');
+
   pagePath[pagePath.length - 1] = '';
   pagePath = pagePath.join('/');
 
   var styleCnt = 0;
   var curStyle;
+
   lessAPI.inject = function(css) {
     if (styleCnt < 31) {
       curStyle = document.createElement('style');
       curStyle.type = 'text/css';
       head.appendChild(curStyle);
-      styleCnt++;
+      styleCnt += 1;
     }
-    if (curStyle.styleSheet)
+
+    if (curStyle.styleSheet) {
       curStyle.styleSheet.cssText += css;
-    else
+    } else {
       curStyle.appendChild(document.createTextNode(css));
+    }
   };
 
   lessAPI.load = function(lessId, req, load, config) {
     window.less = config.less || {};
     window.less.env = 'development';
 
-    require(['./lessc', './normalize'], function(lessc, normalize) {
+    var isComponent = config.less.component;
 
+    require(['./lessc', './normalize'], function(lessc, normalize) {
       var fileUrl = req.toUrl(lessId + '.less');
       fileUrl = normalize.absoluteURI(fileUrl, pagePath);
 
       //make it compatible with v1 and v2
       var generation = (lessc.version || [1])[0];
       var renderer;
       var cssGetter;
+
       if (generation === 1) {
         //v1, use parser and toCSS
         var parser = new lessc.Parser(window.less);
+
         renderer = function (input, cb) {
           parser.parse.call(parser, input, cb, window.less);
         };
+
         cssGetter = function (tree) {
           return tree.toCSS(config.less);
         };
@@ -68,6 +75,7 @@ define(['require'], function(require) {
         renderer = function (input, cb) {
           lessc.render(input, window.less, cb);
         };
+
         cssGetter = function (output) {
           return output.css;
         };
@@ -78,14 +86,19 @@ define(['require'], function(require) {
           console.log(err + ' at ' + fileUrl + ', line ' + err.line);
           return load.error(err);
         }
+
         var css = cssGetter(output);
-        lessAPI.inject(normalize(css, fileUrl, pagePath));
 
-        setTimeout(load, 7);
-      }, window.less);
+        if (isComponent !== true) {
+          lessAPI.inject(normalize(css, fileUrl, pagePath));
+          setTimeout(load, 7);
+        } else {
+          load(css);
+        }
 
+      }, window.less);
     });
   };
-  
+
   return lessAPI;
 });