[INTERNAL] Use clean-css for compression instead of less.js with compress

lib/processors/cssOptimizer.js

@@ -0,0 +1,32 @@
+const CleanCSS = require("clean-css");
+const log = require("@ui5/logger").getLogger("builder:processors:cssOptimizer");
+
+/**
+ * Optimizes the supplied CSS resources.
+ *
+ * @public
+ * @alias module:@ui5/builder.processors.cssOptimizer
+ * @param {Object} parameters Parameters
+ * @param {module:@ui5/fs.Resource[]} parameters.resources List of resources to be processed
+ * @returns {Promise<module:@ui5/fs.Resource[]>} Promise resolving with optimized resources
+ */
+module.exports = function({resources}) {
+	// use clean-css default options
+	const options = {
+		returnPromise: true
+	};
+	const cleanCSSInstance = new CleanCSS(options);
+	return Promise.all(resources.map((resource) => {
+		return resource.getString().then((css) => {
+			return cleanCSSInstance.minify(css).then((result) => {
+				if (Array.isArray(result.warnings) && result.warnings.length) {
+					log.warn(`Warnings occurred: ${result.warnings.join(", ")}`);
+				}
+				resource.setString(result.styles);
+				return resource;
+			}, (error) => {
+				throw new Error(`Errors occurred: ${error.join(", ")}`);
+			});
+		});
+	}));
+};

lib/processors/themeBuilder.js

