[INTERNAL] introduce clean css

WIP

Author: tobiasso85

lib/processors/cssOptimizer.js

@@ -0,0 +1,35 @@
+const CleanCSS = require("clean-css");
+const log = require("@ui5/logger").getLogger("builder:processors:cssOptimizer");
+
+/**
+ * Optimizes the supplied 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}) {
+	return Promise.all(resources.map((resource) => {
+		return resource.getString().then((css) => {
+			const options = {
+				compatibility: {
+					properties: {
+						colors: false
+					}
+				},
+				returnPromise: true
+			};
+			return new CleanCSS(options).minify(css).then((result) => {
+				if (Array.isArray(result.warnings) && result.warnings.length > 0) {
+					log.warn(`Warnings occurred: ${result.warnings.join(", ")}`);
+				}
+				resource.setString(result.styles);
+				return resource;
+			}, (error) => {
+				throw new Error(`Errors occurred: ${error.join(", ")}`);
+			});
+		});
+	}));
+};

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;
 
@@ -12,9 +13,10 @@ const fsInterface = require("@ui5/fs").fsInterface;
  * @param {module:@ui5/fs.AbstractReader} parameters.dependencies Reader or Collection to read dependency files
  * @param {Object} parameters.options Options
  * @param {string} parameters.options.pattern Pattern to locate the files to be processed
+ * @param {boolean} [parameters.options.compress=true] Whether or not to optimize the files
  * @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]
@@ -27,11 +29,13 @@ module.exports = function({workspace, dependencies, options}) {
 		promises.push(combo.byGlob(options.librariesPattern));
 	}
 
-	return Promise.all(promises).then(([allResources, availableLibraries]) => {
-		if (!availableLibraries || availableLibraries.length === 0) {
-			// Try to build all themes
-			return allResources;
-		}
+	const [allResources, availableLibraries] = await Promise.all(promises);
+
+	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))
@@ -49,18 +53,21 @@ module.exports = function({workspace, dependencies, options}) {
 			return false;
 		};
 
-		return allResources.filter(isAvailable);
-	}).then((resources) => {
-		return themeBuilder({
-			resources,
-			fs: fsInterface(combo),
-			options: {
-				compress: true
-			}
-		});
-	}).then((processedResources) => {
-		return Promise.all(processedResources.map((resource) => {
-			return workspace.write(resource);
-		}));
+		resources = await allResources.filter(isAvailable);
+	}
+	const processedResources = await themeBuilder({
+		resources,
+		fs: fsInterface(combo)
 	});
+	const compress = options.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-lock.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.0",
 		"escope": "^3.6.0",

package.json

@@ -25,15 +25,9 @@ test("integration: simple", (t) => {
   padding: 1px 2px 3px 4px;
 }`;
 	const cssExpected =
-`.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')}
-`;
+`.fluffyHammer{color:#123456;padding:1px 2px 3px 4px}#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}
-/* 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')}
-`;
+`.fluffyHammer{color:#123456;padding:1px 4px 3px 2px}#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"}`;
 	const lessPath = "/resources/super/duper/looper/themes/brightlight/library.source.less";
@@ -96,15 +90,9 @@ test("integration: imports", (t) => {
 	const lessVariablesContent =
 "@deepSea: #123456;";
 	const cssExpected =
-`.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')}
-`;
+`.fluffyHammer{color:#123456;padding:1px 2px 3px 4px}#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}
-/* 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')}
-`;
+`.fluffyHammer{color:#123456;padding:1px 4px 3px 2px}#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"}`;
 	const lessPath = "/resources/super/duper/looper/themes/brightlight/library.source.less";