Include inline theming parameters

A new `option` has been added to specify a library name.
In case it is set a rule will be added to the bottom of the CSS
containing the `variables` as data-uri.
This allows UI5 to evaluate this content and use the JSON without
having to load a separate file via XHR.

README.md

@@ -118,6 +118,13 @@ Type `object`
 
 Options for the [less](http://lesscss.org) compiler (`tree.toCss`).
 
+##### library.name
+
+Type `string`
+
+Dot-separated name of the corresponding library.  
+It will be used to inline the `variables` JSON as data-uri which can be retrieved at runtime.
+
 #### callback(error, result)
 
 *Required*  

lib/index.js

@@ -42,7 +42,8 @@ module.exports.build = function(input, options, callback) {
 		rtl: true,
 		rootPaths: [],
 		parser: {},
-		compiler: {}
+		compiler: {},
+		library: {}
 	}, options);
 
 	var result = {
@@ -113,6 +114,29 @@ module.exports.build = function(input, options, callback) {
 					}));
 				}
 
+				if (typeof options.library === "object" && typeof options.library.name === "string") {
+					var parameters = JSON.stringify(result.variables);
+
+					// escape all chars that could cause problems with css parsers using URI-Encoding (% + HEX-Code)
+					var escapedChars = "%{}()'\"\\";
+					for (var i = 0; i < escapedChars.length; i++) {
+						var char = escapedChars.charAt(i);
+						var hex = char.charCodeAt(0).toString(16).toUpperCase();
+						parameters = parameters.replace(new RegExp("\\" + char, "g"), "%" + hex);
+					}
+
+					var parameterStyleRule =
+						"\n/* Inline theming parameters */\n#sap-ui-theme-" +
+						options.library.name.replace(/\./g, "\\.") +
+						" { background-image: url('data:text/plain;utf-8," + parameters + "'); }\n";
+
+					// embed parameter variables as plain-text string into css
+					result.css += parameterStyleRule;
+					if (result.cssRtl) {
+						result.cssRtl += parameterStyleRule;
+					}
+				}
+
 			} catch (ex) {
 				err = ex;
 			}

test/expected/simple/test-inline-parameters.css

@@ -0,0 +1,7 @@
+.myRule {
+  float: left;
+  color: #ff0000;
+}
+
+/* Inline theming parameters */
+#sap-ui-theme-foo\.bar { background-image: url('data:text/plain;utf-8,%7B%22myColor%22:%22#ff0000%22%7D'); }

test/test.js

@@ -251,3 +251,45 @@ describe('imports', function() {
   });
 
 });
+
+describe('inline theming parameters', function() {
+
+  it('should not include inline parameters when no library name is given', function(done) {
+
+    lessOpenUI5.build(readFile('test/fixtures/simple/test.less'), function(err, result) {
+
+      assert.ifError(err);
+
+      assert.ok(!/#sap-ui-theme-/.test(result.css), 'inline parameter rule should not be present.');
+      assert.ok(!/data:text\/plain/.test(result.css), 'data-uri should not be present.');
+
+      assert.equal(result.css, readFile('test/expected/simple/test.css'), 'css should be correctly generated.');
+
+      done();
+
+    });
+
+  });
+
+  it('should include inline parameters when library name is given', function(done) {
+
+    lessOpenUI5.build(readFile('test/fixtures/simple/test.less'), {
+      library: {
+        name: 'foo.bar'
+      }
+    }, function(err, result) {
+
+      assert.ifError(err);
+
+      assert.ok(/#sap-ui-theme-foo\\.bar/.test(result.css), 'inline parameter rule for library should be present.');
+      assert.ok(/data:text\/plain/.test(result.css), 'data-uri should be present.');
+
+      assert.equal(result.css, readFile('test/expected/simple/test-inline-parameters.css'), 'css should be correctly generated.');
+
+      done();
+
+    });
+
+  });
+
+});