@@ -30,9 +30,20 @@ class ThemeBuilder {
 	 * @param {module:@ui5/fs.Resource[]} resources Library files
 	 * @param {Object} [options] Build options
 	 * @param {boolean} [options.compress=false] Compress build output (CSS / JSON)
+	 *						DEPRECATED: Use [cssOptimizer]{@link module:@ui5/builder.processors.cssOptimizer} to compress CSS output.
+	 *					    Use compressJSON option to compress JSON output.
+	 * @param {boolean} [options.compressJSON=false] Compress build output (JSON)
 	 * @returns {Promise<module:@ui5/fs.Resource[]>} Resolving with array of created files
 	 */
-	build(resources, {compress = false} = {}) {
+	build(resources, {compress = false, compressJSON = false} = {}) {
+		// TODO 2.0: Remove deprecated "compress" parameter
+		if (compress) {
+			log.warn(`themeBuilder.build called with deprecated parameter "compress". ` +
+				`This parameter will be removed in @ui5/fs version 2.0. ` +
+				`Use processor "cssOptimizer" instead`
+			);
+		}
+
 		const files = [];
 
 		const compile = (resource) => {
@@ -67,7 +78,7 @@ class ThemeBuilder {
 
 				const libParams = new Resource({
 					path: themeDir + "/library-parameters.json",
-					string: JSON.stringify(result.variables, null, compress ? null : "\t")
+					string: JSON.stringify(result.variables, null, (compress || compressJSON) ? null : "\t")
 				});
 
 				files.push(libCss, libCssRtl, libParams);
@@ -99,13 +110,15 @@ class ThemeBuilder {
  * @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)
+ * @param {boolean} [parameters.options.compress=false] Compress build output (CSS / JSON)
+ * @param {boolean} [parameters.options.compressJSON=false] Compress build output (JSON)
  * @returns {Promise<module:@ui5/fs.Resource[]>} Promise resolving with theme resources
  */
 module.exports = ({resources, fs, options}) => {
 	const themeBuilder = new ThemeBuilder({fs});
 	const compress = options && options.compress;
-	return themeBuilder.build(resources, {compress}).then((files) => {
+	const compressJSON = options && options.compressJSON;
+	return themeBuilder.build(resources, {compress, compressJSON}).then((files) => {
 		themeBuilder.clearCache();
 		return files;
 	});

lib/tasks/buildThemes.js

@@ -1,4 +1,5 @@
 const themeBuilder = require("../processors/themeBuilder");
+const cssOptimizer = require("../processors/cssOptimizer");
 const ReaderCollectionPrioritized = require("@ui5/fs").ReaderCollectionPrioritized;
 const fsInterface = require("@ui5/fs").fsInterface;
 
@@ -14,10 +15,10 @@ const fsInterface = require("@ui5/fs").fsInterface;
  * @param {string} parameters.options.projectName Project name
  * @param {string} parameters.options.inputPattern Search pattern for *.less files to be built
  * @param {string} [parameters.options.librariesPattern] Search pattern for .library files
- * @param {boolean} [parameters.options.compress=true]
+ * @param {boolean} [parameters.options.compress=true] Whether or not to compress the theme resources
  * @returns {Promise<undefined>} Promise resolving with <code>undefined</code> once data has been written
  */
-module.exports = function({workspace, dependencies, options}) {
+module.exports = async function({workspace, dependencies, options}) {
 	const combo = new ReaderCollectionPrioritized({
 		name: `theme - prioritize workspace over dependencies: ${options.projectName}`,
 		readers: [workspace, dependencies]
@@ -30,13 +31,13 @@ module.exports = function({workspace, dependencies, options}) {
 		promises.push(combo.byGlob(options.librariesPattern));
 	}
 
-	const compress = options.compress === undefined ? true : options.compress;
+	const [allResources, availableLibraries] = await Promise.all(promises);
 
-	return Promise.all(promises).then(([allResources, availableLibraries]) => {
-		if (!availableLibraries || availableLibraries.length === 0) {
-			// Try to build all themes
-			return allResources;
-		}
+	let resources;
+	if (!availableLibraries || availableLibraries.length === 0) {
+		// Try to build all themes
+		resources = allResources;
+	} else {
 		/* Don't try to build themes for libraries that are not available
 			(maybe replace this with something more aware of which dependencies are optional and therefore
 			legitimately missing and which not (fault case))
@@ -54,18 +55,28 @@ module.exports = function({workspace, dependencies, options}) {
 			return false;
 		};
 
-		return allResources.filter(isAvailable);
-	}).then((resources) => {
-		return themeBuilder({
-			resources,
-			fs: fsInterface(combo),
-			options: {
-				compress
-			}
-		});
-	}).then((processedResources) => {
-		return Promise.all(processedResources.map((resource) => {
-			return workspace.write(resource);
-		}));
+		resources = await allResources.filter(isAvailable);
+	}
+
+	const compress = options.compress === undefined ? true : options.compress;
+	// do not use compression flag of less.js css (deprecated)
+	const processedResources = await themeBuilder({
+		resources,
+		fs: fsInterface(combo),
+		options: {
+			compressJSON: compress,
+			compress: false
+		}
 	});
+
+	if (compress) {
+		const cssResources = processedResources.filter((resource) => {
+			return resource.getPath().endsWith(".css");
+		});
+		await cssOptimizer({resources: cssResources,
+			fs: fsInterface(combo)});
+	}
+	return Promise.all(processedResources.map((resource) => {
+		return workspace.write(resource);
+	}));
 };

package.json

@@ -100,6 +100,7 @@
 		"@ui5/fs": "^1.1.2",
 		"@ui5/logger": "^1.0.2",
 		"cheerio": "^0.22.0",
+		"clean-css": "^4.2.1",
 		"escape-unicode": "^0.2.0",
 		"escodegen": "^1.12.1",
 		"escope": "^3.6.0",

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

@@ -0,0 +1,24 @@
+/* function */
+._sapUiTableVScrWithActionsInnerMixin_CalcMarginRight(@ScrollbarSize, @RowActionWidth) {
+	margin-right: calc(@ScrollbarSize ~"+" @RowActionWidth);
+}
+
+._sapUiTableVScrWithActionsInnerMixin(@ScrollbarSize, @RowActionWidth) {
+
+	.meinnerle {
+		._sapUiTableVScrWithActionsInnerMixin_CalcMarginRight(@ScrollbarSize, @RowActionWidth);
+	}
+
+	.myele {
+		margin-right: @ScrollbarSize;
+	}
+}
+
+.supi:not(.thehe) {
+	._sapUiTableVScrWithActionsInnerMixin(0px, @_mywidth);
+}
+
+.button {
+	color: @_mycolor1;
+	background-color: @_mycolor2;
+}

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

@@ -0,0 +1 @@
+{"_mywidth":"0.25rem","_mycolor1":"#ff00ff","_mycolor2":"#ff00ff"}

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

@@ -0,0 +1,4 @@
+@_mywidth: 0.25rem;
+@_mycolor1: #ff00ff;
+@_mycolor2: #f0f;
+@import "Button.less";

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

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

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

@@ -0,0 +1,24 @@
+/* function */
+._sapUiTableVScrWithActionsInnerMixin_CalcMarginRight(@ScrollbarSize, @RowActionWidth) {
+	margin-right: calc(@ScrollbarSize ~"+" @RowActionWidth);
+}
+
+._sapUiTableVScrWithActionsInnerMixin(@ScrollbarSize, @RowActionWidth) {
+
+	.meinnerle {
+		._sapUiTableVScrWithActionsInnerMixin_CalcMarginRight(@ScrollbarSize, @RowActionWidth);
+	}
+
+	.myele {
+		margin-right: @ScrollbarSize;
+	}
+}
+
+.supi:not(.thehe) {
+	._sapUiTableVScrWithActionsInnerMixin(0px, @_mywidth);
+}
+
+.button {
+	color: @_mycolor1;
+	background-color: @_mycolor2;
+}

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

@@ -0,0 +1,4 @@
+@_mywidth: 0.25rem;
+@_mycolor1: #ff00ff;
+@_mycolor2: #f0f;
+@import "Button.less";

test/lib/builder/builder.js

@@ -68,7 +68,7 @@ async function checkFileContentsIgnoreLineFeeds(expectedFiles, expectedPath, des
 				expectedContent = JSON.parse(expectedContent.replace(/(:\s+)(\d+)/g, ": 0"));
 				assert.deepEqual(currentContent, expectedContent);
 			} else {
-				assert.equal(currentContent.replace(newLineRegexp, "\n"), expectedContent.replace(newLineRegexp, "\n"));
+				assert.equal(currentContent.replace(newLineRegexp, "\n"), expectedContent.replace(newLineRegexp, "\n"), `file contents do not match. Paths actual: '${destFile}', expected: '${expectedFile}'`);
 			}
 		};
 		await Promise.all([currentFileContentPromise, expectedFileContentPromise]).then(assertContents);