[FEATURE] Theme Build: Add compress option to minify output

lib/processors/themeBuilder.js

@@ -28,9 +28,11 @@ class ThemeBuilder {
 	 *
 	 * @public
 	 * @param {module:@ui5/fs.Resource[]} resources Library files
+	 * @param {Object} [options] Build options
+	 * @param {boolean} [options.compress=false] Compress build output (CSS / JSON)
 	 * @returns {Promise<module:@ui5/fs.Resource[]>} Resolving with array of created files
 	 */
-	build(resources) {
+	build(resources, {compress = false} = {}) {
 		const files = [];
 
 		const compile = (resource) => {
@@ -46,6 +48,9 @@ class ThemeBuilder {
 				lessInputPath: resource.getPath(),
 				library: {
 					name: libraryName
+				},
+				compiler: {
+					compress
 				}
 			}).then((result) => {
 				const themeDir = path.dirname(resource.getPath());
@@ -62,7 +67,7 @@ class ThemeBuilder {
 
 				const libParams = new Resource({
 					path: themeDir + "/library-parameters.json",
-					string: JSON.stringify(result.variables, null, "\t")
+					string: JSON.stringify(result.variables, null, compress ? null : "\t")
 				});
 
 				files.push(libCss, libCssRtl, libParams);
@@ -93,11 +98,14 @@ class ThemeBuilder {
  * @param {Object} parameters Parameters
  * @param {module:@ui5/fs.Resource[]} parameters.resources List of <code>library.source.less</code> resources to be processed
  * @param {fs|module:@ui5/fs.fsInterface} parameters.fs Node fs or custom [fs interface]{@link module:resources/module:@ui5/fs.fsInterface}
+ * @param {Object} [parameters.options] Options
+ * @param {Object} [parameters.options.compress=false] Compress build output (CSS / JSON)
  * @returns {Promise<module:@ui5/fs.Resource[]>} Promise resolving with theme resources
  */
-module.exports = ({resources, fs}) => {
+module.exports = ({resources, fs, options}) => {
 	const themeBuilder = new ThemeBuilder({fs});
-	return themeBuilder.build(resources).then((files) => {
+	const compress = options && options.compress;
+	return themeBuilder.build(resources, {compress}).then((files) => {
 		themeBuilder.clearCache();
 		return files;
 	});

lib/tasks/buildThemes.js

@@ -53,7 +53,10 @@ module.exports = function({workspace, dependencies, options}) {
 	}).then((resources) => {
 		return themeBuilder({
 			resources,
-			fs: fsInterface(combo)
+			fs: fsInterface(combo),
+			options: {
+				compress: true
+			}
 		});
 	}).then((processedResources) => {
 		return Promise.all(processedResources.map((resource) => {

test/expected/build/theme.j/dest/resources/theme/j/themes/somefancytheme/Button.less

@@ -1 +1,3 @@
-.someClass{color:black}
+.someClass {
+	color: @someColor
+}

test/expected/build/theme.j/dest/resources/theme/j/themes/somefancytheme/library-RTL.css

@@ -1,6 +1,3 @@
-.someClass {
-  color: #000000;
-}
-
+.someClass{color:#000}
 /* Inline theming parameters */
-#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%7D')}
+#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%22someColor%22%3A%22%23000%22%7D')}

test/expected/build/theme.j/dest/resources/theme/j/themes/somefancytheme/library-parameters.json

@@ -1 +1 @@
-{}
+{"someColor":"#000"}

test/expected/build/theme.j/dest/resources/theme/j/themes/somefancytheme/library.css

@@ -1,6 +1,3 @@
-.someClass {
-  color: #000000;
-}
-
+.someClass{color:#000}
 /* Inline theming parameters */
-#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%7D')}
+#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%22someColor%22%3A%22%23000%22%7D')}

test/expected/build/theme.j/dest/resources/theme/j/themes/somefancytheme/library.source.less

@@ -1 +1,2 @@
+@someColor: black;
 @import "Button.less";

test/fixtures/theme.j/main/src/theme/j/themes/somefancytheme/Button.less

@@ -1 +1,3 @@
-.someClass{color:black}
+.someClass {
+	color: @someColor
+}

test/fixtures/theme.j/main/src/theme/j/themes/somefancytheme/library.source.less

@@ -1 +1,2 @@
+@someColor: black;
 @import "Button.less";

test/lib/tasks/buildThemes.js

@@ -25,27 +25,17 @@ test("integration: simple", (t) => {
   padding: 1px 2px 3px 4px;
 }`;
 	const cssExpected =
-`.fluffyHammer {
-  color: #123456;
-  padding: 1px 2px 3px 4px;
-}
-
+`.fluffyHammer{color:#123456;padding:1px 2px 3px 4px}
 /* Inline theming parameters */
 #sap-ui-theme-super\\.duper\\.looper{background-image:url('data:text/plain;utf-8,%7B%22deepSea%22%3A%22%23123456%22%7D')}
 `;
 	const cssRtlExpected =
-`.fluffyHammer {
-  color: #123456;
-  padding: 1px 4px 3px 2px;
-}
-
+`.fluffyHammer{color:#123456;padding:1px 4px 3px 2px}
 /* Inline theming parameters */
 #sap-ui-theme-super\\.duper\\.looper{background-image:url('data:text/plain;utf-8,%7B%22deepSea%22%3A%22%23123456%22%7D')}
 `;
 	const parametersExpected =
-`{
-	"deepSea": "#123456"
-}`;
+`{"deepSea":"#123456"}`;
 	const lessPath = "/resources/super/duper/looper/themes/brightlight/library.source.less";
 	const cssPath = "/resources/super/duper/looper/themes/brightlight/library.css";
 	const cssRtlPath = "/resources/super/duper/looper/themes/brightlight/library-RTL.css";
@@ -106,27 +96,17 @@ test("integration: imports", (t) => {
 	const lessVariablesContent =
 "@deepSea: #123456;";
 	const cssExpected =
-`.fluffyHammer {
-  color: #123456;
-  padding: 1px 2px 3px 4px;
-}
-
+`.fluffyHammer{color:#123456;padding:1px 2px 3px 4px}
 /* Inline theming parameters */
 #sap-ui-theme-super\\.duper\\.looper{background-image:url('data:text/plain;utf-8,%7B%22deepSea%22%3A%22%23123456%22%7D')}
 `;
 	const cssRtlExpected =
-`.fluffyHammer {
-  color: #123456;
-  padding: 1px 4px 3px 2px;
-}
-
+`.fluffyHammer{color:#123456;padding:1px 4px 3px 2px}
 /* Inline theming parameters */
 #sap-ui-theme-super\\.duper\\.looper{background-image:url('data:text/plain;utf-8,%7B%22deepSea%22%3A%22%23123456%22%7D')}
 `;
 	const parametersExpected =
-`{
-	"deepSea": "#123456"
-}`;
+`{"deepSea":"#123456"}`;
 	const lessPath = "/resources/super/duper/looper/themes/brightlight/library.source.less";
 	const lessVariablesPath = "/resources/super/duper/looper/themes/brightlight/variables.less";
 	const cssPath = "/resources/super/duper/looper/themes/brightlight/library.css";