[INTERNAL] Implement inlineCssVariables option

Author: matz3

lib/index.js

@@ -281,40 +281,56 @@ Builder.prototype.build = function(options) {
 		}
 
 		// also compile css-variables version if requested
-		if (options.cssVariables) {
+		if (options.cssVariables || options.inlineCssVariables) {
 			// parse the content again to have a clean tree
 			const cssVariablesSkeletonTree = await parseContent(config.content);
 
 			// generate the skeleton-css and the less-variables
 			const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
 			const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
-			result.cssSkeleton = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
+
+			const cssSkeleton = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
 				plugins: [oCSSVariablesCollector]
 			}));
-			result.cssVariablesSource = oCSSVariablesCollector.toLessVariables();
+			const cssVariablesSource = oCSSVariablesCollector.toLessVariables();
+
+			let cssSkeletonRtl;
 			if (oRTL) {
 				const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
-				result.cssSkeletonRtl = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
+				cssSkeletonRtl = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
 					plugins: [oCSSVariablesCollectorRTL, oRTL]
 				}));
 			}
 
 			// generate the css-variables content out of the less-variables
-			const cssVariablesTree = await parseContent(result.cssVariablesSource);
+			const cssVariablesTree = await parseContent(cssVariablesSource);
 			const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
-			result.cssVariables = cssVariablesTree.toCSS(Object.assign({}, options.compiler, {
+			const cssVariables = cssVariablesTree.toCSS(Object.assign({}, options.compiler, {
 				plugins: [new CSSVariablesPointerPlugin()]
 			}));
+
+			result.cssVariables = cssVariables;
+
+			// Only add additional CSS Variables content if requested
+			if (options.cssVariables) {
+				result.cssSkeleton = cssSkeleton;
+				if (oRTL) {
+					result.cssSkeletonRtl = cssSkeletonRtl;
+				}
+				result.cssVariablesSource = cssVariablesSource;
+			}
 		}
 
 		return result;
 	}
 
 	async function addInlineParameters(result) {
-		if (
-			options.inlineThemingParameters === true &&
-			typeof options.library === "object" && typeof options.library.name === "string"
-		) {
+		// Inline parameters can only be added when the library name is known
+		if (typeof options.library !== "object" || typeof options.library.name !== "string") {
+			return result;
+		}
+
+		if (options.inlineThemingParameters === true) {
 			const parameters = JSON.stringify(result.variables);
 
 			// properly escape the parameters to be part of a data-uri
@@ -339,8 +355,11 @@ Builder.prototype.build = function(options) {
 			}
 		}
 
-		if (options.inlineCssVariables) {
-			// TODO
+		if (options.inlineCssVariables === true) {
+			result.css = result.cssVariables + result.css;
+			if (options.rtl) {
+				result.cssRtl = result.cssVariables + result.cssRtl;
+			}
 		}
 
 		return result;