Permalink
Browse files

Added requirejs css and less module loader examples that work with li…

…vestyle
  • Loading branch information...
1 parent 3de6ce4 commit e56af603d9681665e6473586672c5c61794074b7 @Munter Munter committed Nov 21, 2012
Showing with 117 additions and 0 deletions.
  1. +21 −0 README.md
  2. +32 −0 css.js
  3. +63 −0 less.js
  4. +1 −0 livestyle-client.js
View
@@ -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
View
32 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();
+ }
+});
View
63 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;
+});
View
@@ -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) {

0 comments on commit e56af60

Please sign in to comment.